怎么用纯css3实现黑色炫酷开关按钮动画效果

本文小编为大家详细介绍“怎么用纯css3实现黑色炫酷开关按钮动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯css3实现黑色炫酷开关按钮动画效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

10年积累的成都网站建设、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有矿区免费网站建设让你可以放心的选择与我们合作。

这个css3开关按钮效果模拟了现实生活中的开关按钮。整个代码使用纯css3完成，并且带有开关按下时的动画效果。

HTML

html结构非常简单，是用一个input来作为开关的主体。

基本CSS样式

.button {

display: block;

width: 400px;

height: 120px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background-color: #000000;

box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;

border-radius: 20px;

overflow: hidden;

cursor: pointer;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.button span {

display: block;

position: absolute;

top: 6px;

width: 194px;

height: 108px;

background-color: #1c1d1f;

-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;

transition: transform 300ms ease, box-shadow 300ms ease;

}

.button span:before {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

font-family: "Open Sans";

font-weight: 800;

font-size: 48px;

-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;

}

.button span:after {

content: "";

width: 4px;

height: 108px;

position: absolute;

top: 0;

background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);

-webkit-transition: opacity 300ms ease;

transition: opacity 300ms ease;

}

读到这里，这篇“怎么用纯css3实现黑色炫酷开关按钮动画效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

网页名称：怎么用纯css3实现黑色炫酷开关按钮动画效果
本文地址：https://www.cdcxhl.com/article34/ieesse.html

成都网站建设公司_创新互联，为您提供网页设计公司、做网站、移动网站建设、微信公众号、微信小程序、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联