div+css布局实现昆虫效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现昆虫效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ff6a70; } html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; position: absolute; } .insect { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; } .body { top: 50%; left: 50%; background-color: #ffb6b9; width: 90px; height: 90px; border-radius: 50%; transform: translate(-50%, -50%) scale(3); z-index: 2; } .body:after, .wing:after, .wing:before, .wing.top:after, .wing.top:before { content: " "; width: 45px; height: 90px; background-color: #bbded6; border-bottom-right-radius: 90px; border-top-right-radius: 90px; right: 0; } .head { width: 170px; height: 170px; background-color: #17223b; border-radius: 50%; left: 50%; transform: translateX(-50%); z-index: 0; } .antenna { width: 100px; height: 50px; border-width: 4px 4px 0 0; border-style: solid; border-color: #99cdc1; border-top-right-radius: 20px; right: 60%; bottom: 90%; } .antenna.right { transform: rotateY(180deg); right: auto; left: 60%; } .antenna-turn { content: " "; width: 50px; height: 30px; bottom: 100%; right: 100%; border-width: 0 0 4px 4px; border-style: solid; border-color: #99cdc1; border-bottom-left-radius: 20px; } .antenna-turn:after { content: " "; width: 15px; height: 15px; border-radius: 50%; background-color: #96C120; bottom: 100%; left: -10px; } .wing { left: 50%; transform: translateX(-50%); display: block; width: 250px; height: 300px; top: 143px; z-index: 1; } .wing:after { background-color: #f4f0e6; right: 0; top: 0; transform: scaleX(3) scaleY(3.5) rotateZ(-20deg); } .wing:before { background-color: #f4f0e6; transform: scaleX(3) scaleY(3.5) rotateY(180deg) rotateZ(-20deg); left: 0; top: 0; } .wing.top { width: 296px; top: 134px; z-index: 3; } .wing.top:after { background-color: #323133; opacity: 0.1; right: 0; top: 0; transform: scaleX(3.2) scaleY(3.7) rotateZ(-25deg); } .wing.top:before { background-color: #323133; opacity: 0.1; transform: scaleX(3.2) scaleY(3.7) rotateY(180deg) rotateZ(-25deg); left: 0; top: 0; } .circles { width: 35%; height: 60%; top: 50%; transform: translateY(-50%); left: 5px; } .circles.right { transform: translateY(-50%) rotateY(180deg); right: 5px; left: auto; z-index: 2; } .circle { width: 15px; height: 15px; border-ra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0