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. git多人参与的项目 -> 分支代码如何合并到主干

    个人理解:合并分支时候就是当前分支,与别的分支先合并一遍,然后解决分支中存在的所有冲突,之后将本地分支代码提交到git远程仓库,之后切换主干分支 ,将主干分支与分支内容合并,解决冲突, 在提交主干分支 ...

  2. hibernate entitymanager的理解

    hibernate EntityManager是围绕提供JPA编程接口的Hibernate Core的一个包装,支持JPA实体实例的生命周期,并允许你用标准的JavaPersistence查询语言编写 ...

  3. python3笔记六：for语句

    一:学习内容 for语句 二:for-in语句 1. 格式 for 变量名 in 集合:    语句 2.逻辑 按顺序取集合中的每个元素赋值给变量,再去执行语句,如此循环往复 3.举例 for i i ...

  4. jQuery file upload 服务端返回数据格式

    Using jQuery File Upload (UI version) with a custom server-side upload handler 正常的返回结果,即上传文件成功 Exten ...

  5. [论文理解] Receptive Field Block Net for Accurate and Fast Object Detection

    Receptive Field Block Net for Accurate and Fast Object Detection 简介 本文在SSD基础上提出了RFB Module,利用神经科学的先验 ...

  6. leetcode-easy-math-326. Power of Three

    mycode class Solution(object): def isPowerOfThree(self, n): """ :type n: int :rtype: ...

  7. vscode + php+ftp

    首先,php网站的文件都整理到一个文件夹中: 然后,用vscode的File.Open Folder打开刚才的文件夹: 3,Ctrl+Shift+P,输入SFTP:Config,会打开一个配置文件,编 ...

  8. Checkbox 多选框

    Checkbox 多选框 一组备选项中进行多选 ¶基础用法 单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍. 在el-checkbox元素中定义v-model绑 ...

  9. 打开VMware提示该虚拟机似乎正在使用中该怎么办？

    一,当出现虚拟机无法使用时 解决办法: 1,找到虚拟机安装路径. 2,然后,将后缀为.lck的文件夹删除 二,VMware虚拟机配置文件(.vmx)损坏修复 1,找到后缀vmx的文件,记事本打开: 2 ...

  10. JS对象—数组总结(创建、属性、方法)

    JS对象—数组总结(创建.属性.方法) 1.创建字符串 1.1 new Array() var arr1 = new Array(); var arr2 = new Array(6); 数组的长度为6 ...