Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
X
A
B
Y
css
/* Tutorials: fossheim.io */ * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #E9F5D5; } .switch { position: relative; margin-left: auto; margin-right: auto; width: 665px; height: 300px; margin: 170px auto 0 auto; } .volume { display: block; width: 16px; height: 2px; position: absolute; top: 3px; background-image: linear-gradient(#FA8888, #E56B69); border-radius: 1px; } .volume.down { left: 145px; } .volume.up { left: 175px; } .back { display: block; width: 170px; height: 120px; background-color: #DADADA; position: absolute; top: 4px; border-radius: 70px; } .back.left { left: 2px; box-shadow: 1px 1px 1px 0 #C1C1C1 inset, 2px 2px 1px 0 #FFFFFF inset; } .back.right { right: 2px; box-shadow: -1px 1px 1px 0 #C1C1C1 inset, -2px 2px 1px 0 #FFFFFF inset; } .body { position: absolute; top: 5px; left: 5px; background-color: #fff; display: block; width: 655px; height: 290px; border-radius: 70px; background-image: linear-gradient(#FF8688, #FF7B81); box-shadow: -1px -7px 4px #F0696D inset, /* bottom */ 6px 5px 6px #FE8C90 inset, /* top */ 10px 10px 4px #FFAFB1 inset, /* top */ -4px 5px 4px #FA7F84 inset, -10px 10px 4px #FD9A9E inset, 0 80px 40px -70px rgba(0,0,0,0.3); } .screen-container { display: block; width: 445px; height: 250px; background-color: #fff; margin-left: auto; margin-right: auto; position: absolute; top: 20px; left: 0; right: 0; border-radius: 9px; background-image: linear-gradient(#F4797C, #F07477); box-shadow: 0 0 0.5px 0.5px #FF9395, 0px -3px 4px #E56A6F inset, 1px 1.5px 1.5px #BA525A inset, 4px 4px 2px #FD8186 inset, -1px 1.5px 1.5px #BA525A inset, -4px 4px 2px #FD8186 inset; } .screen { display: block; width: 390px; height: 225px; background-color: #FFDADB; margin-left: auto; margin-right: auto; position: absolute; left: 0; right: 0; top: 15px; border-radius: 2px; box-shadow: 0 0 1px 1px #EB8B89, 0 0 0 5px #030303 inset; } .controller { display: block; width: 50px; height: 50px; border-radius: 25px; background-image: linear-gradient( -135deg, #F4F2F0, #AFAFAF ); box-shadow: 0 -4.5px 3px #BAB6B3 inset, 0 0 0.5px 5px #EFEDEE inset, 0 -5px 0.5px 1px white inset, -1.5px 1.5px 2px 4px #888888 inset, 0 0 1px 1px #2F0000, 0 -1px 1.5px 1px #913639, 0 10px 14px -2px #C64850; } .controller.left { position: absolute; left: 33px; top: 55px; } .controller.right { position: absolute; right: 33px; bottom: 90px; } .button-container { display: block; width: 75px; height: 75px; position: absolute; top: 45px; right: 20px; } .button { display: block; position: absolute; width: 23px; height: 23px; border-radius: 12.5px; background-color: #DBDBD9; background-image: linear-gradient(#E1DFE0, #D1D4CF); box-shadow: 0 2px 0.75px #F4F6FA inset, 0 -2px 0.75px #B8A8A4 inset, -2px 0 0.75px #D1C7C9 inset, 2px 0 0.75px #D1C7C9 inset, 0 0 1px 1px #450709, 0 -2px 1px 1px #EC919B, 0 5px 4px -2px #D35657; } .button.top { top: 1px; } .button.bottom { bottom: 1px; } .button.top, .button.bottom { left: 0; right: 0; margin-left: auto; margin-right: auto; } .button.left { left: 1px; } .button.right { right: 1px; } .button.left, .button.right { top: 25px; } .button p { text-align: center; margin-top: 4px; font-family: sans-serif; font-size: 0.75rem; color: #B2B2B2; } .arrow-container { display: block; width: 62px; height: 62px; position: absolute; top: 140px; left: 25px; } .arrow-container:before, .arrow-container:after { position: absolute; left: 0; right: 0; content: ""; display: block; width: 22px; height: 100%; background-color: yellow; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #0B0000; } .arrow-container:after { transform: rotate(90deg); } .arrow { position: absolute; display: block; width: 19px; height: 50%; background-color: #D2D2D2; z-index: 1; border-radius: 2px; } .arrow:after { content: ""; display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #B8BAB9; position: absolute; top: 6px; left: 0; right: 0; margin-left: auto; margin-right: auto; } .arrow.top { top: 1.5px; margin-left: auto; margin-right: auto; left: 0; right: 0; box-shadow: 0 2px 2px #FAF5F7 inset, -1.5px 0 1px #FAF5F7 inset, 1px 0 1px #FAF5F7 inset; } .arrow.bottom { transform: rotate(180deg); bottom: 1px; margin-left: auto; margin-right: auto; left: 0; right: 0; box-shadow: 0 4px 2px -2px #B2A4A9 inset; } .arrow.right { top: 15.5px; transform: rotate(90deg); right: 8px; box-shadow: 0 3px 2px -2px #FFFBFC inset; } .arrow.left { top: 15.5px; transform: rotate(-90deg); left: 7px; box-shadow: 0 4px 2px -2px #FAF5F7 inset; } .screenshot { display: block; width: 20px; height: 20px; position: absolute; bottom: 20px; left: 75px; border-radius: 2px; background-image: linear-gradient(#D4D4D4, #E1DADC); box-shadow: 0 0 1px 0.5px #2B0809, 1px 1px #F1EFF0 inset; } .screenshot:after { content: ""; display: block; width: 12px; height: 12px; position: absolute; top: 4px; left: 0; right: 0; margin-left: auto; margin-right: auto; border-radius: 6px; box-shadow: 0 1px 1px #ACADAA inset, 0 -1px 1px #F2F2F2 inset; } .home { display: block; width: 23px; height: 23px; position: absolute; bottom: 24px; right: 70px; border-radius: 14px; background-color: #D7D7D7; box-shadow: 0 0.5px 0.5px #D8C3C5 inset, 0 -0.5px 0.5px #5E474A inset, 0 0 0.5px 2.5px #7E7276 inset, 0 0 0.5px 3px #E7E5E3 inset, 0 0 1px 0.75px #1B0000, 0 0 1px 1.5px #FFA4A7; } .minus { position: absolute; display: block; width: 16px; height: 4px; top: 30px; left: 80px; border-radius: 1px; background-color: #DFD5D9; box-shadow: 0 0 0.5px 0.75px #4B0607, 0 0 0 0.5px #FFFAF8 inset, 0 2.5px 4px -1px #B84849; } .plus { display: block; width: 15px; height: 15px; position: absolute; top: 25px; right: 80px; } .plus:before, .plus:after { content: ""; display: block; width: 5.5px; height: 100%; background-color: #340005; margin-left: auto; margin-right: auto; border-radius: 1px; position: absolute; left: 0; right: 0; box-shadow: 0 1px 1px rgba(52,0,5,0.2), 0 0 0.5px rgba(52,0,5,0.5); } .plus:after { width: 5px; transform: rotate(90deg); } .vertical, .horizontal{ position: absolute; display: block; width: 3.5px; z-index: 1; background-color: #E3E2DE; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; border-radius: 0.5px; } .vertical { top: 1px; height: 13px; } .horizontal { transform: rotate(90deg); top: 1px; height: 13.5px; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>switch.css-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号