css中的交互

CSS中的交互主要指的是鼠标悬停、点击等事件触发的样式变化。常见的交互效果有：鼠标悬停时改变颜色、点击时添加阴影、弹出菜单等。

CSS实现交互的方法有以下几种：

1. :hover伪类选择器：当鼠标悬停在元素上时触发。例如：

a:hover {
    color: #ff0000;
}

2. :active伪类选择器：当元素被激活（即鼠标按下但还未释放）时触发。例如：

button:active {
    box-shadow: 0 0 10px #ccc;
}

3. :focus伪类选择器：当元素获得焦点时触发。例如：

input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 10px #007bff;
}

4. transition属性：用于设置元素的过渡效果，可以实现平滑的动画效果。例如：

button {
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

5. transform属性：用于对元素进行旋转、缩放等变换。例如：

img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.2);
}

这些方法可以结合使用，实现更复杂的交互效果。例如，可以使用:hover和transition属性实现菜单的弹出效果，使用:focus和outline属性实现表单元素的焦点提示效果等。