前端攻城狮---css3动画属性
因为知识点都需要循循渐进,故css3的一些3D特效、伸缩布局等放此处讲解
transform属性
我们可以通过transform去设置2D 3D动画,当然也需要配合transition,不然呈现过渡的效果。
平移
我们来看看几种写法
- transform:translate(200px,200px); 表示X轴上平移200px,Y轴上平移200px
- transform:translateX(20px) 表示X轴上平移20px
- transform:translateY(20px) 表示Y轴上平移20px
- transform:translateZ(20px) 表示Z轴上平移20px
- transform:translate3d(20px,20px,20px)
翻转
同样的我们来了解一下几种写法及对应的效果(deg表示度数)
- transform:rotate(90deg) 表示平面水平旋转90°
- transform:rotateX(90deg) 表示沿着X轴旋转90°
- transform:rotateY(90deg) 表示沿着Y轴旋转90°
- transform:rotateZ(90deg) 表示沿着Z轴旋转90°
缩放
- transform:scale(x,y) /scale(x)=scale(x,x)
- transform:scaleX(x)
- transform:scaleY(y)
x表示水平,y表示竖直方向的缩放,0-1表示缩小,大于1表示方法,等于1不变
下面是demo
因为简单直接上源代码吧
<title>Document</title>
<style>
div {
width: 260px;
height: 180px;
border: 1px solid #ccc;
margin: 180px auto;
position: relative;
}
div img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.6s;
transform-origin: right top;
}
/*鼠标放到div上 每个图片都旋转一定的角度*/
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(1) {
transform: rotate(60deg);
}
</style>
</head>
<body>
<div>
<img src="img/6.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>
利用translate让视图居中
很多时候,我们不知道视图的高度,那么就没法使用top+marginTop的方式去居中,但是我们可以使用translateY的方式具体如下
top:50%;
transform:translateY(-50%)因为translateY的百分比参照的是自身的高度,所以我们可以使用translateY去替代marginTop
两面翻转
这里的两面翻转指的是正面一张图片,翻转到背面也是一张图片先来看看效果图吧
让我们先来了解一下两个属性
backface-visibility:hidden
transform-style:preserve-3d
第一个属性表示:当选择的时候,如果不是正面对准屏幕则会隐藏。也就是说当旋转超过90°则会隐藏。
第二个属相表示:保留该视图空间的大小,不随3d动画变化而变化。怎么理解,当视图旋转到了90°,是不是就变成了一条线,那么所占的空间就变小了,就是为了防止该情况。
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div img:nth-child(1) {
z-index: 1;
/*当不是正面对向屏幕 隐藏*/
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden;
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/qian.svg" alt="">//前面的图片
<img src="img/hou.svg" alt="">//后面的图片
</div>
</body>
css3自定义动画
到目前为止,我们通过样式去设置动画,都是通过transition的过渡动画来实现,且动画效果有限,无法实现组合效果,那么现在我们来学习一下css3的自定义动画,可以解决该问题。
@keyframes
@keyframes 该标签表示自定义动画的样式。具体使用如下
1:@keyframes move{//move表示样式名字
from{ }// from表示动画起始值
to{ }//to 表示终止的值
}
2:@keyframes run{//run表示样式名字
0%{ }
25%{ }
50%{ }
75%{ }
100%{ }
}//上面的百分比都是相对总的动画时间,可以理解为多断动画 0%-25% 25%-50% 50%-75% 75%-100%
有了动画的样式,还需要条用该样式,这时候就需要用到animation
animation
基本参数如下 animation:run 2s ease 0s infinite alternate
动画名称/动画执行时间/动画速率/动画延迟时间/无限次数/是否反方向
那么接下来我们将两者结合使用
<style>
div {
width: 120px;
height: 120px;
margin-bottom: 20px;
background: skyblue;
/*perspective: */
}
div:nth-child(1) {
/*让div执行动画*/
/*动画名称 动画时间 运动曲线 何时开始 无限次数 是否反方向*/
animation: move 2s ease 0s infinite alternate;
}
div:nth-child(2) {
animation: run 4s infinite;
}
/* 定义动画 */
@keyframes move{
from {
transform: translate(0)
}
to {
transform: translate(300px)
}
}
/*定义第二个盒子动画*/
@keyframes run {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(600px,0,0);
}
50% {
transform: translate3d(600px,300px,0);
}
75% {
transform: translate3d(0,300px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
同样的我们开可以使用animation实现无缝滚动,不需要js。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div ul {
width: 200%;
list-style: none;
animation: move 4s linear infinite;
}
div {
width: 504px;
height: 86px;
margin: 200px auto;
border: 1px solid pink;
overflow: hidden;
}
div:hover ul {
animation-play-state: paused;
}
ul li {
float: left;
}
@keyframes move {
from {
transform: translate(0)
}
to {
transform: translate(-504px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/nav1.jpg" alt=""></li>
<li><img src="img/nav2.jpg" alt=""></li>
<li><img src="img/nav3.jpg" alt=""></li>
<li><img src="img/nav4.jpg" alt=""></li>
<li><img src="img/nav1.jpg" alt=""></li>
<li><img src="img/nav2.jpg" alt=""></li>
<li><img src="img/nav3.jpg" alt=""></li>
<li><img src="img/nav4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
animation-play-state: paused; 暂停动画,配合hover使用,当鼠标在其上面则动画暂停。
css3动画属性的相关知识点已经讲解完毕,后面会讲解css3的一些布局如弹性盒子模型等,若表达有误请指出,望共同进步。
上一篇: HTML文档流&CSS中元素的浮动
下一篇: 为什么你的网站制作预算会超支