css实现笑脸表情胶囊开关点击效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现笑脸表情胶囊开关点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .switch.off:before, .switch.off:after, .switch.on:before, .switch.on:after { -webkit-transition: 0.6s; transition: all 0.6s; } body { background-color: #2A6B64; height: 100vh; justify-content: center; align-items: center; } .switch { position: relative; width: 75px; height: 40px; background-color: #2c2c2c; color: #000; -webkit-transition: all 0.6s; transition: all 0.6s; margin:200px auto; } .switch.off, .switch.on { border-radius: 25px; padding: 5px; cursor: pointer; } .switch.off:before, .switch.on:before { display: block; position: absolute; content: ""; height: 39px; width: 39px; left: 4px; top: 5px; background-color: #F2C74E; -webkit-transition: 0.6s; transition: all 0.6s; -webkit-transition-delay: 0.01s; transition-delay: 0.01s; -moz-box-shadow: inset -8px -8px 6px -6px #c7960f; -webkit-box-shadow: inset -8px -8px 6px -6px #c7960f; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0