这次我们需要利用checkbox结合CSS3来实现一个3D开关切换按钮,该CSS3按钮一共有4款不同的样式风格,有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单,原型是一个checkbox,然后利用CSS3属性来渲染checkbox,从而实现3D按钮的效果。
分类目录归档:HTML5应用
23,982 人浏览
2014-02-15 19:46:11
纯CSS3 3D按钮 按钮酷似牛奶般剔透
24,197 人浏览
CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。
接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代checkbox选中和不选中两个状态的样式。
HTML代码:
<div> <div> <input type="checkbox"> <span></span> <span>+</span> </div> <div> <input type="checkbox" checked> <span></span> <span>–</span> </div[......]
7组CSS3动画按钮 CSS3按钮很时尚
8,421 人浏览
2014-02-13 13:52:07
HTML5物理实验 CSS3模拟齿轮转动
17,828 人浏览
冒泡动画CSS3按钮 绚丽多彩
10,118 人浏览
2014-02-05 22:15:40
CSS3按钮发光动画 绚丽多彩
27,943 人浏览
2014-01-21 17:58:04
CSS3密码强度验证表单 码速表样式
16,954 人浏览
纯CSS3 Android Logo动画绘制 小手还会动
14,528 人浏览
2014-01-20 15:25:08
纯CSS3发光登录表单
18,478 人浏览
CSS3 3D进度条按钮 18款精美样式
19,724 人浏览
2014-01-17 15:09:36