Tạo hiệu chứ chữ cuộn lên xuống đẹp và đơn giản bằng CSS3 - Hiệu ứng cuộn chữ đẹp và đơn giản chỉ bằng CSS, cho các bạn thiết kế web/blog cá nhân.
CSS
* {
margin: 0px;
padding: 0px;
font-weight: 200;
font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
background: #fafafa;
}
.container {
width: 210px;
height: 40px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -105px;
margin-top: -20px;
}
p {
float: left;
line-height: 40px;
font-size: 160%;
color: #333;
}
.scroller {
height: 40px;
line-height: 40px;
float: left;
margin-left: 7px;
overflow: hidden;
}
.scroller span {
display: block;
font-size: 160%;
color: #222;
}
.scroller .inner {
animation: scroll 5s infinite ease-out;
}
@keyframes scroll {
15% {margin-top: 0px;}
30% {margin-top: 0px;}
45% {margin-top: -40px;}
60% {margin-top: -40px;}
75% {margin-top: -80px;}
90% {margin-top: -80px;}
100% {margin-top: 0px;}
}
HTML
<div class="container">
<p>Trường</p>
<div class="scroller">
<div class="inner">
<span>Nguyễn.</span>
<span>Đẹpzai.</span>
<span>Ciute.</span>
</div>
</div>
</div>
Result
Codepen.io