不用JS也能实现·按钮效果 —— CSS3

最新推荐文章于 2024-08-31 17:29:32 发布

GE.行者

最新推荐文章于 2024-08-31 17:29:32 发布

阅读量221

点赞数 2

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_58570217/article/details/120917264

版权

CSS3介绍

CSS3是CSS（层叠样式表）技术的升级版本，也新增了许多特性 —— 边框特性、多背景图、多列布局与弹性盒模型布局、过渡与动画等。但有兼容问题。。。

样品展示

代码部分

（我把CSS又写在一起了 [dog]）

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>简单的开关</title>
   </head>
   <style type="text/css">
      * {
         margin: 0;
         padding: 0;
         /* box-sizing: border-box; */
      }

      /* 文字部分 */
      .channel {
         position: fixed;
         top: 20%;
         left: 48%;
         font-size: 30px;
         color: #000000;
         z-index: 10px;
      }


      /* 选择器用于选择以指定值开头的属性值的元素 */
      input[type="checkbox"] {
         position: absolute;
         left: 45%;
         top: 50%;
         transform: translate(-50%, -50%);
         appearance: none;
      }

      /* 改变了哦 */
      /* 背景哦 */
      input[type="checkbox"]::before {
         content: "";
         width: 150px;
         height: 80px;

         position: absolute;
         background-color: #05c46b;
         border-radius: 40px;

         box-shadow: 0 0 3px black;
      }

      /* 前面的小球 */
      input[type="checkbox"]::after {
         content: "";
         width: 76px;
         height: 76px;
         border-radius: 50%;

         background-color: white;
         position: absolute;
         top: 2px;
         left: 2px;

         box-shadow: 0 0 3px gray;
         transform: 0.2s linear;
      }

      /* 点击后变颜色 与 移动位置 */
      input:checked[type="checkbox"]::after {
         background-color: gray;
         left: 72px;
      }
   </style>
   <body>
      <!-- 文字 -->
      <div class="channel">开关</div>
      <input type="checkbox" name="" id="" value="" />
   </body>
</html>

如果还是不可以到 B站看一下，里面好多教程。 —— 不是打广告吧？

[modesty]

GE.行者

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不用JS也能实现·按钮效果 —— CSS3

[CSS3介绍CSS3是CSS（层叠样式表）技术的升级版本，也新增了许多特性 ——边框特性、多背景图、多列布局与弹性盒模型布局、过渡与动画等。但有兼容问题。。。样品展示代码部分（我把CSS又写在一起了 [dog]）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简单的开关</title> ...
复制链接

扫一扫