纯css开关动画 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <META NAME="COPYRIGHT"CONTENT="http://codepen.io/yourmaster/pen/rWOoxv"> <title>On/Off Switch - Pure CSS </title> <style type="text/css"> label > * { -webkit-transform: translateZ(0) scale(1, 1); transform: translateZ(0) scale(1, 1); } .wrapper > * { cursor: pointer; } .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 150px; height: 75px; background: #F1F1F1; box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 75px; } .wrapper .toggle--handler { background: -webkit-linear-gradient(top, #F5515F, #CD2942); background: linear-gradient(to bottom, #F5515F, #CD2942); width: 60px; height: 60px; display: block; box-shadow: 0px 5px 40px rgba(245, 81, 95, 0.8); border-radius: 60px; margin: 7.5px; position: relative; z-index: 2; -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .wrapper .toggle--handler:after { content: ""; position: absolute; border-radius: 60px; background: -webkit-linear-gradient(top, #468EFF, #2B68FF); background: linear-gradient(to bottom, #468EFF, #2B68FF); width: 100%; height: 100%; opacity: 0; -webkit-transition: all 200ms; transition: all 200ms; } .wrapper .toggle--handler:before { content: ""; position: absolute; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 60px; background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>assets/icons/cross</title><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M0 0h24v24H0z"/><path d="M13.414 11.96l6.546-6.546L18.545 4 12 10.545 5.455 4 4.04 5.414l6.546 6.546-6.89 6.89 1.414 1.413 6.89-6.89 6.89 6.89 1.414-1.414-6.89-6.89z" fill="#FFF"/></g></svg>'); -webkit-transition: all 200ms; transition: all 200ms; -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .wrapper:after { content: ""; position: absolute; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80px; height: 2px; background: #E5E5E5; pointer-events: none; } input { position: absolute; left: -999em; } input:checked + .toggle .toggle--handler { -webkit-transform: translateX(75px); transform: translateX(75px); background: -webkit-linear-gradient(top, #468EFF, #2B68FF); background: linear-gradient(to bottom, #468EFF, #2B68FF); box-shadow: 0px 5px 40px rgba(70, 142, 255, 0.8); } input:checked + .toggle .toggle--handler:after { opacity: 1; } input:checked + .toggle .toggle--handler:before { background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>assets/icons/cross copy</title><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M0 0h24v24H0z"/><path fill="#FFF" d="M8.293 16.707l.707.707.707-.707 11-11-1.414-1.414-11 11h1.414l-4-4-1.414 1.414z"/></g></svg>'); z-index: 5; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } </style> </head> <body> <div class="wrapper"> <input id="dn" type="checkbox" /><label class="toggle" for="dn"><span class="toggle--handler"></span></label> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 纯css开关动画