css实现一个可爱老虎睁眼闭眼checkbox开关效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现一个可爱老虎睁眼闭眼checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat"); .balloon { position: absolute; width: 90px; height: 125px; top: 18px; left: 234px; } .balloon--off .balloon__part { position: absolute; background-color: #fff; border-radius: 50%; opacity: 0.8; } .balloon--off .balloon__part:nth-of-type(1) { width: 60px; height: 60px; top: 0; left: 27px; -webkit-animation: balloon3 4s ease normal infinite; animation: balloon3 4s ease normal infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .balloon--off .balloon__part:nth-of-type(2) { width: 40px; height: 40px; top: 63px; left: 15px; -webkit-animation: balloon2 4s ease normal infinite; animation: balloon2 4s ease normal infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .balloon--off .balloon__part:nth-of-type(3) { width: 20px; height: 20px; top: 104px; left: 0; -webkit-animation: balloon1 4s ease normal infinite; animation: balloon1 4s ease normal infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .balloon--on { display: none; position: absolute; top: 18px; left: 234px; width: 134px; height: 93px; background-color: #fff; border-radius: 50%; transform: rotate(10deg); } .balloon--on:before { content: ""; position: absolute; bottom: 1px; width: 0; height: 0; border-top: 20px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; transform: rotate(42deg); } .balloon--on .balloon__text { margin: auto; text-align: center; font-weight: bold; margin-top: 25px; color: #666; } .tiger-toggle { cursor: pointer; display: inline-block; position: absolute; width: 110px; top: 111px; left: 50%; height: 45px; background-color: #f6e2ae; border-radius: 85px; z-index: 10; transform: translateX(-50%); } .tiger-toggle__handler { display: inline-block; position: relative; top: 3px; left: 3px; width: 40px; height: 40px; background-color: #b3433c; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); transition: all 400ms cubic-bezier(0.7, -0.6, 0.3, 1.6); transform: rotate(-45deg); } input.input-toggle { top: 120px; position: absolute; left: 50%; } .input-toggle:checked + .tiger-toggle:after { color: #ffffff; } .input-toggle:checked + .tiger-toggle .tiger-toggle__handler { transform: translate3d(63px, 0, 0) rotate(0); } .input-toggle:checked + .tiger-toggle + .tiger__eye:after { -webkit-animation: eyelid 3s ease normal infinite; animation: eyelid 3s ease normal infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform: translateY(-22px); } .input-toggle:checked + .tiger-toggle + .tiger__eye + .tiger__eye:after { transform: translateY(-22px); -webkit-animation: eyelid 3s ease normal infinite; animation: eyelid 3s ease normal infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .input-toggle:checked + .tiger-toggle + .tiger__eye + .tiger__eye + .balloon--off { display: none; } .input-toggle:checked + .tiger-toggle + .tiger__eye + .tiger__eye + .balloon--off + .balloon--on { display: block; } .tiger { position: absolute; width: 240px; height: 210px; top: calc(50% - 110px); left: calc(50% - 165px); } .tiger__face { backgroun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0