css实现一个万圣节开关checkbox美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现一个万圣节开关checkbox美化效果代码,点击切换从南瓜头变换到吸血鬼。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; overflow: hidden; background: #081219; } * { font-family: "Kodchasan"; } .switch input[type=checkbox] { display: none; } .switch input[type=checkbox]:checked + label { border-color: #4D7C99; } .switch input[type=checkbox]:checked + label:before { content: "Vampire"; color: #4D7C99; font-size: 50px; text-transform: uppercase; position: absolute; left: 25%; transform: translateX(-25%); line-height: 190px; transition: 0.5s ease; z-index: 0; } .switch input[type=checkbox]:checked + label .pumpkin-container { left: calc(100% - 5px); transform: translateX(-100%); opacity: 0; } .switch input[type=checkbox]:checked + label .vampire-container { left: calc(100% - 5px); transform: translateX(-100%); opacity: 1; } .switch label { border: 3px solid #E56D48; cursor: pointer; height: 200px; border-radius: 200px; display: flex; width: 600px; position: relative; transition: 0.5s ease-in-out; } .switch label:before { content: "Pumpkin"; color: #E56D48; font-size: 50px; text-transform: uppercase; position: absolute; left: 70%; transform: translateX(-70%); line-height: 190px; transition: 0.5s ease; z-index: 0; } .switch label .pumpkin-container { background: #E56D48; width: 190px; height: 190px; position: absolute; border-radius: 190px; left: 5px; top: 5px; overflow: hidden; transition: 0.5s ease; opacity: 1; } .switch label .pumpkin-container .eyes-n-nose { background: #330A0F; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -30%); width: 0; height: 0; border-style: solid; border-width: 0 16px 32px 16px; border-color: #E56D48 #E56D48 #330A0F #E56D48; } .switch label .pumpkin-container .eyes-n-nose:before, .switch label .pumpkin-container .eyes-n-nose:after { content: ""; background: #330A0F; position: absolute; width: 20px; height: 20px; border-radius: 50%; top: 10px; left: 0; } .switch label .pumpkin-container .eyes-n-nose:before { margin-left: -65px; } .switch label .pumpkin-container .eyes-n-nose:after { margin-left: 45px; } .switch label .pumpkin-container .mouth-n-teeths { height: 65px; width: 130px; background: #330A0F; bottom: 0; position: absolute; left: 50%; transform: translate(-50%, -35%); border-bottom-left-radius: 130px; border-bottom-right-radius: 130px; } .switch label .pumpkin-container .mouth-n-teeths:before, .switch label .pumpkin-container .mouth-n-teeths:after { content: ""; position: absolute; background: #E56D48; height: 15px; width: 20px; } .switch label .pumpkin-container .mouth-n-teeths:before { left: 25px; top: -1px; } .switch label .pumpkin-container .mouth-n-teeths:after { right: 25px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0