黑松山资源网 Design By www.paidiu.com
实现如图所示的动画效果:
预载动画一:双旋圈
在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。
实现如图所示:
html代码:
<body style="background: #ffb83c;"> <div id="preloader-1"> <span></span> <span></span> </div> </body>
css代码:
#preloader-1{ position: relative; } #preloader-1 span{ position: absolute; border:8px solid #fff; border-top:8px solid transparent; border-radius: 999px; } #preloader-1 span:nth-child(1){ width:80px; height: 80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2){ top:20px; left:20px; width:40px; height: 40px; animation: spin-2 1s infinite linear; } @keyframes spin-1{ 0%{transform: rotate(360deg); opacity: 1.0;} 50%{transform: rotate(180deg); opacity: 0.5;} 100%{transform: rotate(0deg);opacity: 0;} } @keyframes spin-2{ 0%{transform: rotate(0deg); opacity: 0.5;} 50%{transform: rotate(180deg); opacity: 1;} 100%{transform: rotate(360deg);opacity: 0.5;} }
预载动画二:交错圈
两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
效果:
html代码:
<body style="background: #4ad3b4;"> <div id="preloader-2"> <span></span> <span></span> </div> </body>
css代码:
#preloader-2{ position: relative; } #preloader-2 span{ position: absolute; width:30px; height: 30px; background: #fff; border-radius: 999px; } #preloader-2 span:nth-child(1){ animation: cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2){ animation: cross-2 1.5s infinite linear; } @keyframes cross-1{ 0%{transform: translateX(0); opacity: 0.5;} 50%{transform: translateX(80px); opacity: 1;} 100%{transform: translateX(0);opacity: 0.5;} } @keyframes cross-2{ 0%{transform: translateX(80px); opacity: 0.5;} 50%{transform: translateX(0); opacity: 1;} 100%{transform: translateX(80px);opacity: 0.5;} }
预载动画三:旋转圈
效果:
html代码:
<body style="background: #ab69d9;"> <div id="preloader-3"> <span></span> </div> </body>
css代码:
#preloader-3{ position: relative; width:80px; height: 80px; border:4px solid rgba(255,255,255,.25); border-radius: 999px; } #preloader-3 span{ position: absolute; width:80px; height:80px; border:4px solid transparent; border-top:4px solid #fff; border-radius: 999px; top:-4px; left:-4px; animation: rotate 1s infinite linear; } @keyframes rotate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }
预载动画四:跳动圈
这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。
效果:
html代码:
<body style="background: #c1d64a;"> <div id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body>
css代码:
#preloader-4{ position: relative; } #preloader-4 span{ position:absolute; width:16px; height: 16px; border-radius: 999px; background: #fff; animation: bounce 1s infinite linear; } #preloader-4 span:nth-child(1){ left:0; animation-delay: 0s; } #preloader-4 span:nth-child(2){ left:20px; animation-delay: 0.25s; } #preloader-4 span:nth-child(3){ left:40px; animation-delay: 0.5s; } #preloader-4 span:nth-child(4){ left:60px; animation-delay: 0.75s; } #preloader-4 span:nth-child(5){ left:80px; animation-delay: 1.0s; } @keyframes bounce{ 0%{transform: translateY(0px);opacity: 0.5;} 50%{transform: translateY(-30px);opacity: 1.0;} 100%{transform: translateY(0px);opacity: 0.5;} }
预载动画五:雷达圈
一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。
效果:
html代码:
<body style="background: #f9553f;"> <div id="preloader-5"> <span></span> <span></span> <span></span> </div> </body>
css代码:
#preloader-5{ position: relative; } #preloader-5 span{ position:absolute; width:50px; height: 50px; border:5px solid #fff; border-radius: 999px; opacity: 0; animation: radar 2s infinite linear; } #preloader-5 span:nth-child(1){ animation-delay: 0s; } #preloader-5 span:nth-child(2){ animation-delay: 0.66s; } #preloader-5 span:nth-child(3){ animation-delay: 1.33s; } @keyframes radar{ 0%{transform: scale(0);opacity: 0;} 25%{transform: scale(0);opacity: 0.5;} 50%{transform: scale(1);opacity: 1.0;} 75%{transform: scale(1.5);opacity: 0.5;} 100%{transform: scale(2);opacity: 0;} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 魏新雨《为你祈祷+新歌精逊2CD[WAV]
- 影心、明萨拉你选哪个?国外美女COS《博德3》
- 澳洲女子骑车跌入“自杀树”丛 疼痛持续9个月崩溃
- 育碧公布2024“她创力”计划:为女性游戏人提供辅导
- 刘美君.2017-千色·30总选3CD【环球】【WAV+CUE】
- 群星.2022-星河长明电视原声带【乐有奇思】【FLAC分轨】
- 陈淑桦.1995-淑桦盛开Forever【滚石】【WAV+CUE】
- 《再来一张》评测:出师成败皆系“赌”
- 《银河汉堡店》测评:我是银河走菜王!
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 萧煌奇《没事的》[320K/MP3][96.22MB]
- 萧煌奇《没事的》[FLAC/分轨][263.38MB]
- 群星《音你而来 第6期》[320K/MP3][90.61MB]
- 交错战线爬塔攻略一览
- 战锤40K星际战士2全近战武器使用教学|近战武器连招表