纯css动画（圆不停旋转、页面上拉提醒）

最新推荐文章于 2024-09-20 14:14:01 发布

阿啦ala

最新推荐文章于 2024-09-20 14:14:01 发布

阅读量711

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/weixin_39152200/article/details/106900426

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS3 @keyframes创建动画，包括一个不断旋转的圆形图标和一个页面上拉时出现的提醒动画。通过关键帧设置动画的开始和结束状态，实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圆不停旋转

/* 创建动画 */
@-webkit-keyframes music { /* Safari and Chrome */
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}

@-moz-keyframes music { /* Firefox */
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}

@keyframes music {
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}
.page-top .music{
	animation:music 1.5s infinite linear;
   -webkit-animation: music 1.5s infinite linear;  /* 使用动画 */
}

页面上拉提醒


 @-webkit-keyframes up{
   0%,30% {
     opacity: 0;
     -webkit-transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     -webkit-transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     -webkit-transform: translate(0, -8px);
   }
 }

 @-moz-keyframes up {
   0%,30% {
     opacity: 0;
     -moz-transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     -moz-transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     -moz-transform: translate(0, -8px);
   }
 }

 @keyframes up{
   0%,30% {
     opacity: 0;
     transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     transform: translate(0, -8px);
   }
 }
 
 .up{
	animation:up 1.5s infinite ease-in-out;
   -webkit-animation: up 1.5s infinite ease-in-out;
 }