标签：
做项目会碰到做一些简单的css3动画，就把一些简单的动画属性玩了一遍，今天做了一个css3实现的滑块，觉得还蛮好玩的，就记录一下实现方式。
首先看一下做的是个什么东东：
就是一个开关，点了之后上面的滑块从左边跑到右边so easy的小动画。
图1 滑动前的效果
图2 滑动后的效果
css3新属性就不在这里罗列了，想了解看看教程之后就会了。这里用到transition属性，所以粗略解释一下。transition属性,w3译为过渡，是元素从一种样式逐渐改变为另一种的效果。你设定一个元素的初始样式，再设定最后的样式，然后你可以控制transition的过渡速度，延迟时间等等。那么怎么触发transition呢。MDN上是这么解释的：
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like:hover or :active or dynamically set using JavaScript.
也就是说，transition在该元素上hover,active或者用js来触发transition,这样你才能看到transition效果。那么我们动手做一个开关吧(∩_∩)
利用transition做一个开关不难，写好一个初始样式和transition之后的样式就可以了，但问题是你怎么用css触发这个transition事件呢，去google上一搜，就看到很多抖机灵的同学做的奇淫异巧（哭衰我怎么没想到）。随手看到一个方法，记录一下。
既然点击的时候完成，那么我们放一个复选框(checkbox)隐藏掉这个chckbox就行了呀~然后吧这个checkbox跟你要做动画的元素（比如label）绑定在一起，点击transition元素的时候，等同于点击checkbox,就这么机灵的出发了transition。
大概思想就是这样子的，当时看到这个方法的时候只是觉得，很多时候，做一些没尝试的东西，多google，去吸取别人的优秀经验，还有就是要动脑子，奇淫异巧这个东西，就是你思维模式要跳跃，要勇于尝试就可以啦(∩_∩)(∩_∩)好哒，感慨完了放代码吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type = "text/css"> .switch{ background-color:#9fcaf4; height: 26px; width: 0; border-radius: 12px; transition:all 1s ease; } .bg{ display: block; width: 68px; height: 26px; border-radius: 12px; background-color:#526069; overflow: hidden; } .bg:after{ position: absolute; top:8px; left:0; display: block; content:‘‘; width: 26px; height: 26px; background-color: #e6ebee; border-radius: 50%; transition:all 1s ease; background-image:-webkit-linear-gradient(0deg, #e5eaed, #fafbfb); } input{ display: none; } input:checked ~ label:after{ position: absolute; top:8px; left:56px; } input:checked ~label .switch{ width: 68px; } </style> <div class ="wrap"> <input type = "checkbox" id = "unchecked"/> <label for = "unchecked" class = "bg"> <div class = "switch"></div> </label> </div> </body> </html>
就这样子啦~~~很简单的，就是记录一下这种思维模式。
标签：
原文地址：http://www.cnblogs.com/echo-yaonie/p/4907045.html
