css布局实现hello kitty可爱儿童卡通闹钟效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现hello kitty可爱儿童卡通闹钟效果代码
代码标签: css hello kitty 可爱 儿童 卡通 闹钟
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(90deg, rgb(134, 63, 75) 50%, rgb(207, 93, 112) 50%); } .container { position: relative; display: flex; align-items: center; justify-content: center; height: 80vh; transition: .5s; } input[type="checkbox"] { position: absolute; top: -70px; left: 40%; -webkit-appearance: none; appearance: none; height: 50px; width: 60px; border: 4px solid #000; background-color: rgb(197, 0, 33); border-top-left-radius: 25px; border-top-right-radius: 25px; outline: none; } input[type="checkbox"]:checked { background-color: rgb(255, 255, 0); top: -50px; height: 30px; } input[type="checkbox"]:checked + label { animation-play-state: paused; } .head{ position: absolute; left: 25%; top: 30%; width: 160px; height: 140px; border: 3px solid #000; border-radius: 50%; background-color: #fff; } .ears { position: relative; bottom: 25px; right: 10px; height: 60px; width: 60px; transform: rotate(90deg); background-color: rgb(255, 255, 255); border-top-left-radius: 45px; border-bottom-right-radius: 35px; border: 3px solid #000; border-top: transparent; border-right: transparent; z-index: 1; } .ears::before { content: ""; position: absolute; bottom: 190%; right: -4px; transform: rotate(-10deg); height: 60px; width: 60px; background-color: rgb(255, 255, 255); border: 3px solid #000; border-top-right-radius: 45px; border-bottom-left-radius: 35px; border-bottom: transparent; border-right: transparent; } .bow { position: relative; bottom: 60px; left: 10px; width: 40px; height: 40px; background-color: rgb(197, 0, 33); border: 3px solid #000; border-radius: 50%; z-index: 5; } .bow1 { position: relative; bottom: 140px; left: -15px; width: 40px; height: 50px; transform: rotate(-35deg); background-color: rgb(197, 0, 33); border: 3px solid #000; border-radius: 50%; z-index: 4; } .bow2 { position: relative; bottom: 120px; left: 32px; width: 40px; height: 50px; transform: rotate(-35deg); background-color: rgb(197, 0, 33); border: 3px solid #000; border-radius: 50%; z-index: 4; } .wiskers1 { position: absolute; bottom: 50px; left: -29px; width: 45px; background-color: rgb(0, 0, 0); border: 2px solid #000; border-radius: 25px; transform: rotate(5deg); } .wiskers1::before { content: ""; position: absolute; top: 12px; left: 9px; width: 35px; border: 2px solid #000; border-radius: 25px; transform: rotate(-15deg); } .wiskers1::after { content: ""; position: absolute; top: 25px; left: 20px; width: 35px; background-color: rgb(0, 0, 0); border: 2px solid #000; border-radius: 25px; transform: rotate(-30deg); } .wiskers2 { position: absolute; bottom: 50px; right: -25px; width: 45px; background-color: rgb(0, 0, 0); border: 2px solid #000; border-radius: 25px; transform: rotate(-5deg); } .wiskers2::before { content: ""; position: absolute; top: 12px; left: -4px; width: 35px; border: 2px solid #000; border-radius: 25px; transform: rotate(10deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0