之前我基本都没用过动画,一般都用canvas做一些画图之类的。在前几次的vilin开发中,有过几个动画效果的需求,于是我学习了一下css的动画,这里简单记录一下。
css动画的特点就是简单,通过 css3创建的动画可以取代动画图片、Flash以及 JS等。
常见CSS动画效果
动画顾名思义可以动的图画,而这个“动”指的就是我们常见的图像变换:平移、旋转、放大、缩小,另外还包括颜色的变化:颜色加深变浅等。CSS里主要通过animation来实现元素的动画。
图像变换
用style里的transform属性来实现图像变换,然后通过animation属性来使元素动起来。
- 1、平移:translate(x, y); //x和y分别是平移的横纵分量,x>0时向右平移,y>0时向下平移;
(1)translateX(x):沿x轴平移;
(2)translateY(y): 沿y轴平移;
- 2、放缩:scale(x); //x是放缩的倍数,例如10为放大为原来的10倍,0.1为缩小为原来的0.1;
一个参数时:表示水平和垂直同时缩放该倍率
两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。
- 3、旋转: rotate(x deg); //x表示顺时针旋转的度数;
- 4、倾斜:skew(x deg); //x表示倾斜的度数;
(1)skewX(x):使元素在水平方向倾斜(X轴倾斜);
(2)skewY(y):使元素在垂直方向倾斜(Y轴倾斜);
(3)skew(x,y):使元素在水平方向和垂直方向同时倾斜(X轴和Y轴同时倾斜);
颜色变化
直接通过color(或者background等)和opacity属性就可以控制颜色变化了。
用transition直接实现动画
以下代码使class为ani-test的元素在hover时向右平移500px,向下平移300px,缩小为原来的0.3,并旋转45度,同时背景变为绿色。关于transition的具体使用可以看看这儿:https://www.w3school.com.cn/css3/css3_transition.asp。
.ani-test {
transition: all 1s;
}
.ani-test:hover {
background: green ;
transform: translate(500px, 300px) scale(0.3) rotate(45deg);
}
用@keyframes 规则实现动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。keyframe顾名思义关键帧,就是注明关键帧的信息,例如下例中的0%、25%就是指动画运行到0%、25%时元素的部分style属性。将下例实验一下就很容易理解了,我就不再赘述了。
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
具体实践
云视讯官网 首页通知。在这个需求里我用css加js完成了动画效果,最后用scalajs去间接使用moveNotice这个函数。
CSS部分代码:
@keyframes disappear
{
from { background: rgba(0, 0, 0, 0.7);}
to { background: transparent;}
}
@-ms-keyframes disappear
{
from { background: rgba(0, 0, 0, 0.7);}
to { background: transparent;}
}
@-webkit-keyframes disappear /* Safari and Chrome */
{
from { background: rgba(0, 0, 0, 0.7);}
to { background: transparent;}
}
@keyframes appear
{
from {background: transparent;}
to {background: rgba(0, 0, 0, 0.7); }
}
@-ms-keyframes appear
{
from {background: transparent;}
to {background: rgba(0, 0, 0, 0.7); }
}
@-webkit-keyframes appear /* Safari and Chrome */
{
from {background: transparent;}
to {background: rgba(0, 0, 0, 0.7); }
}
js部分代码:
function movNotice(flag) {
var n = document.getElementById("notice-dialog");
var w = document.getElementById("warn");
var d = document.getElementById("notice-div");
if (n != null && w != null) {
if(flag) {
offx = d.offsetLeft-n.offsetLeft-n.offsetWidth/2;
offy = d.offsetTop-n.offsetTop-n.offsetHeight/2;
n.style.transition = "all .5s";
n.style.transform = "translate("+offx+"px,"+offy+"px) scale(0.1)";
w.style.animation = "disappear 0.5s";
w.style.webkitAnimation = "disappear 0.5s";
setTimeout(function(){w.style.display = "none";},500);
}
else {
w.style.animation = "appear 0.2s ";
w.style.webkitAnimation = "appear 0.2s ";
n.style.transform = "translateX(-50%) translateY(-50%)";
w.style.display = "block";
}
}
}
scalajs引用:
转载请注明本文url,引用请注明出处,谢谢支持!!!
参考:
- w3cschool:https://www.w3school.com.cn/css3/css3_animation.asp
- Html基本的动画效果(平移,旋转):https://www.cnblogs.com/259751j/p/7841174.html
- 倾斜skew()方法: http://www.lvyestudy.com/css3/css3_9.5.aspx