css布局实现七星瓢虫钉在花朵上的效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现七星瓢虫钉在花朵上的效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: aqua; z-index: -99; } .daisy { position: absolute; height: 170px; width: 170px; border-radius: 50%; background-color: #fed850; box-shadow: 4px 3px 8px #9b7a03, inset 2px 3px 10px #bea443; } .petals { position: absolute; height: 120px; width: 120px; border-radius: 120px 0; background-color: rgb(252, 249, 249); z-index: -20; box-shadow: 2px 3px 10px #b8b7b7, inset 2px 3px 10px rgb(219, 218, 218); } .petal1 { position: absolute; transform: rotate(-46deg); top: -126px; left: 20px; } .petal2 { position: absolute; transform: rotate(-10deg); top: -105px; left: 100px; } .petal3 { position: absolute; transform: rotate(26deg); top: -40px; left: 150px; } .petal4 { position: absolute; transform: rotate(230deg); top: 50px; left: 160px; } .petal5 { position: absolute; transform: rotate(280deg); top: 130px; left: 110px; } .petal6 { position: absolute; transform: rotate(310deg); top: 140px; left: 30px; } .petal7 { position: absolute; transform: rotate(2deg); top: 120px; left: -60px; } .petal8 { position: absolute; transform: rotate(50deg); top: 40px; left: -110px; } .petal9 { position: absolute; transform: rotate(70deg); top: -40px; left: -110px; } .petal10 { position: absolute; transform: rotate(100deg); top: -100px; left: -60px; } .ladybird { position: absolute; height: 135px; width: 98px; border-radius: 50%; background-image: linear-gradient(black 20%, #272626, black); box-shadow: 10px 3px 15px 3px #807272; animation: walk 10s linear; z-index: 2; } .line { height: 10px; width: 98px; background-color: rgb(22, 18, 18); top: 36px; } .spots { position: absolute; height: 20px; width: 17px; border-radius: 50%; background-color: black; box-shadow: inset 2px 8px 10px 2px #473838; } .spot1 { top: 12px; right: -8px; } .spot2 { top: 40px; right: 40px; } .spot3 { top: 80px; right: 18px; } .spot4 { top: 35px; right: 8px; } .spot5 { top: 12px; left: -8px; } .spot6 { top: 40px; left: 40px; } .spot7 { top: 80px; left: 18px; } .spot8 { top: 35px; left: 8px; } .antenna { height: 2px; width: 40px; background-color: black; border-radius: 50%; z-index: -1; } .antenna1 { position: absolute; left: 20px; transform: rotate(40deg); top: 0px; } .antenna2 { position: absolute; left: 40px; transform: rotate(140deg); top: 0px; } .eyes { position: absolute; heig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0