css3的动画详解 html直接可以运行

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       /*通过2D转换我们能够对元素进行移动、缩放、转动、拉长或拉伸。下面是2D转换的方法
       * transform为动画属性可以为2D或3D动画
       translate()元素从当前位置移动根据X，Y轴移动
       rotate() 旋转角度单位度 deg
       scale()缩放转换
       skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
       matrix()把所有的属性放在一起的简写包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
       * */
       .dh_2d{
           width: 80px;
           height: 50px;
           margin: 200px auto;
           background: #009688;
           /*transform: translate(100px,50px);*/
           /*transform: rotate(60deg);*/
           /*transform: scale(1.5,3);*/
           /*transform: skew();*/
           /*transform: skew(50deg ,60deg);*/
           transform: matrix(0.866,0.5,-0.5,0.866,0,0);
       }

       /*3D转换*/
       /*rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
          rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
          * */
       .dh_3d{
           width: 100px;
           height: 100px;
           border-top: 2px solid red;
           border-right:2px solid #006DCC ;
           border-bottom:2px solid #002A80 ;
           border-left:2px solid #000000 ;
           margin: 200px auto;
           transform: rotateX(160deg);
       }
       /*过渡效果*/
       /*
       CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
       要实现这一点，必须规定两项内容：
                规定您希望把效果添加到哪个 CSS 属性上
       规定效果的时长
       transition
       * */
       .dh_gd{
           width: 100px;
           height: 100px;
           border-top: 2px solid red;
           border-right:2px solid #006DCC ;
           border-bottom:2px solid #002A80 ;
           border-left:2px solid #000000 ;
           margin: 200px auto;
           /*transition: width 2s, height 5s;*/
           transition: transform 30s;
       }
       .dh_gd:hover{
           /*width: 200px;
           height: 200px;*/
           transform: scale(2,2);
       }
       /*自定义动画
       @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
       animation
       * */
       .dh_animation{
           width: 50px;
           height: 50px;
           background: #00FFFF;
           animation:mydh 5s infinite ;
       }
       @keyframes mydh{
           0% {width: 50px;height: 50px;background: #00FFFF;}
           25% {width: 10px;height: 10px; background: #0088CC;}
           50% {width: 100px;height: 100px;background: red;}
           75% {width: 80px;height: 80px;background: #1D7DB1;}
           100%{width: 50px;height: 50px;background: #00FFFF;}
       }


       </style>
   </head>
   <body>
       <div class="dh_2d"></div>
       <div class="dh_3d"></div>
       
       <div class="dh_gd"></div>
       
       <div class="dh_animation"></div>
   </body>
</html>

转载于:https://my.oschina.net/u/3803573/blog/2221873

css3的动画详解 html直接可以运行相关推荐

【CSS3】动画详解
在css3中主要有三种动画 transition:过渡 transfrom:2D转换 | 3D转换 animation 过渡:transition 这个动画意义上是补间动画(自动完成从起始状态到终止状 ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画创建工程,添加2个ViewController,通过rootViewContro ...
[转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页所有文章 JavaScript HTML5 CSS 基础技术前端职场工具资源更多频道▼ - 导航条 -首页所有文章JavaScr ...
Android Animation动画详解（二）：组合动画特效
前言上一篇博客Android Animation动画详解(一): 补间动画我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
Android 动画详解-思维导图版
转载请注明链接: https://blog.csdn.net/feather_wch/article/details/81503233 涉及视图动画(补间动画.逐帧动画).属性动画三种动画的使用方法, ...

css3的动画详解 html直接可以运行

css3的动画详解 html直接可以运行相关推荐

最新文章

热门文章