原文地址: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; } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。