【每日一练】50—纯CSS实现咖啡杯挪动开关动画效果

最新推荐文章于 2024-07-17 16:26:33 发布

web前端开发V

最新推荐文章于 2024-07-17 16:26:33 发布

阅读量206

点赞数

文章标签： HTML CSS 动画效果交互设计前端开发

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649131429&idx=3&sn=9f9ac9f1cc11669c78e2248f19c346c3&chksm=be58ae08892f271e3e8fd71ec210e422c693fca17b01c36156cfc1ca0647206bc464dd97f47d&scene=126&&sessionid=0

版权

写在前面

开关按钮，我们在很多地方都会见到它，它的应用范围也比较广泛，因此，我们今天来练习这样一个开关按钮的效果，这个按钮跟我们平时见到的不太一样。

这是一个杯子，当我们点击杯子从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);
}

写在最后

以上就是我们今天【每日一练】案例的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号