一、变形
CSS3变形是一些效果的聚拢文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
如平移、旋转、缩放、歪斜效果文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
每一个效果均可以称为变形（transform），它们可以分别操控元素产生平移、旋转、缩放、歪斜等变化文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
语法：transform:[transform-function] *;文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
变形函数文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
translate：平移函数，基于X、Y坐标从新定位元素的位置文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
transform:translate x轴移动文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
transform:translate y轴移动文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
scale：缩放函数，可使任意元素对象尺寸产生变化文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
transform:scale 设置X轴的缩放文章源自微观生活（93wg.com）微观生活-https://93wg.com/8991.html
transform:scale 设置Y轴的缩放
rotate：旋转函数，取值是一个度数值
transform:rotate;
skew：歪斜函数，取值是一个度数值
transform:skewX（ax）：表示只设置X轴的歪斜
transform:skewY（ay）：表示只设置Y轴的歪斜
注：rotate函数只是旋转，而不会扭转元素的形状
skew函数是歪斜，元素不会旋转，会扭转元素的形状
二、过度
transition出现的是一种过渡，是一种动画转换的进程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
语法：transition:[transition-property transition-duration transition-timing-function transition-delay ]
过渡属性（ transition-property ）
定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支撑transition-property属性的样式，通常是了利便都会使用all
过渡所需的时间（ transition-duration ）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
过渡动画函数（ transition-timing-function ）
指定阅读器的过渡速度，和过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默许值）
linear：速度恒速（匀速运动）
ease-in：速度愈来愈快（渐显效果）
ease-out：速度愈来愈慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当扭转元素属性值后多长期去执行过渡效果
正值：元素过渡效果不会当即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，以前的动作被截断
0：默许值，元素过渡效果当即执行
三、animation动画简介
animation实现动画主要由两个部份组成
通过相似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更加繁杂的动画效果
设置关键贞：
@keyframes spread {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
调用关键贞：
animation:animation-name animation–duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-mode;
动画的使用进程：
动画的播放次数（animation-iteration-count）
值一般是整数，默许值为1
特殊值infinite，表示动画无穷次播放
动画的播放方向（animation-direction）
normal，动画每一次都是循环向前播放
alternate，动画播放为偶数次则向前播放
动画的播放状况（animation-play-state）
running将暂停的动画从新播放
paused将正在播放的元素动画停下来
代码展现：
<html>
<head>
<title>照片墙</title>
</head>
<link rel=&34; href=&34;>
<body>
<div class=&34;>
<div class=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
<img src=&34;>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* 父div设置宽高 */
.box{
width: 80%;
height: 600px;
margin: 0px auto;
margin-top: 10px;
position: relative;
}
/* 所有的图片设置 */
.box>img{
width: 300px;
height: 250px;
position: absolute;
border: 1px solid white;
box-shadow:5px 5px 5px rgba;
border-radius: 20px;
}
/* 第一张图片设置 */
.box>img:nth-of-type {
right: 2;
top: 0px;
transform: rotate;
}
.box>img:nth-of-type{
left: 2px;
top: 10px;
transform: rotate;
}
.box>img:nth-of-type{
left: 500px;
top: 40px;
transform: rotate;
}
.box>img:nth-of-type{
left:250px;
top:40px;
transform: rotate;
}
.box>img:nth-of-type{
top:300px;
transform: rotate;
}
.box>img:nth-of-type{
left:700px;
top:300px;
transform: rotate;
}
.box>img:nth-of-type{
left: 310px;
top: 300px;
transform: rotate;
}
.box>img:nth-of-type{
left: 460px;
top: 300px;
transform: rotate;
}
.box>img:nth-of-type{
left: 100px;
top: 210px;
transform: rotate;
}
.box>img:nth-of-type{
right:100px;
top:300px;
transform: rotate;
}
.box>img:hover{
/* 图片前置 */
z-index: 1;
/* 还原放大1.5倍 */
transform: rotate scale;
transition:all 1s ease-in-out;
}
<!DOCTYPE html>
<html lang=&34;>
<head>
<meta charset=&34;>
<meta http-equiv=&34; content=&34;>
<meta name=&34; content=&34;>
<title>QQ彩贝导航条</title>
</head>
<link rel=&34; href=&34;>
<body>
<div class=&34;>
<nav>
<section>
<div class=&34;>
<h1>
<a href=&&34;img/logo_170x46.png&34;topMiddle&34;34;><span class=&34;></span>返回商场 | </a></li>
<li><a href=&&34;34;><span class=&34;></span>积分商场 | </a></li>
<li><a href=&&34;34;>了解彩贝 | </a></li>
<li><a href=&&34;34;>个人中心</a></li>
</ul>
</div>
<div class=&34;>
<ul>
<li><a href=&&34;34;></a></li>
<li><a href=&&787690;
}
/* 整个导航 */
nav{
height: 100px;
width: 100%;
margin: 0 auto;
position: relative;
background: linear-gradient);
}
/* 导航Logo部份 */
.topleft{
padding-top: 30px;
padding-left: 110px;
}
/* 中间总体部份 */
.topMiddle{
position: absolute;
left: 400px;
bottom: 20px;
height: 50px;
}
/* 导航中间文字 */
.topMiddle>ul>li{
float: left;
margin-right: 20px;
padding-top: 20px;
}
.topMiddle>ul>li>a:hover{
color:yellow;
}
/* 导航中间文字部份第一个li */
.iconOne{
display: inline-block;
position: absolute;
width: 46px;
height: 100px;
left: 0;
top:0;
background: url 2px 1px no-repeat;
}/* 导航中间文字部份第三个li */
.iconTwo{
display: inline-block;
position: absolute;
width: 46px;
height: 100px;
top:0;
background: url 2px 1px no-repeat;
}
/* 调用关键贞 */
.topMiddle>ul>li:nth-child>a:hover .iconOne{
background: url 2px 1px no-repeat;
animation: identifier 1s ease-out both;
}
/* 调用关键贞 */
.topMiddle>ul>li:nth-child>a:hover .iconTwo{
background: url 2px 1px no-repeat;
animation: identifier 1s ease-out both;
}
/* topRight */
/* 登录部份所有li */
.topRight{
position: absolute;
left: 1380px;
bottom: 55px;
height: 40px;
}
.topRight>ul>li{
height: 25px;
width: 30px;
}
/* 登录部份三个图标 */
.topRight>ul>li:nth-child{
position: absolute;
right: 100px;
top:45px;
background: url 2px 1px no-repeat;
}
.topRight>ul>li:nth-child{
position: absolute;
right: 150px;
top:45px;
background: url 2px 1px no-repeat;
}
.topRight>ul>li:nth-child{
position: absolute;
right:200px;
top:45px;
background: url 2px 1px no-repeat;
}
.topRight>ul>li:hover{
/* 变形 */
transform: rotate scale;
/* 过度 */
transition:all 0.6s ease-in-out ;
}
/* 动画设置关键帧名称identifier */
@keyframes identifier {
0%{width: 0;}
33%{width:23px;}
66%{width: 46px;}
100%{width: 69px;}
}
效果链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html
file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html
以上就是微观生活（93wg.com）关于“css3制作动画-第九章”的详细内容，希望对大家有所帮助！
评论