开始截图:
该网页中有两个圆形div,第一个的动画是类似于呼吸的动画(用transform:scale(deg)实现);第二个是在运动的过程中同时改变颜色以及div的border-radius;动画是通绑定Click按钮来切换对应的类的。(需导入jquery)
运行过程截图如下:
核心代码:
@-webkit-keyframes roll {
from{
}
0% {
background-color: lightyellow;
left: 50px;
-webkit-transform:rotate(30deg);
-webkit-border-radius:5px ;
}
25% {
background-color: yellow;
-webkit-transform:rotate(70deg);
-webkit-border-radius:15px ;
left: 100px;
}
50% {
background-color: deepskyblue;
-webkit-transform:rotate(120deg);
-webkit-border-radius:25px ;
left: 150px;
}
75% {
background-color: blue;
-webkit-transform:rotate(180deg);
-webkit-border-radius:35px ;
left: 220px;
}
100% {
background-color: mediumaquamarine;
-webkit-transform:rotate(360deg);
-webkit-border-radius:50px ;
left:300px;
}
to {
left: 300px;
}
}
.roll {
-webkit-animation:"roll" 2s linear 0s normal infinite;
}
@-webkit-keyframes scale{
0% {
-webkit-transform:scale(1.05);
}
25%{
-webkit-transform:scale(1.12);
}
50%{
-webkit-transform:scale(1);
}
75% {
-webkit-transform:scale(1.05);
}
100%{
-webkit-transform:scale(1.12);
}
}
.scale {
-webkit-animation:scale 3s linear 0s alternate infinite;
}
此次测试是在chrome下完成的。如果要在其他浏览器上运行请针对各浏览器定义@KeyFrame 以及animation。