css3制作滚动按钮
1，中间圆点用到css3的gradient属性
2，运动用到css3的transition属性
3，需要写各个浏览器的兼容
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3按钮</title>
</head>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: orange;
border-radius: 20px;
position: relative; }
.btn input{
width:100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.btn label{
display: block;
width: 20px;
height: 20px;
background: -webkit-linear-gradient(top,#fff,#ccc);
background: -moz-linear-gradient(top,#fff,#ccc);
background: -ms-linear-gradient(top,#fff,#ccc);
background: -o-linear-gradient(top,#fff,#ccc);
position: absolute;
left: 10px;
top:5px;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-ms-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
cursor: pointer;
border-radius: 50%;
}
.btn input:checked+label{
left: 70px;
}
</style>
<body>
<div class="btn">
<input type="checkbox" id="forbtn">
<label for="forbtn"></label>
</div>
</body>
</html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。
css3制作滚动按钮的更多相关文章
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 使用CSS3制作漂亮的按钮
我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- 9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...
随机推荐
- 在包a中新建一个类A，在类A中有一个int add(int m)方法，用来求1+2+…+m 的和。在包b中新建一个类B，在类B中有一个int cheng(int n)方法，用来求n! 的结果。在包c中新建一个主类C，调用A、B中的方法输出1+2+…+30的和， 以及5！的计算结果。
package a; public class A { public void add(int m) { int sum=0; for (int i = 1; i <=m; i++) { sum ...
- web应用中web.xml配置详解
Web.xml常用元素 <web-app> <display-name></display-name>定义了WEB应用的名字 <description> ...
- Android 杂记 - 存货盘点用的客户端
最近有个盘点用的东西,要放到移动设备,本来用 .Net Compact Framework,CAB 部署在 CE 系统的移动条码设备.技术太旧,我用了这个周末两天时间,把这东西在试试实现在安卓上面,给 ...
- windows跟linux文件共享
方法一:windows下的winscp工具 前提条件:windows能够ping通linux:linux关闭防火墙,/etc/init.d/iptables stop 在windows下运行winsc ...
- [Java解惑]字符串
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 通知（NSNotificationCenter）
// 监听加载更多的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(loadMoreDeals ...
- C++ Redis mset 二进制数据接口封装方案
C++ Redis mset 二进制数据接口封装方案 需求 C++中使用hiredis客户端接口访问redis: 需要使用mset一次设置多个二进制数据 以下给出三种封装实现方案: 简单拼接方案 在r ...
- 异步上传图片，光用jquery不行，得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
- updatePanel导致JS失效的解决办法（转）
吐槽下,维护别人之前做的项目好蛋疼,整个页面都是用微软的ajax框架. 今天给repeater用JS写一个hover事件 <script type="text/javascript&q ...
- Codeforces Round #199 (Div. 2)
A.Xenia and Divisors 题意:给定N个数,每个数的取值范围为1-7,N是3的倍数,判定是否能够恰好将N个数分成若干三元组,使得一个组中的元素a,b,c满足 a < b < ...