原文地址:http://www.voidcn.com/article/p-xeovzwax-bsg.html
感想:transform: translateY(50% & -50%); animation-direction: normal & reverse;
HTML code:
<div class="container"> <p>Explorer</p> <p>discovery</p> </div>
CSS code:
html,body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } /* 为容器设置对比度滤镜 */ .container{ filter: contrast(10); background-color: black; overflow: hidden; } p{ margin: 0; color: white; font-size: 50px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; text-align: center; animation: show-hide 10s infinite; filter: opacity(0); } /* 让2段文本重叠 */ p:nth-child(1){ transform: translateY(50%); /* 让2段文本交替显示 */ animation-direction: normal; } p:nth-child(2){ transform: translateY(-50%); animation-direction: reverse; } @keyframes show-hide{ 0%{ /* blur: 模糊 */ filter: opacity(0) blur(0.08em); /* 增加字间距的变化效果 */ letter-spacing: -0.8em; } 25%{ filter: opacity(1) blur(0.08em); } 40%{ filter: opacity(1) blur(0.08em); } 50%{ filter: opacity(0) blur(0.08em); letter-spacing: 0.24em; } }