css实现多种生日卡片背景效果代码
代码语言:html
所属分类:背景
代码描述:css实现多种生日卡片背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { background: #f5f5f5; height: 100vh; padding-top: 2vw; text-align: center; } #Palette1:checked ~ main { --color_1: #c8e8e5; --color_2: #f9eb9b; --color_3: #f3e5f5; --color_1_darken: #b2dcd9; --color_2_darken: #f3e38b; --color_3_darken: #e9d3ec; } #Palette2:checked ~ main { --color_1: #f7bcb8; --color_2: #c8e6c9; --color_3: #a5a5e8; --color_1_darken: #f5a59f; --color_2_darken: #b1dcb4; --color_3_darken: #8989da; } #Palette3:checked ~ main { --color_3: #ff9c95; --color_1: #388e3c; --color_2: #363472; --color_3_darken: #f5857e; --color_1_darken: #2f7b32; --color_2_darken: #201f4a; } #Palette4:checked ~ main { --color_1: #fffb86; --color_3: #8698ff; --color_2: #ff868e; --color_1_darken: #f3ed4b; --color_3_darken: #697def; --color_2_darken: #f16b74; } .theme-switch__label { font-family: "Quicksand", sans-serif; font-size: 1.5vw; margin-right: 2vw; color: #444444; cursor: pointer; } .wrapper { display: flex; justify-content: space-around; align-items: center; width: 100vw; height: 60vw; } .frame { width: 30vw; height: 80%; border-radius: 3px; box-shadow: 0px 3px 13px 1px #dcdcdca3; border: 8px solid white; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; } .frame:nth-child(1) { background: var(--color_3); background-image: linear-gradient(90deg, var(--color_3) 33.61%, #ffffff 33.61%, #ffffff 50%, var(--color_3) 50%, var(--color_3) 83.61%, #ffffff 83.61%, #ffffff 100%); background-size: 122px 122px; } .frame:nth-child(3) { background: var(--color_2); } .frame:nth-child(2) { background: var(--color_1); } .baloon-1, .baloon-3, .baloon-2 { width: 11vw; height: 13vw; border-radius: 50%; background: var(--color_2); box-shadow: inset -12px -13px 13px 2px var(--color_2_darken); position: absolute; top: 3vw; left: 1vw; z-index: 2; transform: rotate(353deg); } .baloon-1::after, .baloon-3::after, .baloon-2::after { content: ""; position: absolute; bottom: -0.9vw; width: 2vw; height: 1vw; background: var(--color_2_darken); left: 4.3vw; border-radius: 50%; } .baloon-1_thread, .baloon-3_thread { width: 1px; height: 62vw; background: #cccccc; position: absolute; top: 15vw; left: 11vw; transform: rotate(353deg); } .baloon-2 { top: 9vw; left: 7vw; transform: rotate(6deg); background: var(--color_1); box-shadow: inset -12px -13px 13px 2px var(--color_1_darken); } .baloon-2::after { content: ""; position: absolute; bottom: -0.9vw; width: 2vw; height: 1vw; background: var(--color_1_darken); left: 4.3vw; border-radius: 50%; } .baloon-2_thread { width: 1px; height: 62vw; background: #cccccc; position: absolute; top: 22vw; left: 10vw; transform: rotate(3deg); } .text { font-family: Sacramento, cursive; font-size: 3vw; padding: 1vw; text-align: center; background: #ffffffa6; width: 26vw; margin-bottom: 3vw; border-radius: 1vw; border: 0.2vw dashed #505050; z-index: 3; } .line_1 { position: absolute; top: -15vw; right: -4vw; z-index: 4; border-bottom: 1px solid #505050; height: 20vw; width: 40vw; border-radius: 100%; transform: rotate(356deg); } .triangle_down_1, .triangle_down_4, .triangle_down_3, .triangle_down_2 { width: 0; height: 0; position: absolute; bottom: -4.3vw; right: 6vw; border-left: 3vw solid transparent; border-right: 3vw solid transparent; border-top: 6vw solid var(--color_2); transform: rotate(344deg); } .triangle_down_2 { border-top-color: var(--color_3); bottom: -5.5vw; right: 12.1vw; transform: rotate(353deg); } .triangle_down_3 { border-top-color: var(--color_2); bottom: -5.8vw; right: 18.4vw; transform: rotate(3deg); } .triangle_down_4 { border-top-color: var(--color_3); bottom: -5.2vw; right: 24.5vw; transform: rotate(10deg); } .panda { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; position: relative; height: 19vw; } .panda .head { border-radius: 50%; height: 26vw; background: white; width: 26vw; margin-bottom: -13vw; position: relative; } .panda .neck { background: white; width: 26vw; height: 5vw; } .panda .right_ear, .panda .giraffe .left_ear, .giraffe .panda .left_ear, .panda .left_ear { width: 10vw; height: 7vw; background-color: #505050; border-top-left-radius: 10.5vw; border-top-right-radius: 10.5vw; border: 0.5vw solid #4a4949; border-bottom: 0; position: absolute; right: 0; top: 0.5vw; transform: rotate(35deg); } .panda .left_ear { left: 0; transform: rotate(-35deg); } .panda .right_eye, .panda .giraffe .head .left_eye, .giraffe .head .panda .left_eye, .panda .left_eye { background-color: #505050; width: 6vw; height: 7.5vw; border-radius: 50%; position: absolute; right: 4vw; top: 4vw; transform: rotate(-45deg); } .panda .right_eye::after, .panda .giraffe .head .left_eye::after, .giraffe .head .panda .left_eye::after, .panda .left_eye::after { content: ""; width: 3vw; height: 1.5vw; top: 6vw; right: 5vw; position: absolute; border-bottom-left-radius: 6vw; border-bottom-right-radius: 6vw; border: 0.5vw solid #2b2b2b; border-top: 0; position: absolute; right: 1.3vw; top: 3vw; transform: rotate(45deg); } .panda .left_eye { left: 4vw; transform: rotate(45deg); } .panda .left_eye::after { transform: rotate(-45deg); left: 1.3vw; } .panda .noce { position: absolute; right: 44%; top: 8vw; width: 0; height: 0; border-left: 1.5vw solid transparent; border-right: 1.5vw solid transparent; border-top: 1.5vw solid #505050; } .panda .noce::after { content: ""; position: absolute; right: -0.1vw; width: 0.3vw; height: 3vw; background: #505050; top: -0.5vw; } .panda .mouth { width: 4vw; height: 2vw; top: 10vw; right: 11vw; position: absolute; border-bottom-left-radius: 6vw; border-bottom-right-radius: 6vw; border: 0.4vw solid #505050; border-top: 0; } .giraffe { z-index: 4; } .giraffe .neck { width: 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0