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