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

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

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