css 样式 创建 动态 |标签内写css样式表

在CSS中，样式可以通过选择器来定义。选择器可以基于元素的类型、类名、ID、属性等等。例如，下面的CSS代码通过类选择器定义了一个红色背景和白色文字的样式：

.my-class {
background-color: red;
color: white;
}

除了基本样式，CSS也支持创建动态效果，如动画和过渡效果。这些效果可以通过CSS3中的动画和过渡属性来实现。

动画是一种可以连续改变CSS属性的效果。可以使用关键帧（@keyframes）来定义动画的每个阶段。例如，下面的CSS代码定义了一个旋转动画：

.rotate {
animation: rotate 2s infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

这个动画会将.rotate类的元素逆时针旋转360度，持续2秒，并无限循环。

过渡效果是一种可以在元素发生改变时平滑地从一个样式转换到另一个样式的效果。可以使用transition属性来定义元素从什么样式到什么样式的转变。例如，下面的CSS代码定义了一个背景色在鼠标悬停时平滑过渡的效果：

.button {
background-color: blue;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: green;
}

这个效果会使.button类的元素在鼠标悬停时背景色从蓝色平滑转变为绿色，持续0.5秒，并带有渐变效果。

总之，CSS是一种非常强大的样式语言，它可以让大家轻松地控制网页的外观和交互效果。无论是基本样式还是动态效果，精通CSS都是Web开发人员所必须的技能之一。