Bracket Animation

Hoạt hình này bắt chước hiệu ứng gõ băng chuyền mà tôi đã đề cập trước đó, ngoại trừ việc này có thể được thực hiện chỉ bằng CSS. Nó dựa vào một hình động lặp tùy chỉnh di chuyển từ khung hình chính CSS này sang khung hình chính khác, mỗi khung hiển thị một từ hoặc cụm từ khác nhau trong văn bản xoay.

Tôi thấy hiệu ứng này tinh tế hơn nhiều và dễ đọc hơn trên trang chủ. Nếu bạn đang tìm kiếm một số hiệu ứng văn bản thú vị cho trang chủ của mình thì đây sẽ là một lựa chọn tuyệt vời.[html]<!-- Code by ThichCode.NET -->
<div class="content">
<div class="content__container">
<p class="content__container__text">
Hello
</p>

<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">kelvin !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>[/html][css]<!-- Code by ThichCode.NET -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"/>
<style>
body {
width: 100%;
height: 100%;
position: fixed;
background-color: #34495e;
}

.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}

.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}

.content__container:before {
content: '[';
left: 0;
}

.content__container:after {
content: ']';
position: absolute;
right: 0;
}

.content__container:after,
.content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.content__container__text {
display: inline;
float: left;
margin: 0;
}

.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}

.content__container__list__item {
line-height: 40px;
margin: 0;
}

@-webkit-keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@-webkit-keyframes change {
0%,
12.66%,
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%,
29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,
45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,
62.64% {
-webkit-transform: translate3d(0, -75%, 0);
transform: translate3d(0, -75%, 0);
}
66.64%,
79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
83.3%,
95.96% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
}

@keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@keyframes change {
0%,
12.66%,
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%,
29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,
45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,
62.64% {
-webkit-transform: translate3d(0, -75%, 0);
transform: translate3d(0, -75%, 0);
}
66.64%,
79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
83.3%,
95.96% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
}

</style>[/css]