CSS3绘制超炫的上下起伏波动进度加载动画

时间：2021-05-08

先看看效果图：

CSS Code复制内容到剪贴板
  • #loader1,
  • #loader1:before,
  • #loader1:after{
  • background:#f2fa08;
  • -webkit-animation:load11sinfiniteease-in-out;
  • animation:load11sinfiniteease-in-out;
  • width:1em;
  • height:4em;
  • }
  • #loader1:before,
  • #loader1:after{
  • position:absolute;
  • top:0;
  • content:'';
  • }
  • #loader1:before{
  • left:-1.5em;
  • }
  • #loader1{
  • text-indent:-9999em;
  • margin:50px50px;
  • position:relative;
  • float:left;
  • font-size:11px;
  • -webkit-animation-delay:0.16s;
  • animation-delay:0.16s;
  • }
  • #loader1:after{
  • left:1.5em;
  • -webkit-animation-delay:0.32s;
  • animation-delay:0.32s;
  • }
  • @-webkit-keyframesload1{
  • 0%,
  • 80%,
  • 100%{
  • box-shadow:00#f2fa08;
  • height:4em;
  • }
  • 40%{
  • box-shadow:0-2em#f2fa08;
  • height:5em;
  • }
  • }
  • @keyframesload1{
  • 0%,
  • 80%,
  • 100%{
  • box-shadow:00#f2ff08;
  • height:4em;
  • }
  • 40%{
  • box-shadow:0-2em#f2ff08;
  • height:5em;
  • }
  • }

  • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章