css怎么设置动态样式 |css代码自动整理

1.使用transition属性

.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s, height 1s;
}
.box:hover {
width: 200px;
height: 200px;
}

这里定义了一个名为box的DIV，当鼠标悬浮在DIV上时，它的宽高会从100px变为200px，同时会有一个1秒钟的动画效果。这是通过设置transition属性来实现的，它可以指定在哪些CSS属性值发生改变时触发动画效果，以及动画持续的时间。

2.使用@keyframes规则

.box {
width: 100px;
height: 100px;
background-color: blue;
animation: mymove 2s infinite;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

这里同样定义了一个名为box的DIV，但是大家通过@keyframes规则来定义了一个名为mymove的动画，动画中的元素从top:0px到top:200px的位置移动，并且动画持续时间为2秒钟，无限循环。最后通过animation属性将动画应用到DIV上。

总之，这两种方法都可以帮助大家为网页添加各种动态效果，让大家的页面更加生动有趣。