寫在前面
開關按鈕，我們在很多地方都會見到它，它的應用範圍也比較廣泛，是以，我們今天來練習這樣一個開關按鈕的效果，這個按鈕跟我們平時見到的不太一樣。
這是一個杯子，當我們點選杯子從off到on時，杯子由空杯變滿杯，是不是很有趣？現在，我們一起來看一下今天練習案例的最終效果：
下面是這個案例的代碼實作過程。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>【每日一練】50—咖啡杯挪動開關動畫效果</title>
</head>
<body>
<label>
<input type="checkbox">
<span></span>
<text>OFF</text>
<text>ON</text>
</label>
</body>
</html> CSS代碼：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body
{
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#555555, #292929);
min-height: 100vh;
}
label
{
position: relative;
width: 300px;
height: 150px;
background: #3e3e3e;
box-shadow: 0 0 0 4px #303030;
border-radius: 75px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
label input
{
appearance: none;
}
label span
{
position: absolute;
left: 0px;
width: 175px;
height: 150px;
display: inline-block;
background: url(Coffee_01.png);
background-size: auto 150px;
background-repeat: no-repeat;
transition: 1.5s;
transform: rotate(-180deg);
transform-origin: 75px;
}
label input:checked ~ span
{
left: 150px;
background: url(Coffee_02.png);
background-size: auto 150px;
background-repeat: no-repeat;
transform: rotate(360deg);
}
label text
{
position: absolute;
left: -120px;
color: #fff;
font-size: 3em;
filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 35px #fff);
transition: 1.5s;
}
label input:checked ~ text
{
color: #8f8f8f;
filter: none;
}
label text:last-child
{
position: absolute;
left: initial;
right: -100px;
color: #8f8f8f;
filter: none;
}
label input:checked ~ text:last-child
{
color: #fff;
filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 35px #fff);
} 寫在最後
以上就是我們今天【每日一練】案例的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。