css3动画联动 |添加css的方法

/* CSS3动画实现 */
/* 图片旋转动画 */
.rotate {
animation: rotate 3s linear 0s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 文字放大动画 */
.enlarge {
animation: enlarge 3s linear 0s infinite;
}
@keyframes enlarge {
0% {
font-size: 20px;
}
50% {
font-size: 30px;
}
100% {
font-size: 20px;
}
}
/* 联动实现 */
/* 图片和文字一起运动 */
.container:hover .rotate {
animation-play-state: paused;
transform: translateX(100px);
}
.container:hover .enlarge {
animation-play-state: paused;
color: red;
}

在上面的代码中，大家首先定义了两个CSS3动画效果，分别是图片旋转动画和文字放大动画。然后，大家通过设置动画的播放时间和次数，使它们在页面中不停地播放。

接着，大家利用CSS选择器和伪类来实现动画联动效果。当鼠标悬停在页面的某个元素上时，大家暂停了图片旋转动画和文字放大动画的播放，同时使它们沿着水平方向移动了100个像素，形成了一个联动效果。

总之，CSS3动画联动可以为网页增添趣味性和创意性，通过结合不同的CSS3动画效果来实现，应用场景广泛，带来的效果也非常棒。