您现在的位置是：网站首页> 编程资料编程资料

css3动画效果小结(推荐)纯CSS3 3D魔方翻转动画特效源码CSS3鼠标滑过图片标题和遮罩层动画特效源码纯CSS3绘制的哆啦A梦头像动画效果源码CSS3实现滚动条动画效果代码分享纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码CSS3实现的鼠标滑过边框线条动画特效源码CSS3中Transform动画属性用法详解 2016奥运会小人骑自行车CSS3动画特效源码

2021-09-04 716人已围观

简介 下面小编就为大家带来一篇css3动画效果小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

css3的动画功能有以下三种:

1、transition(过度属性)
2、animation(动画属性)
3、transform(2D/3D转换属性)

下面逐一进行介绍我的理解：

1、transition:<过渡属性名称><过渡时间><过渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多个属性的过渡效果可以这样写：

方法1：-webkit-transition:<属性1><时间1> ,<属性2><时间2> ,。。。

方法2：

-webkit-transition:<属性1><时间1>;

-webkit-transition:<属性2><时间2>;

 

transition-timing-function属性值有5个:

ease:缓慢开始，缓慢结束

liner:匀速

ease-in:缓慢开始

ease-out:缓慢结束

ease-in-out:缓慢开始，缓慢结束（和ease稍有区别）

实例：
transition过渡效果

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transition过渡效果title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             transition: top 5s ease,left 5s ease ;   
  19.             -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   
  20.             -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   
  21.             -o-transition: top 5s ease,left 5s ease ; /* Opera */   
  22.         }   
  23.         .btn{   
  24.             width: 512px;   
  25.             margin: 0 auto;   
  26.             border: 2px solid #e3e3e3;   
  27.             border-radius: 5px;   
  28.             padding: 10px;   
  29.   
  30.         }   
  31.         .btn button{   
  32.             width: 80px;   
  33.             height: 40px;   
  34.             text-align: center;   
  35.             line-height: 40px;   
  36.             margin-right: 20px;   
  37.         }   
  38.         button:last-child{   
  39.             margin-right: 0px;   
  40.         }   
  41.     style>  
  42.     <script>  
  43.         window.onload=function(){   
  44.             var e1 = document.getElementById("e1");   
  45.             var e2 = document.getElementById("e2");   
  46.             var e3 = document.getElementById("e3");   
  47.             var e4 = document.getElementById("e4");   
  48.             var e5 = document.getElementById("e5");   
  49.             var box = document.getElementById("box");   
  50.             e1.onclick=function(){   
  51.                 box.style.left = 1000+"px";   
  52.                 box.style.top = 100+"px";   
  53.                 box.style.transitionTimingFunction="ease";   
  54.             };   
  55.             e2.onclick=function(){   
  56.                 box.style.right = 0+"px";   
  57.                 box.style.top = 0+"px";   
  58.                 box.style.transitionTimingFunction="liner";   
  59.             };   
  60.             e3.onclick=function(){   
  61.                 box.style.right = 1000+"px";   
  62.                 box.style.top = 100+"px";   
  63.                 box.style.transitionTimingFunction="ease-in";   
  64.             };   
  65.             e4.onclick=function(){   
  66.                 box.style.left = 0+"px";   
  67.                 box.style.top = 0+"px";   
  68.                 box.style.transitionTimingFunction="ease-out";   
  69.             };   
  70.             e5.onclick=function(){   
  71.                 box.style.left = 1000+"px";   
  72.                 box.style.top = 100+"px";   
  73.                 box.style.transitionTimingFunction="ease-in-out";   
  74.             };   
  75.   
  76.         }   
  77.     script>  
  78. head>  
  79. <body>  
  80.     <div id="box">div>  
  81.     <br>  
  82.     <br>  
  83.     <br>  
  84.     <br> 

    上一篇：设置一个DIV块固定在屏幕中央的两种方法(推荐)关于div中img,span垂直居中的问题解决img在div中居中的问题html5实现适用于手机端的div图片放大预览效果源码DIV+CSS实现带三角箭头的提示框 div被iframe遮住的几种情况及解决方法DIV点击折叠实例代码DIV始终浮动在页面底部CSS设置DIV垂直居中的N种方法 兼容IE浏览器 CSS文本和div垂直居中方法总结 CSS控制DIV层显示和隐藏的实现方法

    下一篇：Flexbox制作CSS布局实现水平垂直居中的简单实例CSS水平垂直居中的几种方法总结css让容器水平垂直居中的7种方式利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS设置文字图片垂直居中的方法总结深入理解CSS行高line-height与文本垂直居中的原理CSS设置DIV垂直居中的N种方法 兼容IE浏览器 CSS文本和div垂直居中方法总结 CSS 实现垂直居中的几种方法(必看)CSS在固定宽高的div内实现垂直居中的实例详解CSS实现垂直居中的几种方法小结

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网