1、复杂动画

（1）涉及到的属性：

animation-name：动画名称；

animation-duration：单次动画总时长；

animation-timing-function：时间函数；

animation-delay：播放前延时的时长；

animation-iteration-count：播放次数（具体的数字），当设置infinite时是循环播放；

animation-direction：播放顺序，其中normal是正常播放，alternate是轮流反向播放，播放次数必须在2次以上。

（2）书写方式

@keyframes 名字（自己取一个名字）{   ——>定义一个动画

}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>复杂动画练习</title>

 </head>

 <style>

     .box {

         width: 200px;

         height: 200px;

         background-color: blueviolet;

         border: solid black;

         position: relative;

         top: 0;

         /* 动画名称 */

         animation-name: demo;

         /* 动画时长 */

         animation-duration: 5s;

         /* 动画运行速度 */

         animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

         /* 播放前延迟的时长 */

         animation-delay: 3s;

         /* 播放次数，这里写的时循环播放，可以写具体数字 */

         animation-iteration-count: infinite;

         /* 播放顺序，这里写的时轮流反向播放，可以写normal正常播放 */

         animation-direction: alternate;

     }

     @keyframes demo {

         from {

             top: 0;

             border-radius: 0;

         }

         20% {

             top: 100px;

             left: 100px;

             border-radius: 30px;

         }

         50% {

             top: 200px;

             left: 100px;

             border-radius: 30px

         }

         to {

             top: 400px;

             left: 400px;

             border-radius: 50%

         }

     }

 </style>

 <body>

     <div class="box">

         动画练习

         <!-- <img src="img/2010011712541759.jpg" alt=""> -->

     </div>

 </body>

 </html>

效果如下：

2、盒子变形

（1）  变形：通过变形可以改变盒子的视觉效果，变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响。

（2）  变形的类型

Translate（移动）

Scale（缩放，1以下是缩小，1以上是扩大）

Skew（倾斜，单位deg）

Rotate（旋转，默认是沿着Z轴旋转，单位deg）

（3）  定义原点

Transform-origin：设置盒子的中心点。

（4）  其他属性

背面可见性：backface-visibility

visible：默认值，背面可见

hidden：背面不可见

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>盒子变形</title>

 </head>

 <style>

     .box {

         width: 260px;

         height: 260px;

         position: relative;

     }

     .zheng,

     .fan {

         width: 260px;

         height: 260px;

         font-size: 26px;

         border: solid black;

         color: white;

         text-align: center;

         line-height: 260px;

         position: absolute;

         top: 0;

         left: 0;

         transition: all 1s;

         backface-visibility: hidden;

     }

     .zheng {

         background-color: blueviolet;

         z-index: 2;

     }

     .fan {

         background-color: green;

         transform: rotateY(-180deg) rotateZ(-180deg);

     }

     .box:hover .zheng {

         transform: rotateY(180deg) rotateZ(180deg);

     }

     .box:hover .fan {

         transform: rotateY(0deg) rotateZ(0deg);

     }

 </style>

 <body>

     <div class="box">

         <div class="zheng">正面</div>

         <div class="fan">反面</div>

     </div>

 </body>

 </html>

变形效果如下：

HTML-复杂动画和变形的更多相关文章

  1. Unity插件 - MeshEditor（五） 网格顶点动画（变形动画）

    源码已上传至github,并持续更新,链接请看底部.(本帖跟随github持续更新) 网格顶点动画(变形动画)是针对于物体的形状可以随意变换并记录为关键帧的动画,虽然模型的顶点数据还是应该交给GPU绘 ...

  2. html5--6-50 动画效果-变形

    html5--6-50 动画效果-变形 实例 学习要点 掌握2D变形动画 了解3D变形动画 transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.转换方 ...

  3. CSS过渡、动画及变形的基本属性与运用

    [逆战班] 动画可以让一个元素具有动态的效果,这个过程是使元素从一种样式变成另一个样式的过程.我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式.通常设置多个节点来实现复杂的动画效果.0% ...

  4. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  5. 程序猿必备的10款web前端动画插件一

    1.动画SVG框架幻灯片 在幻灯片之间切换时显示动画SVG帧的实验性幻灯片.不同的形状可以用来创建各种风格. 我们想和大家分享一个实验幻灯片.我们的想法是在从一个幻灯片转换到另一张幻灯片时,使SVG帧 ...

  6. Android 开发 VectorDrawable 矢量图 （三）矢量图动画

    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...

  7. Axiom3D:Ogre动画基本流程与骨骼动画

    在Axiom中,Animation类用于管理动画,在此对象中主要管理着AnimationTrack对象,此对象用于管理动画的各种类型的每一桢.在Axiom中,动画类型主要有变形动画,姿态动画,骨骼动画 ...

  8. FBX BlendShape/Morph动画解析

    目前fbx 2015.1中支持三种变形器:skinDeformer,blendShapeDeformer,vertexCacheDeformer.定义在fbxdeformer.h中: enum EDe ...

  9. HTML-简单动画

    简单动画 (1)简单动画通常称之为“过渡transition” Transition-property:需要过渡的属性,但是并非所有的属性都支持过渡. Transition-duration:过渡的时 ...

随机推荐

  1. redis-sentinel 主从复制高可用

    Redis-Sentinel Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端 ...

  2. linux系统基础优化及高级操作命令

    Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ifconfig 查询.设置网卡和 ...

  3. LeetCode328----奇偶链表

    给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1),时 ...

  4. 一次性生产KEY

    keytool -genkey -alias rebuild -keypass rebuild -keyalg RSA -keysize -validity -keystore rebuild.key ...

  5. java.sql.SQLSyntaxErrorException: ORA-01795: 列表中的最大表达式数为 1000

    后台报了一些异常日志,查阅后发现在 oracle 数据库中使用 in 关键字条件不能超过 1000 个,当时写查询语句时没有关注这个问题 总结一下解决方法 1.分多次查询,对查询要求不高的话.把入参的 ...

  6. 为什么重写了equals()，还要重写hashCode()？

    解决这个问题得先明白:hashCode 方法用于散列集合的查找,equals 方法用于判断两个对象是否相等. 第一步:具体背景(没有背景的讨论就是在耍流氓) 以HashMap中put方法为背景 第二步 ...

  7. leetcode 103二叉树的锯齿形层次遍历

    与102相比就增加了flag,用以确定要不要进行reverse操作 reverse:STL公共函数,对于一个有序容器的元素reverse ( s.begin(),s.end() )可以使得容器s的元素 ...

  8. xstream解析xml时遇到特殊字符出错

    在xml中有"&"符号时,解析xml出错 解决办法: 将&替换成&

  9. CSS二级菜单

    0.需求:当鼠标hover到按钮上时,出现下拉菜单导航条. 1.问题拆解: (1)HTML应该如何组织比较方便合理 因为题中要求下拉菜单位于按钮的正下方,可以使用列表<li>中嵌套无序列表 ...

  10. Docker环境安装部署Java应用（含安装Tomcat和JDK）

    1.部署思路 两台docker机(centos 7系统),Docker 版本:18.09.6, build 481bc77156 Docker host IP:192.168.102.135 Dock ...