H5篇:页面中实现动画的几种方式?(附代码)-开发网

其他回答《H5篇：页面中实现动画的几种方式？（附代码）》中，带大家一起掌握页面上完成动画几类方法。下边本文为大家介绍如何使用CSS3来达到一个简单漂亮的动态效果，我们一起看看

备考下 css3 的影片，都快要不容易写，那时候蛮喜欢 flash 的，太可惜了时期前进。写这儿就当文本文档一下吧

浏览器支持

Internet Explorer 10、Firefox 及其 Opera 适用 animation 特性。

Safari 和 Chrome 适用取代的 -webkit-animation 特性。

注解：Internet Explorer 9 及其更早版本号不兼容 animation 特性。

概念定义使用方法

animation属性一个缩写特性，用以设定六个动漫特性：

animation-name
animation-duration
animation-timing-function animation-delay
animation-iteration-count animation-direction

词法

animation: name duration timing-function delay iteration-count direction;

值	叙述	备注名称
animation-timing-function	要求动画速度曲线	可选值为 linear ，ease（淡入淡出），ease-in，ease-out ，ease-in-out，cubic-bezier(n, n, n, n)
animation-play-state	要求动漫是不是后台运行或中止。	paused 表明脱机工作，running 表明工作状态
animation-name	要求必须关联到选择符的 keyframe 名字	@keyframe { from {opcity:0} to {opcity:1}}
animation-iteration-count	要求动漫应当播放频次	可给值为 infinite（不限次数）n（例如 5 次）
animation-fill-mode	动漫在播放视频以前或以后，其动态效果是不是由此可见。	none（默认设置） / forwards（动漫结束后） / backwards（在动漫表明以前） / both（二者）;
animation-duration	要求进行动漫所花费的时间，以秒或ms计	务必要求不然，不遵守动漫
animation-direction	要求是否该轮着反方向播放动画	初始值 normal，alternate 为动漫应当轮着反方向播放视频。左右左
animation-delay	要求在动漫开始前的延迟时间	界定动漫开始之前等待时间，以秒或ms计。初始值是 0。单位是 s

关于keyframe的概念

Firefox适用取代的@-moz-keyframes标准；
Opera适用取代的@-o-keyframes标准；
Safari和Chrome适用取代的@-webkit-keyframes标准；
选值适用 0-100% 和from，to。

@keyframes move {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 200px;
    left: 200px;
  }
  50% {
    top: 100px;
    left: 100px;
  }
  75% {
    top: 200px;
    left: 200px;
  }

  100% {
    top: 0px;
    left: 0px;
  }
}

@keyframes move {
  from {
    top: 0px;
    left: 0px;
  }
  to {
    top: 0px;
    left: 100px;
  }
}

demo 写了一个事例，地球围绕太阳转

H5篇:页面中实现动画的几种方式?(附代码)

以下属于编码

<!-- html 一部分 -->
<div style="width:700px; ">
  <div class="t">
    <div class="t1"></div>
  </div>
</div>

/* css 一部分 */
@keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.t {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 50%;
  transform: scale(.8);
  border: 1px solid #dedede;
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background: radial-gradient(72px, #f00, #ff0, #080);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 0 37px #fcff4a;
  }
  .t1 {
    height: 20px;
    border-radius: 50%;
    width: 20px;
    margin-top: -10px;
    top: 50%;
    left: -10px;
    background: radial-gradient(26px, #0082ff, #184608, #003ade);
    position: absolute;
    animation: t 3s infinite linear;
    transform-origin: 260px center;
  }
}

</style>

还有一个 demo ，在这儿https://k-ui.cn

强烈推荐学习培训CSS3视频教学

以上就是关于教你如何如何使用CSS3完成动态效果（编码共享）的具体内容，大量欢迎关注AdminJS其他类似文章！

标签：

原文地址：H5篇:页面中实现动画的几种方式?(附代码)发布于2023-05-29 18:30:01