CSS 3D开关特效

来源:https://www.sucaihuo.com/js/2365.html 2017-07-09 22:51浏览(857) 收藏

一款CSS 3D开关特效,点击任意状态都有3D立体的切换特效,主要是按钮的颜色有一个动画的填充位移效果,很漂亮也很实用,喜欢的小伙伴们请收下吧。
CSS 3D开关特效
分类:html/css > 按钮 难易:入门级
查看演示 下载资源 下载积分: 30 积分

页面的head部分仅需引入一个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面body部分的结构也是很简单的,文字介绍+两个按钮状态分别防止在不同的容器里,代码如下:

<h1 class="intro">CSS 3D开关特效<small>想法会成真!</small></h1>
<div class="box">
  <input class="Switcher__checkbox sr-only" id="io" type="checkbox" checked="checked"/>
  <label class="Switcher" for="io">
    <div class="Switcher__trigger" data-value="健康"></div>
    <div class="Switcher__trigger" data-value="财富"></div>
  </label>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2