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 Cluster with SpringBoot

    前提: 按照 https://www.cnblogs.com/luffystory/p/12081074.html 配置好Redis Cluster in Ubuntu 按照如下结构搭建项目结构: P ...

  2. async/await 真不是你想象中那么简单

    先上代码 公共代码 function getData(data, time) { return new Promise(function (resolve, reject) { setTimeout( ...

  3. 套接字之close系统调用

    close系统调用用于关闭文件描述符,其系统调用实现如下所示: / * Careful here! We test whether the file pointer is NULL before * ...

  4. python3笔记六：for语句

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

  5. LeetCode 16. 最接近的三数之和（3Sum Closest）

    题目描述 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例 ...

  6. C#文件压缩：ICSharpCode.SharpZipLib生成zip、tar、tar.gz

    原文地址:https://blog.csdn.net/nihao198503/article/details/9204115 将代码原封不动的copy过来,只是因为有关tar的文章太少,大多都是zip ...

  7. Postman下载与安装

    融e学-一个专注于重构知识,培养复合型人才的平台:http://www.i-ronge.com/ Postman 的官网下载地址是:https://www.getpostman.com/ 下载后看到压 ...

  8. const变量的修改实践

    https://bbs.csdn.net/topics/110049293 #include <iostream> using namespace std; int main(){ cou ...

  9. 谈谈 Android 的优点和不足之处?

    优点:1.开放性,开源,免费,可定制2.挣脱运营商束缚3.丰富的硬件选择4.不受任何限制的开发商5.无缝结合的 Google 应用缺点:1.安全问题.隐私问题2.同质化严重3.运营商对 Android ...

  10. MVC1:.Net MVC Cotroller向View传值

    下面介绍 ASP .Net MVC中 Cotroller 向 View 传值 的4中方式: ViewBag,ViewData,TempData,Model. (注:参数可根据需要为复杂类型,只需在应用 ...