css在鼠标触碰卡片之后,卡片的背景颜色 以 饼图进度条 的动画形式来改变颜色
时间: 2024-03-01 17:42:47 浏览: 22
可以使用CSS的transition和transform属性来实现饼图进度条的动画效果。具体实现步骤如下:
1. 首先定义卡片的基础样式,包括背景颜色和圆角等。
```css
.card {
background-color: #fff;
border-radius: 10px;
}
```
2. 定义鼠标悬浮时的样式,包括背景颜色和过渡效果等。
```css
.card:hover {
background-color: #ffcc00;
transition: background-color 0.3s ease-in-out;
}
```
3. 使用伪类元素:before和:after来创建饼图进度条的效果。
```css
.card:hover:before,
.card:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
transform-origin: 100% 50%;
border-radius: 10px;
}
.card:hover:before {
z-index: 1;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
}
.card:hover:after {
z-index: 2;
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
```
4. 在:before和:after的样式中,使用transform属性来实现旋转效果。同时,使用z-index属性将:before放在:after的前面,以便在旋转时可以看到饼图进度条的动画效果。
完整的代码如下:
```css
.card {
background-color: #fff;
border-radius: 10px;
position: relative;
width: 200px;
height: 150px;
}
.card:hover {
background-color: #ffcc00;
transition: background-color 0.3s ease-in-out;
}
.card:hover:before,
.card:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
transform-origin: 100% 50%;
border-radius: 10px;
}
.card:hover:before {
z-index: 1;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
}
.card:hover:after {
z-index: 2;
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
```
效果如下图所示:
![饼图进度条动画效果](https://img-blog.csdnimg.cn/20210923160322592.gif)