html的浮动按钮

最新推荐文章于 2023-09-01 09:38:26 发布

dancheng_work

最新推荐文章于 2023-09-01 09:38:26 发布

阅读量7.6k

点赞数 1

分类专栏： # html

本文链接：https://blog.csdn.net/dancheng1/article/details/76919144

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最终达到的效果图：

代码实现：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  .checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  -webkit-font-feature-settings: normal;
     -moz-font-feature-settings: normal;
          font-feature-settings: normal;
  -webkit-font-kerning: auto;
     -moz-font-kerning: auto;
          font-kerning: auto;
  -webkit-font-language-override: normal;
     -moz-font-language-override: normal;
          font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  height: 42px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  left: 0;
  top: -5px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}     

.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}
 
.model-1 .checkbox input:checked + label {
  background: #376ecb;
}
.model-1 .checkbox input:checked + label:after {
  background: #4285F4;
}
</style>
 </head>
 <body>
  <section class="model-1">
  <div class="checkbox">
    <input type="checkbox"/>
    <label></label>
  </div>
</section> 
 </body>
</html>

dancheng_work

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html的浮动按钮

最终达到的效果图：代码实现： Document .checkbox { position: relative; display: inline-block;}.checkbox:after, .checkbox:before { font-family: FontAwesome; -webkit-font
复制链接

扫一扫