当前位置：首页 > 网页特效 > 按钮特效

15种漂亮的纯CSS3滑动按钮特效

分类：按钮特效日期：2024-05-14 点击(2) 评论(0)

15种漂亮的纯CSS3滑动按钮特效

简介

##### HTML结构
所有的滑动按钮都采用相同的HTML结构，在一个div元素中包裹input元素和一个空的label元素。

```html
<section class="model-1">
  <div class="checkbox">
    <input type="checkbox"/>
    <label></label>
  </div>
</section>   
```             
#####  CSS样式
首先对checkbox及其伪元素，label和input元素进行重置，并设置它们的基本的样式。

```html
.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 HACK”技术来实现按钮点击时的动画效果。checkbox hack允许我们在纯css中切换处理程序。它依赖于一个checkbox(可能是选中状态也可能是未选中状态)，:checked伪元素和一个兄弟选择器(~ 或 +)。通俗的讲，checkbox hack的描述是：如果checkbox被选中，那么接下来的某个元素的行为是如此如此...

```html
.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;
}              
```

web299.com

15种漂亮的纯CSS3滑动按钮特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果