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
Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com".
Tìm hiểu thêm
BÌNH LUẬN (0)