CSS實現關機按鈕的方法

/* 定義按鈕樣式 */
.power-button {
width: 200px;
height: 100px;
border: 2px solid #000;
background-color: #a0a0a0;
border-radius: 5px;
margin: 20px;
position: relative;
}
.power-button:before {
content: "";
display: block;
width: 150px;
height: 80px;
background-color: red;
position: absolute;
top: 10px;
left: 25px;
border-radius: 5px;
z-index: -1;
}
.power-button:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
/* 定義按鈕的點擊事件 */
.power-button:active:before {
background-color: green;
}
/* 定義關機動畫 */
.power-button:active:after {
animation: power-off 1s forwards;
}
@keyframes power-off {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translateY(200px) scale(0.1);
opacity: 0;
}
}

以上代碼實現了一個帶有關機動畫的按鈕，點擊按鈕后，按鈕背景變成綠色，同時出現關機動畫。