其他
【每日一练】50—纯CSS实现咖啡杯挪动开关动画效果
写在前面
开关按钮，我们在很多地方都会见到它，它的应用范围也比较广泛，因此，我们今天来练习这样一个开关按钮的效果，这个按钮跟我们平时见到的不太一样。
这是一个杯子，当我们点击杯子从off到on时，杯子由空杯变满杯，是不是很有趣？现在，我们一起来看一下今天练习案例的最终效果：
<!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>*{ 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);}写在最后
以上就是我们今天【每日一练】案例的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号