HTML-复杂动画和变形
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-复杂动画和变形的更多相关文章
- Unity插件 - MeshEditor（五） 网格顶点动画（变形动画）
源码已上传至github,并持续更新,链接请看底部.(本帖跟随github持续更新) 网格顶点动画(变形动画)是针对于物体的形状可以随意变换并记录为关键帧的动画,虽然模型的顶点数据还是应该交给GPU绘 ...
- html5--6-50 动画效果-变形
html5--6-50 动画效果-变形 实例 学习要点 掌握2D变形动画 了解3D变形动画 transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.转换方 ...
- CSS过渡、动画及变形的基本属性与运用
[逆战班] 动画可以让一个元素具有动态的效果,这个过程是使元素从一种样式变成另一个样式的过程.我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式.通常设置多个节点来实现复杂的动画效果.0% ...
- CSS基础篇之背景、过渡动画
background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...
- 程序猿必备的10款web前端动画插件一
1.动画SVG框架幻灯片 在幻灯片之间切换时显示动画SVG帧的实验性幻灯片.不同的形状可以用来创建各种风格. 我们想和大家分享一个实验幻灯片.我们的想法是在从一个幻灯片转换到另一张幻灯片时,使SVG帧 ...
- Android 开发 VectorDrawable 矢量图 （三）矢量图动画
VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...
- Axiom3D:Ogre动画基本流程与骨骼动画
在Axiom中,Animation类用于管理动画,在此对象中主要管理着AnimationTrack对象,此对象用于管理动画的各种类型的每一桢.在Axiom中,动画类型主要有变形动画,姿态动画,骨骼动画 ...
- FBX BlendShape/Morph动画解析
目前fbx 2015.1中支持三种变形器:skinDeformer,blendShapeDeformer,vertexCacheDeformer.定义在fbxdeformer.h中: enum EDe ...
- HTML-简单动画
简单动画 (1)简单动画通常称之为“过渡transition” Transition-property:需要过渡的属性,但是并非所有的属性都支持过渡. Transition-duration:过渡的时 ...
随机推荐
- 如何求ArrayList集合的交集 并集 差集 去重复并集
需要用到List接口中定义的几个方法: addAll(Collection<? extends E> c) :按指定集合的Iterator返回的顺序将指定集合中的所有元素追加到此列表的末尾 ...
- MariaDB 默认是禁止远程访问的 我们改掉它
查询用户账号信息: select User, host from mysql.user; 现在只显示 root账户中的host项是localhost表示该账号只能进行本地登录,我们需要修改权限,输入 ...
- String、toString、String.valueOf()三个有啥区别？
今天在使用这个的时候发现,他们三者好像在某些场所都是可以用的,但是不免会让人想到那既然它们三者这么的相似,那么总有些什么区别吧.我也在网上找了一些资料看.自己也看了API文档,就将他们三的区别总结一下 ...
- python3笔记十一：python数据类型-List列表
一:学习内容 列表概念 列表创建:创建空列表.创建带有元素的列表 列表访问:取值 列表修改:替换元素.追加元素.追加列表.插入元素 列表删除:移除列表中指定下标处的元素.移除匹配条件的第一个元素.移除 ...
- 石川es6课程---3、变量let和常量const
石川es6课程---3.变量let和常量const 一.总结 一句话总结: let非常好用,尤其是let的块级作用域可以解决之前要(function(){})()立刻执行函数做的块级作用域 1.js中 ...
- dnSpy
https://github.com/0xd4d/dnSpy 下载压缩包之后,解压,发现目录里面有3个exe文件 需要用管理员运行dnSpy.exe,然后打开exe文件,设置好断点,然后start 使 ...
- note：memcache 調試遇到的一些問題
1. gdb調試時提示:<value optimized out> ,原因是memcache的編譯选项做了优化,修改configure中CFLAGS中的-O3为-O0,可以解决gdb调试过 ...
- C++抽象类实践
实践如下: #include <iostream> using namespace std; class Service { public: // 有一个虚函数即为抽象类 int id; ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- hud 5750 Dertouzos
Dertouzos Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...