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>新聞熱點
疑難解答
