2023-11-15 74
效果图:
在案例中 可以看见 文字从显示 然后方法到消失 紧接着进行下一段文字的动画效果 主要是通过关键帧动画 然后分别给每一段文字进行延时
html:
<div class="box"> <div style="--i: 0"> Cinematic, Animated Text Effect <br /> <span>Someone</span> </div> <div style="--i: 1"> Perfect for Any Movie <br /> <span>No one</span> </div> <div style="--i: 2"> Loops for Eternity <br /> <span>Anyone</span> </div> <div style="--i: 3"> Simple CSS Tricks <br /> <span>Everyone</span> </div> <div style="--i: 4"> Cinematic, Animated Text Effect <br /> <span>Everyone</span> </div> <div style="--i: 5"> Perfect for Any Movie <br /> <span>Someone</span> </div> <div style="--i: 6"> Loops for Eternity <br /> <span>No one</span> </div> <div style="--i: 7"> Simple CSS Tricks <br /> <span>Someone</span> </div> </div>
我们先将文字盒子水平垂直居中 设置好背景颜色 以及文字颜色 然后将他们进行隐藏
* { padding: 0; margin: 0; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(#81bcff, #303391); color: #fff; text-align: center; } .box { position: relative; max-width: 400px; font-size: 36px; text-transform: uppercase; font-family: "Oswald", sans-serif; } .box div { position: absolute; opacity: 0; width: 40vw; height: 10vw; overflow: hidden; transform: translateX(-50%); height: 1.2; line-height: 1.2; } .box div span { display: block; height: 50px; font-size: 24px; text-transform: lowercase; opacity: 0.8; font-family: "Rubik", sans-serif; }
然后进行关键帧动画设置
@keyframes slide { 0% { opacity: 0; filter: blur(10px); transform: translateX(-50%) scale(1.2); } 3% { opacity: 1; filter: blur(0px); transform: translateX(-50%) scale(0.9); } 12% { opacity: 1; filter: blur(0px); transform: translateX(-50%) scale(1); } 16% { opacity: 0; filter: blur(10px); transform: translateX(-50%) scale(1.2); } 80% { opacity: 0; } 100% { opacity: 0; } }
给每一个盒子设置延时 间隔为4s依次递增时间
.box div:nth-child(2) { animation-delay: 4s; } .box div:nth-child(3) { animation-delay: 8s; } .box div:nth-child(4) { animation-delay: 12s; } .box div:nth-child(5) { animation-delay: 16s; } .box div:nth-child(6) { animation-delay: 20s; } .box div:nth-child(7) { animation-delay: 24s; } .box div:nth-child(8) { animation-delay: 28s; }
原文链接:http://1.15.94.33/?id=208
=========================================
http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台,请勿相信其他任何渠道。
Jquery 2022-12-02
Jquery 2022-12-02
Vue 2023-06-02
Jquery 2022-12-02
Vue 2023-07-14
Vue 2023-06-02
Vue 2023-07-07
Vue 2023-07-19
Vue 2023-07-03
Vue 2023-07-26
扫码二维码
获取最新动态