css3制作滚动按钮

1，中间圆点用到css3的gradient属性

2，运动用到css3的transition属性

3，需要写各个浏览器的兼容

代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3按钮</title>
 6 </head>
 7 <style type="text/css">
 8     .btn{
 9         width: 100px;
10         height: 30px;
11         background: orange;
12         border-radius: 20px;
13         position: relative;
14 
15     }
16     .btn input{
17         width:100%;
18         height: 100%;
19         opacity: 0;
20         cursor: pointer;
21     }
22     .btn label{
23         display: block;
24         width: 20px;
25         height: 20px;
26         background: -webkit-linear-gradient(top,#fff,#ccc);
27         background: -moz-linear-gradient(top,#fff,#ccc);
28         background: -ms-linear-gradient(top,#fff,#ccc);
29         background: -o-linear-gradient(top,#fff,#ccc);
30         position: absolute;
31         left: 10px;
32         top:5px;
33         -webkit-transition:all .2s linear;
34         -moz-transition:all .2s linear;
35         -ms-transition:all .2s linear;
36         -o-transition:all .2s linear;
37         transition:all .2s linear;
38         cursor: pointer;
39         border-radius: 50%;
40     }
41     .btn input:checked+label{
42         left: 70px;
43     }
44 </style>
45 <body>
46     <div class="btn">
47         <input type="checkbox" id="forbtn">
48         <label for="forbtn"></label>
49     </div>
50 </body>
51 </html>
.btn input:checked+label表示在input选中的时候它后面的label标签定义样式。

转载于:https://www.cnblogs.com/MissBean/p/4234342.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/432057.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unicode、UTF-8、UTF-16

Unicode、UTF-8、UTF-16

计算机起源于美国&#xff0c;上个世纪&#xff0c;他们对英语字符与二进制位之间的关系做了统一规定&#xff0c;并制定了一套字符编码规则&#xff0c;这套编码规则被称为ASCII编码 ASCII 编码一共定义了128个字符的编码规则&#xff0c;用七位二进制表示 ( 0x00 - 0x7F ), …
阅读更多...
在linux命令行中直接执行php命令

在linux命令行中直接执行php命令

有时候用浏览器调试太麻烦&#xff0c;想在linux命令下直接执行php代码 php -r echo 0500; 转载于:https://www.cnblogs.com/wangkongming/p/4236138.html
阅读更多...
顶点缺失问题

顶点缺失问题

1. 发送缓冲区过小&#xff0c;模型过大&#xff0c;接收端接收缓冲区太小&#xff0c;并且接收数据与数据处理在一个线程&#xff0c;导致接收速度过慢。最终造成&#xff0c;发送缓冲区被撑爆&#xff0c;数据丢失。 2. U3D端对单个mesh的顶点限制在了65000个。 3. 对于超过…
阅读更多...
LoadRunner中Action的迭代次数的设置和运行场景中设置

LoadRunner中Action的迭代次数的设置和运行场景中设置

LoadRunner中Action的迭代次数的设置和运行场景中设置 LoadRunner是怎么重复迭代和怎么增加并发运行的呢&#xff1f;另外&#xff0c;在参数化时&#xff0c;对于一次压力测试中均只能用一次的资源应该怎么参数化呢&#xff1f;就是说这些资源用了一次就不能在用了的。&#x…
阅读更多...
二维坐标系的转换

二维坐标系的转换

旋转 平移加旋转
阅读更多...
IE11 全新的F12开发者工具

IE11 全新的F12开发者工具

我讨厌debug&#xff0c;相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到 BUG 是一件再正常不过的事情了&#xff0c;我们不能保证自己的代码万无一失&#xff0c;于是使用浏览器的开发者工具调试是我们解决问题最快捷的方法…
阅读更多...
OpenXLSX 中文字段读取问题

OpenXLSX 中文字段读取问题

在读取excel的时候发现有些中文字段无法读取&#xff0c;通过把excel文件解压后对比发现&#xff0c;正常读取和不 能正常读取的中文字段在sharedString.xml中存储的格式有差异&#xff0c;取其中一个字段&#xff0c;如下图&#xff1a; 正常读取的 不能读取的 对比可以看到…
阅读更多...
时间格式化需要注意点不可使用本地时间

时间格式化需要注意点不可使用本地时间

var compareTime DateTime.Now; var start DateTime.Parse(string.Format("{0:u}", compareTime)); var end DateTime.Parse(compareTime.ToString()); Console.WriteLine(string.Format("时间格式正确{0}", startend)); 各位猜猜&#xff0c;输出是什么…
阅读更多...
MFC 窗口置顶

MFC 窗口置顶

SetWindowPos(&CWnd::wndTopMost, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE); SetWindowPos(NULL, 300, 150, 80, 40, SWP_SHOWWINDOW);
阅读更多...
[翻译] ZLHistogramAudioPlot

[翻译] ZLHistogramAudioPlot

ZLHistogramAudioPlot A hardware-accelerated audio visualization view using EZAudio, inspired by AudioCopy. ZLHistogramAudioPlot was originally developed for Murmur. 这是使用了EZAudio,一个硬件加速的audio可视化view,灵感来自于AudioCopy.ZLHistogramAudioPlot这个…
阅读更多...
Remon Spekreijse CSerialPort串口类的修正版2014-01-10

Remon Spekreijse CSerialPort串口类的修正版2014-01-10

转自&#xff1a;http://m.blog.csdn.net/blog/itas109/18358297# 2014-1-16阅读691 评论0 如需转载请标明出处&#xff1a;http://blog.csdn.net/itas109 这是一份优秀的类文件&#xff0c;好多的地方值得我们学习&#xff0c;具体在多线程&#xff0c;事件&#xff0c;自定义…
阅读更多...
获取进程名称与ID

获取进程名称与ID

HANDLE hProceessnap CreateToolhelp32Snapshot(TH32CS_SNAPPROCESS, 0);if (hProceessnap INVALID_HANDLE_VALUE){printf_s("创建进行快照失败\n");return -1;}else{PROCESSENTRY32 pe32;pe32.dwSize sizeof(pe32);BOOL hProcess Process32First(hProceessnap, …
阅读更多...
CMake find_package

CMake find_package

find_package(XXX REQUIRED) CMake 会寻找 XXX_Dir的路径查找.cmake文件 有两种方式设置 1. 命令行模式下&#xff0c;使用-D -DXXX_Dir"路径" 2. 界面模式下&#xff0c;使用Add Entry添加 XXX_Dir 变量并设置路径
阅读更多...
Libevent：6辅助函数以及类型

Libevent：6辅助函数以及类型

在头文件<event2/util.h>中定义了许多有用的函数和类型来帮助实现可移植的程序。Libevent在内部使用这些类型和函数。 一&#xff1a;基本类型 evutil_socket_t 除了Windows之外的大多数系统&#xff0c;socket就是一个整数&#xff0c;而且操作系统按照数值顺序对它们进…
阅读更多...
enable_if

enable_if

typedef struct {int a; }TestType;int main() {enable_if <1, TestType>::type test1; //正确test1.a 100;enable_if <is_integral<int>::value, TestType>::type test2; //正确test1.a 100;enable_if <0, TestType>::type test3; //错…
阅读更多...
一. NSIS介绍

一. NSIS介绍

概述 最近需要写一个安装程序&#xff0c;比对了一下现有的安装工具&#xff0c;最后选定了NSIS&#xff0c;最主要的原因一是开源、二是灵活。 下面把我的要求简单列举下&#xff1a; 1、需要检查系统环境是否满足要求 2、需要界面友好的安装过程 3、需要一些自定义界面&…
阅读更多...
HDU-1008

HDU-1008

水题 Description The highest building in our city has only one elevator. A request list is made up with N positive numbers. The numbers denote at which floors the elevator will stop, in specified order. It costs 6 seconds to move the elevator up one floor,…
阅读更多...
二. 简单的NSIS安装包

二. 简单的NSIS安装包

新建脚本&#xff1a;向导 我们先从一个简单的NSIS安装包开始吧&#xff0c;就像前面&#xff08;NSIS介绍&#xff09;所说&#xff0c;我们虽然看过用户手册&#xff0c;可要写安装脚本无从下手&#xff0c;那我们的编辑工具HM NIS Edit就派上用场了。 打开HM NIS Edit&…
阅读更多...
Ubuntu 14.04 LAMP搭建(Apache 2.47+MySQL 5.5+PHP5.5)

Ubuntu 14.04 LAMP搭建(Apache 2.47+MySQL 5.5+PHP5.5)

Ubuntu 14.04 LAMP搭建(Apache 2.47MySQL 5.5PHP5.5) 原文:Ubuntu LAMP搭建 为了数据库课程设计&#xff0c;只好自己搭一个数据库系统&#xff0c;采用LAMP方式。 一、安装 1.安装Apache sudo apt-get install apache2 Apache在安装期间会新建一个目录&#xff1a;/var/www&am…
阅读更多...
C++变量未初始的后果

C++变量未初始的后果

#include <iostream> using namespace std;void dummy(int &a) {}int main() {int i 2;while (i--){int a;dummy(a);if (i 1){a 100;}cout << a << endl;cout << &a << endl;}getchar(); } 上面程序&#xff0c;如果变量a没有初始化…
阅读更多...
最新文章

Copyright @ 2022~2023