div+css实现彩色液态流动checkbox开关效果代码
代码语言:html
所属分类:其他
代码描述:div+css实现彩色液态流动checkbox开关效果代码
代码标签: div css 彩色 液态 流动 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { display: grid; height: 100vh; } h1 { align-self: center; justify-self:center; } .container { align-self: center; justify-self:center; -webkit-filter: contrast(20); filter: contrast(20); background: rgba(0,0,0,1); border: 2px solid transparent; box-shadow: 5px 5px 5px rgba(0,0,0,.5); height: 135px; width: 325px; border-radius: 500px; overflow: hidden; transition: all ease 500ms; } .container:hover { box-shadow: 5px 5px 2.5px rgba(0,0,0,.5); } .label { position: relative; height: 100%; width: 100%; display: grid; cursor: pointer; } #toggle-btn { display: none; } .drop { position: absolute; left: 10px; top: 50%; -webkit-transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); transform: translateY(-50%) scale(1); height: 110px; width: 110px; border-radius: 50%; -webkit-filter: blur(10px); filter: blur(10px); background: #fff; transition: all ease 2750ms; opacity: 1; } .grow-rgba { position: absolute; right: 270px; top: 50%; -webkit-transform:translateY(-50%) scale(0); -ms-transform:translateY(-50%) scale(0); transform: translateY(-50%) scale(0); height: 110px; width: 110px; border-radius: 50%; -webkit-filter: blur(10px); filter: blur(10px); background: #fff; cursor: pointer; transition: all ease 3900ms; transition-delay: 200ms; opacity:0; } .droplet { position: absolute; left: 50px; top: 50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform: translateY(-50%); height: 50px; width: 50px; border-radius: 50%; -webkit-filter: blur(10px); filter: blur(10px); transition: all ease 1250ms; background:#fff; } /* TOGGLE FEATURES-ANIMATIONS */ #toggle-btn:checked + .grow { -webkit-transform:translateY(-50%) scale(0); -ms-transform:translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 0; transition: all ease 2000ms; } #toggle-btn:checked ~ .grow-rgba { right: 10px; height: 120px; width: 120px; -webkit-transform:translateY(-50%) scale(1); -ms-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0