css动效学习

我很喜欢动态效果啊！在慕课网上看见一个css的动效教程，视频不是很清楚，但是有源码，就开始研究啦！自己喜欢的东西，写起来就特别开心！坚持下去！之前看css的知识点，就只看看，没有练习，很快就忘记啦。而且看得很枯燥，应该一边看一般找例子，做做！鼠标悬浮动效果:hover

总结：transform定义了元素的变形，transition定义了元素的属性变化样式，animation与@keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程，k帧）

练习1：用css的transition属性控制opacity和transform:translate(x,y)，实现位移和淡入淡出效果。

img{

opacity:0;

transform:translate(-100px,-100px);

transition:opacity 5s ease-in-out 0.5s,transform 5s ease-in-out ;

}

img:hover{

opacity:1;

transform:translate(0,0);

}

只要对img{}设置动画的属性。transform: property duration timing-function delay



练习2：transition + transform:rotate((度数)deg)/transform：translate（x,y）/transform:scale() + transform-origin(设置中心点位置)

练习3：照片的渐隐和旋转/放大动画 animation: 动画名（自己取名） duration timing-function delay 次数

img{

border-radius:100%;

animation: happy 1.0s ease-in-out infinite;

}

@keyframes happy {

from{transform:rotate(0deg);}

to{transform:rotate(360deg);opacity:0;}

} /*k帧啦，关键帧，from相当于0，to 100% */

练习4 load动画 animation-delay 错开执行的时间

.spinner .line1{

background-color:red;

}

.spinner .line2{

animation-delay:-0.9s;

background-color:orange;

}

@keyframes load{

0% ,50%,100%{

transform:scaleY(0.4);

}

20%{

transform:scaleY(1.0);

}

}/*不同部分的k帧*/






还是挺好玩的！

练习5 交互动态圆圈， border-radius:100% 让正方形变成圆圈





.circle{

height:250px;

width:250px;

border-radius:100%;

margin:50px auto;

background-color:#8BDBFA;

border:20px #9EE944 solid;

border-right-color:pink;

border-bottom-color:pink;

transition:transform 1s linear;

}

.circle:hover{

transform:rotate(180deg);

}



好啦，总结完毕！作为渣渣的我研究github去啦！早日上传链接，可以观看效果的链接啊啊啊啊！