<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小帅进度条</title>
<style>
.progress {
height: 25px;
width: 800px;
border-radius: 15px;
background-color: #272425;
border: 3px solid #272425;
box-sizing: border-box;
margin-bottom: 30px;
}
.inner {
width: 50%;
height: 20px;
border-radius: 10px;
text-align: right;
position: relative;
background-color: #409eff;
background-size: 20px 20px;
box-sizing: border-box;
transition: all 1s;
}
.inner span {
position: absolute;
right: -20px;
bottom: -25px;
}
button {
/* 基本样式 */
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
background-color: skyblue; /* 初始背景色 */
color: white; /* 初始文字颜色 */
transition: all 0.3s ease; /* 添加过渡效果 */
}
button:hover {
/* 鼠标悬停时的样式 */
background-color: pink; /* 改变背景色 */
color: lightgray; /* 改变文字颜色 */
}
button:active {
/* 按下时的样式 */
background-color: salmon; /* 更深的背景色以模拟按下效果 */
box-shadow: inset 0 5px 10px rgba(0,0,0,0.2); /* 添加内阴影 */
transform: translateY(1px); /* 微微上移，增加按压感 */
}
</style>
</head>
<body>
<h1>小帅进度条</h1>
<div id="app">
<!-- 外层盒子底色 （黑色） -->
<div class="progress">
<!-- 内层盒子 - 进度（蓝色） -->
<div class="inner" :style="{ width: percent + '%' }">
<span>{{ percent }}%</span>
</div>
</div>
<button v-show="index>0" @click="index--">上一页</button>
<button @click="percent = 25,index++">设置25%</button>
<button @click="percent = 50,index++">设置50%</button>
<button @click="percent = 75,index++">设置75%</button>
<button @click="percent = 100,index++">设置100%</button>
<button @click="index=0,percent=30">恢复</button>
<div><img :src="list[index]" v-show="index>0" alt=""></div>
</div>
<!-- <img src="imgs/11-00.gif" alt=""> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
percent: 30,
index:0,
//数组里面的图片素材自行添加谢谢！
list:[
'imgs/11-00.gif',
'imgs/11-01.gif',
'imgs/11-02.gif',
'imgs/11-03.gif',
]
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
