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. Promise 的使用

    Promise 的使用,用于异步处理 ,以及解决地狱回调的: 1.  Promise 是一个构造函数,既然是构造函数,我们就可以 new Promise() 就可以得到一个 Promise 的实例 2 ...

  2. 使用SNMP监控服务器运行情况

    系统监测的基本概念及分类: a．系统监测的概述: 如何对现有IT架构的整体以及细节运行情况进行科学.系统和高效地监测是目前各企业运维和管理部门一项非常重要的工作内容.随着当前企业IT环境中服务器.应用 ...

  3. leetcode-easy-sorting and searching- 278 First Bad Version

    mycode  96.42 # The isBadVersion API is already defined for you. # @param version, an integer # @ret ...

  4. VC中MessageBox与AfxMessageBox用法与区别

    一.MessageBox()用法 1.函数原型 Messagebox函数在Win32 API和MFC里的定义有区别. Win32 API的定义如下: int WINAPI MessageBox(    ...

  5. 浏览器端-W3School-JavaScript：JavaScript 全局对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript 全局对象 1.返回顶部 1. JavaScript 全局对象 全局属性和函数可用于所有内建的 JavaScrip ...

  6. android中常用的注解说明

    1.@Nullable  作用于函数参数或者返回值,标记参数或者返回值可以为空. 2,@NonMull 作用于函数参数或者返回值,标记参数或者返回值不可以为空. 3.@LayoutRes 标记整数值a ...

  7. centos7 禁止root远程ssh直接登录

    修改/etc/ssh/sshd_config文件,将 #PermitRootLogin yes 修改为 PermitRootLogin no   查看 more /etc/ssh/sshd_confi ...

  8. Screen Painter 程序设计

    一.Screen 的创建及维护, TCode:SE51 输入程序名称,单击[建立], 程序1000为SAP预留屏幕号,屏幕号必须定义1000外的其他数字,且最多不超过四位, 本例定义屏幕为SAP预留屏 ...

  9. 我们公司的delphi代码（胆不是我写的！），看看，你觉得怎么样

    unit unt_LotBill_dyc; interface uses windows, SysUtils, Classes, ComCtrls, Forms, Controls, StrUtils ...

  10. Synchronized知道这些就可以了

    Synchronized关键字算是Java的元老级锁了,一开始它撑起了Java的同步任务,其用法简单粗暴容易上手.但是有些与它相关的知识点还是需要我们开发者去深入掌握的.比如,我们都知道通过Synch ...