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:过渡的时 ...
随机推荐
- HBuilder搭建Android模拟器
HBuilder搭建Android模拟器 //来源: https://www.cnblogs.com/bjxingch/articles/6657938.html 1.下载夜神Android模拟 ...
- 快速排序和二分查找(Java)
import java.util.Arrays; public class Main { public static void main(String[] args) { int[] data = { ...
- legend3---lavarel常用artisan命令操作
legend3---lavarel常用artisan命令操作 一.总结 一句话总结: 帮助:php artisan可以调出帮助命令 1.npm安装后盾js? npm install hdjs node ...
- EC
- 浏览器端-W3School-Browser：Window 对象
ylbtech-浏览器端-W3School-Browser:Window 对象 1.返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架 ...
- Kotlin之环境的配置和搭建
第一步 . 安装和配置JDK http://www.cnblogs.com/loaderman/p/6402948.html 第二步 安装和下载Kotlin 进入Kotlin官网 :https :// ...
- Nova 启动虚拟机流程解析
目录 文章目录 目录 前言 从请求说起 nova-api service 阶段 前言 Nova 启动虚拟机的东西太多,持续更新- 从请求说起 无论是通过 Dashboard 还是 CLI 启动一个虚拟 ...
- self-training and co-training
半指导学习(Semi-supervised Learning)的概念说起来一点儿也不复杂,即从同时含有标注数据和未标注数据的训练集中学习模型.半指导学习是介于有指导学习与无指导学习之间的一种机器学习方 ...
- flex label如何通过AS3实现颜色设置
如果你想修改label的颜色,你可以在控件上面直接设置color属性,但是有这样一个情况,有些label的颜色是动态设置的,没办法一开始初始化的时候设置 这个时候就需要在AS当中动态的设置,直接.se ...
- Vue+Python 电商实战
安装webStorm https://blog.csdn.net/qq_38845858/article/details/89850737 安装NodeJs http://nodejs.cn/do ...