写一个新拟态风格的css进度条 包括前端
时间: 2024-05-05 17:15:22 浏览: 26
HTML结构:
```
<div class="progress-bar">
<div class="progress"></div>
</div>
```
CSS样式:
```
.progress-bar {
width: 100%;
height: 10px;
background-color: #f1f1f1;
border-radius: 5px;
overflow: hidden;
}
.progress {
width: 50%;
height: 100%;
background-color: #ff7f50;
border-radius: 5px;
transition: width 0.5s ease-in-out;
}
```
说明:
我们首先创建了一个进度条的容器,它的宽度为100%,高度为10px,背景颜色为#f1f1f1,边框半径为5px,同时我们将overflow属性设置为hidden,这样 progress 容器的宽度超过了 progress-bar 的宽度时就会被隐藏。
然后我们创建了一个 progress 容器,它的宽度设置为50%(这里可以根据实际需要设置),高度为100%,背景颜色为#ff7f50,边框半径也为5px,同时添加了一个过渡效果,使得进度条的变化更加平滑。
最后我们只需要通过 JavaScript 控制 progress 容器的宽度即可实现进度条的效果。
相关问题
写一个新拟态风格的css进度条
/* 新拟态风格进度条样式 */
.progress-bar {
position: relative;
height: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}
.progress-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #ffa500;
border-radius: 5px;
animation: progress 2s ease-in-out;
}
@keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.progress-bar::after {
content: "";
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
/* 修改进度条颜色 */
.progress-bar.blue::before {
background-color: #4a90e2;
}
.progress-bar.green::before {
background-color: #27ae60;
}
.progress-bar.red::before {
background-color: #c0392b;
}
写一个拟态样式的css代码
好的,下面是一个拟态样式的 CSS 代码:
button {
background-color: #fff;
border: none;
border-radius: 10px;
box-shadow: 6px 6px 10px rgba(0,0,0,0.2),
inset -6px -6px 10px rgba(255,255,255,0.5);
color: #333;
font-size: 1.2rem;
padding: 10px 20px;
transition: all 0.2s ease-in-out;
}
button:hover {
box-shadow: 4px 4px 8px rgba(0,0,0,0.4),
inset -4px -4px 8px rgba(255,255,255,0.8);
transform: translateY(-2px);
}
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)