CSS3实现创意开关切换按钮.zip资源-CSDN文库

共7个文件

js：3个

css：2个

html：1个

版权申诉

JAVASCRIPT

jQuery

HTML5

61 浏览量 2022-11-17 21:17:54 上传评论收藏 54KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现创意开关切换按钮.zip （7个子文件）

CSS3实现创意开关切换按钮

jiaoben3120

css

style.css 1KB

normalize.css 2KB

index.html 2KB

jquery.js 95KB

index.js 282B

prefixfree.min.js 6KB

CSS3实现创意开关切换按钮.jpg 21KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3实现创意开关切换按钮 - 网页模板</title> <style> *, *:before, *:after { box-sizing: border-box; } html { font-family: 'Roboto Condensed', sans-serif; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; color: #ECEFF1; background-image: radial-gradient(#4f6875, #263238); } .toggle { position: relative; display: block; margin: 0 auto; width: 150px; height: 60px; color: white; outline: 0; text-decoration: none; border-radius: 100px; border: 2px solid #546E7A; background-color: #263238; transition: all 500ms; } .toggle:active { background-color: #1c2429; } .toggle:hover:not(.toggle--moving):after { background-color: #455A64; } .toggle:after { display: block; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); line-height: 45px; text-align: center; text-transform: uppercase; font-size: 20px; color: white; background-color: #37474F; border: 2px solid; transition: all 500ms; } .toggle--on:after { content: 'On'; border-radius: 50px 5px 5px 50px; color: #66BB6A; } .toggle--off:after { content: 'Off'; border-radius: 5px 50px 50px 5px; transform: translate(100%, 0); color: #f44336; } .toggle--moving { background-color: #1c2429; } .toggle--moving:after { color: transparent; border-color: #435862; background-color: #222c31; transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms; } h1 { font-size: 64px; margin-top: 0; margin-bottom: 50px; } </style> <script src="js/prefixfree.min.js"></script> </head> <body> <h1>Toggle.</h1> <a href="#" class="toggle toggle--on"></a> <script src='js/jquery.js'></script> <script src="js/index.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉