对于css3不得不提的就是css3的动画了
大致分为3大块
transform(变化),transition(过度),animate(动画)
transform变化主要是位置的移动translate(向右移动距离,像下移动距离),scale缩放,rotate旋转顺时针
2d变化如下:
transform: translate(100px,100px) scale(0.8) rotate(45deg);
3d变化:
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
transition过度主要是实现一些从开始到最终状态的状态的过度(有原路返回的效果,不会因为去掉样式后直接立即回到之前的状态)
代码如下
.box{
height: 100px;
width: 100px;
border: 1px solid black;
transition: width 3s, height 3s, transform 3s;
}
意思是宽度、高度、transform变化的变化的过程时间为3秒。具体的样式我这里是通过hover状态加上去的(也可以定义样式名然后通过js动态触发来添加)
.box:hover{
width: 300px;
transform: translate(100px,100px) scale(0.5) rotate(45deg);
}
animate动画这个要结合@keyframes来实现
先定义好@keyframes
@keyframes move {
from{
background: white;
}
to{
background: green;
}
}
@keyframes move1 {
0%{
background: red;
}
25%{
background: green;
}
50%{
background: yellow;
}
75%{
background: black;
}
100%{
background: red;
}
}
通过animate来调用
animation: move1 3s infinite;//这里的意思是引用move1这个动画,过程是3秒,infinite是让这个无限循环下去
animation可以直接添加也可以写在样式中然后引入


被折叠的 条评论
为什么被折叠?



