css3实现手机开关灯效果

2020-07-03 13:05:53

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了css3实现手机开关灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

css3实现手机开关灯效果

<!DOCTYPE html><title>css3实现手机开关灯效果 - 361源码</title><head><style class="cp-pen-styles">*{  margin: 0px;  padding: 0px;}body {  background-color: #415062;}input[type="checkbox"] {  position: absolute;  top: 50%;  left: 50%;  margin: 0;  margin-top: -40px;  margin-left: -80px;  -webkit-appearance: none;     -moz-appearance: none;          appearance: none;  cursor: pointer;  -webkit-backface-visibility: hidden;          backface-visibility: hidden;  -webkit-transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75);  transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75);  width: 80px;  height: 80px;  outline: 40px solid #fff;  outline-offset: -40px;  box-shadow: 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf;}input[type="checkbox"]:checked {  -webkit-transform: translateX(100%);          transform: translateX(100%);  outline-color: #5d6aba;  box-shadow: 0 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf;}input[type="checkbox"]:checked + .backgroundAnimation {  background-color: #baad5d;}.backgroundAnimation {  width: 100vw;  height: 100vh;  -webkit-transition: background-color 0.5s ease;  transition: background-color 0.5s ease;}</style></head><body><input type="checkbox"/><!-- option--><div class="backgroundAnimation"></div></body></html>

以上就是css3实现手机开关灯效果的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。

上一篇：通过CSS定义鼠标样式代码归纳

下一篇：超大banner图片不拉伸一直居中的CSS写法