025动画

最新推荐文章于 2020-12-04 10:57:06 发布

Manta__

最新推荐文章于 2020-12-04 10:57:06 发布

阅读量165

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104942910

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

css3动画
　　使元素从一种样式逐渐变化为另一种样式的效果
　　animation属性是一个简写属性形式: （可以用来描述可动画的属性）
animation：
　　animation-name
　　animation-duration
　　animation-timing-function
　　animation-delay
　　animation-iteration-count
　　animation-direction
　　animation-fill-mode
　　animation-play-state
在每个动画定义中，顺序很重要：可以被解析为<time>的第一个值被分配给animation-duration, 第二个分配给 animation-delay。

animation-name
　　属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
值:
　　none特殊关键字，表示无关键帧。
　　keyframename标识动画的字符串

关键帧
语法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}

animiationName:必写项，定义动画的名称
 keyframes-selector：必写项，动画持续时间的百分比
             from：0%
             to：100%
 css-style：css声明

animation-duration
　　属性指定一个动画周期的时长。
　　默认值为0s，表示无动画。
值
　　一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
　　注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s

animation-timing-function
　　属性定义CSS动画在每一动画周期中执行的节奏。
　　对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。
　　动画的默认效果：由慢变快再变慢
　　　　　　　　　　linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
　　　　　　　　　　ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
　　　　　　　　　　ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
　　　　　　　　　　ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
　　　　　　　　　　ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
　　　　　　　　　　cubic-bezier(1,1,2,3)
　　　　　　　　　　steps(n,[start|end])
　　　　　　　　　　　　传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
　　　　　　　　　　　　第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
　　　　　　　　　　　　默认值为 end。

animation-delay
　　定义动画开始前等待的时间,以秒或毫秒，(属于动画外的范畴)
值:
<time>
　　从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(S)和毫秒(m s)。如果未设置单位,义无效

animation-iteration-count
　　定义了动画执行的次数）(只会管理动画内的属性，动画的延迟不会被循环)只作用于动画内的属性,重复的是关键帧
值
　　infinite无限循环播放动画.
　　<number>动画播放的次数不可为负值.
animation-direction
　　定义了动画执行的方向，还会影响animation-timing function的形式
值
　　normal　每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
　　alternate　动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
　　reverse反向运行动画，每周期结束动画由尾到头运行。反转的是关键帧和animation-timing-function
　　alternate-reverse 反向交替，反向开始交替

animation-fill-mode
　　属于动画外的范畴，定义动画在动画外的
什么是动画外的状态，from之前 animation-delay，to之后
值
none:动画外的状态保持在动画之前的位置
backwards: from之前的状态与from的状态保持一致
forwards ：to之后的状态与to的状态保持一致
both：动画外的状态与from和to的状态保持一致

@keyframes animiat ionName{
	keyframes-selector{
		css-style;
	}
}

keyframes- selector可以是关键帧form (8%)和to (100%)
　　　　　　　　　可以是百分比
　　　　　　　　　　代表的是时间的百分比(时间点)

animation-play-state
　　定义了动画执行的运行和暂停
值
　　running当前动画正在运行。
　　paused当前动画以被停止。

兔斯基
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   
   *{
    margin: 0;
    padding: 0;
   }
   html,body{
    height: 100%;
    overflow: hidden;
   }
   #tsj{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 48px;
    height: 48px;
    background: url(../img/animation.png) no-repeat;
    background-position:0 0;
    animation: move 1s steps(12,end) infinite ;
   }
   
   @keyframes move{
    from{
     background-position: 0 0;
    }
    to{
     background-position:-576px 0;
    }
   }
  </style>
 </head>
 <body>
  <div id="tsj">
   
  </div>
 </body>
</html>

在这里插入图片描述

开机动画2d
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   html,body{
    height: 100%;
    overflow: hidden;
   }
   #wrap{
    height: 100%;
    position: relative;
    background: gray;
   }
   #wrap > .inner{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    white-space: nowrap;
   }
   #wrap > .inner >span{
    position: relative;
    /*animation: move 1s linear infinite alternate;*/
   }
   
   @keyframes move{
    from{
     top: 0px;
    }
    to{
     top: -10px;
    }
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div class="inner">
    <span>几</span>
    <span>百</span>
    <span>斤</span>
    <span>的</span>
    <span>邱</span>
    <span>海</span>
    <span>峰</span>
    <span>了</span>
    <span>上</span>
    <span>课</span>
    <span>还</span>
    <span>要</span>
    <span>装</span>
    <span>可</span>
    <span>爱</span>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  
  window.οnlοad=function(){
   var spanNodes = document.querySelectorAll("#wrap > .inner >span");
   var colors=["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink","#1883BA"];
   for(var i=0;i<spanNodes.length;i++){
    spanNodes[i].style.animation="move .3s "+(i*50)+"ms linear infinite alternate";
    spanNodes[i].style.color=colors[i];
   }
  }
  
  
  
 </script>
</html>

在这里插入图片描述

开机动画3d
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   html,body{
    height: 100%;
    overflow: hidden;
   }
   #wrap{
    height: 100%;
    position: relative;
    background: pink;
    perspective: 1000px;
   }
   #wrap > .inner{
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
   }
   @keyframes move{
    from{
     transform: translate3d(-50%,-50%,0) rotateY(0deg);
    }
    to{
     transform: translate3d(-50%,-50%,0) rotateY(360deg);
    }
   }
   
   #wrap > .inner > img{
    width: 30%;
    margin-top: -38px;
    animation: move 2s linear infinite ;
   }
   #wrap > .inner > img,#wrap > .inner > p{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0) rotateY(0deg);
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div class="inner">
    <img src="../img/load/logo2.png"  />
    <p>已加载0%</p>
   </div>
  </div>
 </body>
 <script src="../js/data.js"></script>
 <script type="text/javascript">
  window.οnlοad=function(){
   var pNode = document.querySelector("#wrap>.inner>p");
   var flag = 0;
   // 拿数组
   var arr=[];
   for(item in imgData){
    arr=arr.concat(imgData[item]);
   }
   
   for(var i=0;i<arr.length;i++){
    var img = new Image();
    //ajax请求
    img.src=arr[i];
    img.οnlοad=function(){
     flag++;
     pNode.innerHTML="已加载"+(Math.round(flag/arr.length*100))+"%";
    }
    img.οnerrοr=function(){
     console.log("地址有问题")
    }
   }
   
  }
 </script>
</html>

在这里插入图片描述

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
025动画

css3动画使元素从一种样式逐渐变化为另一种样式的效果animation属性是一个简写属性形式: （可以用来描述可动画的属性）简写属性animationanimation：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimati...
复制链接

扫一扫

专栏目录