css3动画实例

来源：互联网发布：淘宝原单尾货是正品吗编辑：程序博客网时间：2024/06/04 19:15

开始截图：

该网页中有两个圆形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。

0 0