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. TCP定时器 之 连接建立定时器

    当服务器收到新的syn请求,会回复syn+ack给请求端,若某时间内未收到请求端回复的ack,新建连接定时器超时执行回调,重传syn+ack,当超时超过固定次数时,该连接中止:本文主要分析其初始化流程 ...

  2. npm安装 syscall access

    npm WARN deprecated bower@1.8.4: We don't recommend using Bower for new projects. Please consider Ya ...

  3. moment 时间格式化

    使用方法: 引入 moment 的包 moment(要处理的时间).format(时间的格式): vue 的过滤器为例: str 代表要处理的时间  orf 代表 时间的格式

  4. vuex 的介绍

    vue-cli 中 css 的作用域 scoped vue 数据的为响应数据,一改全改,一变全变的特性,我们的很多处理也会围绕着他 vuex 是处理数据的,是 vue 的数据仓库 vuex 的作用:采 ...

  5. 如何在DELL R420上部署EXSI虚拟化(服务器上的安装）

    <VMware ESXi>是一款虚拟化软件.软件支持windows平台客户端界面管理,客户端界面与正常使用的虚拟机WMware Workstation界面功能类似VMware ESXI 服 ...

  6. c++使用openssl操作秘钥相关

    PEM_write_bio_RSAPublicKey(pub, keypair);//生成-----BEGIN RSA PUBLIC KEY-----类型的公钥 PEM_write_bio_RSA_P ...

  7. wordpress 更新时需要FTP 服务器账户密码的解决方法

    首先进入 apache下的wordpress 的目录下 (这是apache服务器默认安装的路径) cd /var/www 接着,给html整个文件夹进行赋值权限,如果不赋予权限 更新的时候会报权限不足 ...

  8. okgo网络请求框架的实现

    第一步:添加依赖: implementation 'com.lzy.net:okgo:3.0.4' implementation 'com.lzy.net:okrx2:2.0.2' implement ...

  9. Python基本语法_函数属性 & 参数类型 & 偏函数的应用

    目录 目录 前言 软件环境 Python Module的程序入口 函数的属性 Python函数的创建 函数的参数 必备参数 缺省参数 命名参数 不定长参数 匿名参数 偏函数的应用 前言 Python除 ...

  10. 阶段3 2.Spring_07.银行转账案例_1 今日课程内容介绍

    1.完善我们的account案例 2.分析案例中问题 3.回顾之前讲过的一个技术:动态代理 4.动态代理另一种实现方式 5.解决案例中的问题 6.AOP的概念 7.spring中的AOP相关术语 8. ...