<div class="box">
<span class="move"></span>
<p>滑動來關機</p>
</div>
<style type="text/css">
.box{
position: relative;
margin: 0 auto;
width: 240px; height: 70px;
border-radius: 35px;
background-color: rgba(0,0,0,0.5);
}
.move{
position: absolute;
top: 5px; left: 5px;
width: 60px; height: 60px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.move::before, .move::after{
content: "";
position: absolute;
top: 17px; left: 17px;
}
.move::before{
width: 20px; height: 20px;
border: 3px solid red;
border-radius: 50%;
}
.move::after{
top: 14px; left: 28px;
width: 3px; height: 13px;
border-radius: 2px/4px;
background-color: red;
box-shadow: 0 0 0 4px #fff;
}
p{
font-size: 18px;
line-height: 70px;
text-align: center;
text-indent: 50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(-30deg, rgba(0, 0, 0, 0.6) 40%, #fff 50%, rgba(0, 0, 0, 0.6) 60%);
background-size: 300%;
background-blend-mode: hard-light;
animation: light linear 3s infinite;
user-select: none;
}
@keyframes light {
0% { background-position: 100%; } 100% { background-position: 0%; }
}
</style>

效果圖如下：

推薦閱讀：