CSS3实现的超酷超炫的立体开关效果

最新推荐文章于 2023-04-03 10:17:21 发布
最新推荐文章于 2023-04-03 10:17:21 发布
阅读量95 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/youtianxia/p/3829827.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现的超酷超炫的立体开关效果丨芯晴网页特效丨CsrCode.CN</title>
<script>
var snd = new Audio('');
document.addEventListener('change', function(e){
    if(e.target.parentNode.className.indexOf('checkboxControl') != -1){
        snd.currentTime = 0;
        snd.play(); 
    }
});
</script>
<style>
*{ margin:0; padding:0; }
html, body{ height:100%; }
body{ font:15px/1 arial; text-align:center; background:#509DAD; }
body:before{ content:''; display:inline-block; height:450px; vertical-align:middle; }
fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; }
.legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); }
.legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; }
.checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; }
.checkboxControl{ 
border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597;
box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset,-8px 0 5px -5px #02425C inset;-moz-user-select:none; -webkit-user-select:none; background:#80DCE9;
}
.checkboxControl input{ position:absolute; visibility:hidden; }
.checkboxControl > div{ 
    background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
    background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
    box-shadow:-2px 0 1px 0 #A6F2FE inset;
    border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);
        
    transform-origin:0 0; -webkit-transform-origin:0 0; 
    transform:scaleX(0.93); -webkit-transform:scaleX(0.93);
    transition:.1s; -webkit-transition:0.1s;
    }
.checkboxControl div:first-letter{ letter-spacing:55px; }    
.checkboxControl :checked ~ div{ 
transform-origin:100% 0; -webkit-transform-origin:100% 0;
box-shadow:2px 0 1px 0 #A6F2FE inset;
background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
}
.checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; }
.checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); }
.checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
.checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
.checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; }
.checkboxControl2{ 
border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold;
width:60px; height:100px; position:relative; margin:0 5px;
color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);
}
.checkboxControl2 input{ position:absolute; visibility:hidden; }
.checkboxControl2 > div{ 
background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); 
background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); 
height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);
}
.checkboxControl2 > div:after{ 
content:'Ο'; display:block; height:50%; line-height:4;
transform-origin:0 0; -webkit-transform-origin:0 0;
}
.checkboxControl2 > div:before{ 
content:'Ι'; display:block; height:50%; line-height:2.5;
border-radius:80%/5px;
box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);
transform-origin:0 100%; -webkit-transform-origin:0 100%; 
transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
}
.checkboxControl2 :checked ~ div{ 
background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
}
.checkboxControl2 :checked ~ div:before{ 
border-radius:0; box-shadow:none;
transform:none; -webkit-transform:none;
}
.checkboxControl2 :checked ~ div:after{ 
border-radius:80%/5px;
box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;
transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
}
.checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
.checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
.checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; }
</style>
</head>
<body>
<fieldset>
    <div class='legend'><span>power switchs</span></div>
    <div class='checkboxGroup'>
        <label class='checkboxControl'>
            <input type='checkbox' />
            <div>ΟΙ</div><b></b>
            <span class='indicator'></span>
        </label>
        <label class='checkboxControl'>
            <input type='checkbox' />
            <div>ΟΙ</div><b></b>
            <span class='indicator'></span>
        </label>
    </div>
    <label class='checkboxControl2'>
        <input type='checkbox' />
        <div></div>
        <span class='indicator'></span>
    </label>
    <label class='checkboxControl2'>
        <input type='checkbox' />
        <div></div>
        <span class='indicator'></span>
    </label>
</fieldset>
</body>
</html>

 

转载于:https://www.cnblogs.com/youtianxia/p/3829827.html

weixin_30663391
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3实现超立体3D图片侧翻倾斜效果
09-25
主要介绍了css3实现超立体3D图片侧翻倾斜效果,需要的朋友可以参考下
css实现炫酷充电动画
分享互联网的有趣知识~
03-15 4292
一直以来，css实现水流动画是非常困难的，这里通过一些css技巧来实现水流的动画效果，通过电池充电来体现该效果的真实感。
css3电源开关样式控制网页开关灯
ICode联盟
08-31 189
css3电源开关样式控制网页开关灯特效代码。
纯CSS 3D样式开关按钮
ICode联盟
10-15 127
下载地址 使用纯CSS代码实现的3D样式开关按钮，可以作为切换选择等功能。 dd:
css 实现3D效果
蓝朽的小世界
04-03 5857
css实现3d效果
7款外观迷人的HTML5/CSS3 3D按钮特效
weixin_33938733的博客
04-23 944
1、CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮，它在鼠标按下时不仅从视觉上感受到3D立体的效果，而且更有弹性的动画特效，非常可爱。 在线演示 源码下载 2、新款CSS3按钮组合 5组可爱CSS3按钮 就再来分享一款可爱的CSS3按钮组合，该CSS3按钮一共有5种不同的风格，有几款还有3D立体的效果。一起来欣赏这些可爱的CS...
CSS3立体开关按钮特效
07-31
首先，CSS3中的`transform`属性是实现立体效果的关键。通过`rotateX`、`rotateY`和`rotateZ`，我们可以让元素在三维空间中进行旋转，从而营造出立体感。例如，可以设置一个开关按钮在激活时进行一定的旋转，使用户能...
纯CSS3代码实现滑动开关效果
09-03
在本文中，我们将探讨如何使用纯CSS3来实现一个3D滑动开关效果。这种效果通常用于创建模拟物理开关的交互式元素，例如在移动应用或网页设计中。滑动开关可以用来开启或关闭某个功能，其动画效果既实用又吸引人。 ...
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
CSS3实现超酷图片镜像效果.zip
11-17
本文将深入探讨如何利用CSS3实现超酷的图片镜像效果，这是一项能为网站增添独特魅力的技术。 首先，要理解CSS3中的`transform`属性是实现图片镜像效果的关键。`transform`允许我们对元素应用2D或3D转换，其中包括...
HTML5/CSS3开关按钮 立体3D按钮
08-23
之前我介绍过几款漂亮的CSS3开关切换按钮，比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
CSS3渲染Checkbox实现3D开关切换按钮
08-02
利用checkbox结合CSS3来实现一个3D开关切换按钮，该CSS3按钮一共有4款不同的样式风格，有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单，原型是一个checkbox，然后利用CSS3属性来渲染checkbox，从而实现3D按钮的效果。
CSS3 3D发光按钮 立体感十分强烈
04-16
解压密码：RJ4587 这是一款很特别的CSS3按钮，按钮整体是灰黑色主题，每一个按钮在按下时有非常漂亮的3D效果，并且按钮上的文字也有发光的特效。这款CSS3 3D按钮和之前介绍的几款按钮类似，都可以在点击按钮的时候让按钮悬浮下落，使得按钮整体非常炫酷。
纯CSS3模拟开关按钮，超逼真.rar
07-10
css3制作超级逼真的UI开关按钮特效，和墙上的电灯开关按钮简直是一样的，不要以为这是图片效果，本代码中无使用任何的图片，完全 HTML5和CSS3绘图技术生成的开关按钮特效，鼠标单击的时候开关的形状还会发生变化，真的挺不错的效果。
CSS3制作精美的像电源开关风格的按钮特效.rar
07-10
html5-css3-switch-button特效，CSS3制作电源开关式的按钮，非常精美的像电源开关风格的html5按钮特效，是不是和你家墙壁上的电灯开关是一个样呢？非常精美哦，不过这种开关大部分是用在手机中的。
ABAP-GUI的导出到excel的系统自带按钮
weixin_42559610的博客
09-11 879
按钮&XXL
CSS实现开关按钮三例
在线学习web前端开发教程
01-19 1292
我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样，而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素...
CSS3实现的动画开关，效果很炫酷
10-09
CSS3实现的动画开关，效果很炫酷
前端css3如何实现立体发光效果
最新发布
06-08
要实现立体发光效果，可以使用CSS3的`box-shadow`属性。 `box-shadow`属性可以为元素添加一个或多个阴影，其语法如下： ```css box-shadow: h-shadow v-shadow blur spread color inset; ``` 其中： - `h-shadow...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值