div+css实现兔子胶囊开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现兔子胶囊开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* DAY STYLES*/ body{ background: #FFDB88; } .the-container{ display: block; position: absolute; width: 500px; height: 350px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .c-window{ display: block; position: relative; width: 235px; height: 235px; margin: 0 auto; border-radius: 100%; border: 8px solid #E5B97A; background: #8188B8; box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset; overflow: hidden; } .c-window .the-sun{ display: block; position: relative; top: 18px; height: 40px; width: 40px; background: #F7B9A0; border-radius: 100%; margin: 0 auto; box-shadow: 0px 0px 40px #F7B9A0; left: 30px; } .c-window .the-moon{ position: relative; height: 24px; width: 24px; background: #8188B8; border-radius: 100%; box-shadow: 0px 0px 20px #FFF; display:none; } .c-window .the-rabbs{ display: block; position: absolute; bottom: -20px; height: 140px; width: 135px; margin: 0 50px; background: #FFF; transition: bottom 1s; } .c-window .the-rabbs:before{ width: 0; height: 0; border-left: 15px solid #FFF; border-right:10px solid #FFF; border-top: 100px solid #FFF; border-radius: 40%; top: -60px; left: 0; position: absolute; content: ""; } .c-window .the-rabbs:after{ width: 0; height: 0; border-left: 15px solid #FFF; border-right:10px solid #FFF; border-top: 100px solid #FFF; border-radius: 40%; top: -60px; right: 0; position: absolute; content: ""; } .c-window .the-rabbs:hover{ display: block; position: absolute; bottom: -30px; } .c-window .the-rabbs .eyes{ display: block; position: absolute; background: #FF727B; height: 15px; width: 15px; border-radius: 100%; bottom: 80px; } .c-window .the-rabbs:hover .eyes{ display: block; position: absolute; height: 5px; width: 15px; bottom: 85px; } .c-window .the-rabbs .eyes.left{ left: 12px; } .c-window .the-rabbs .eyes.right{ right: 12px; } .c-window .the-rabbs .nose{ display: block; position: relative; background: #F7B9A0; height: 10px; width: 10px; border-radius: 100%; margin: 0 auto; top: 50px; } input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } input#toggle[type=checkbox]{ display:none; } label { position: absolute; height: 40px; width: 120px; display: block; top: 0px; bottom: 0; right: 0; left:0; z-index: 9999; cursor: pointer; margin: 0 auto; } .switch { display: block; position: relative; border-bottom: 1px solid #FFF; border-radius: 25px; background: #E5B97A; box-shadow: inset 0 0 10px #888888; -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.25); height: 40px; width: 100px; margin: 0px auto 30px auto; } .switch .button{ display: block; position: absolute; border-top: 1px solid #FFF; border-bottom: 1px solid #AAA; border-radius: 100%; background: #FFDB88; height: 32px; width: 32px; top: 4px; left: 4px; box-shadow: 0 0 2px rgba(0,0,0,0.25) } .switch .button .b-inside{ display: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0