css布局实现一个小鸟钉在电线上效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个小鸟钉在电线上效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html body { margin: 0px; width: 100%; overflow: hidden; background-color: rgba(0, 4, 255, 0.18); } .container { padding-top: 60px; width: 100%; height: 100%; position: relative; } .bird-container { position: relative; width: 500px; height: 500px; margin: auto; } .bird { position: absolute; width: 500px; height: 500px; } .chest { position: absolute; width: 130px; height: 200px; background-color: #fff700; border-radius: 50%; border-top: solid #0475d1 25px; border-right: solid #809fff 30px; top: 200px; left: 150px; transform: rotate(30deg); } .wing { top: 214px; left: 130px; position: absolute; width: 110px; height: 200px; background-color: #0475d1; border-radius: 90% 10% 100% 0%; border-right: solid #004d8c 10px; transform: rotate(10deg); animation-timing-function: ease-in-out; animation: wing 5s infinite; } .head { position: absolute; top: 165px; left: 240px; width: 88px; height: 80px; background-color: #0475d1; border-radius: 50% 50% 0% 0%; transform: rotate(28deg); } .eye { position: absolute; background-color: #852411; width: 14px; height: 14px; border-radius: 50%; top: 20px; left: 40px; animation: eye 5s infinite; } .eye .inner-eye { position: relative; width: 6px; height: 6px; top: 4px; left: 4px; border-radius: 100%; background-color: black; animation: inner-eye 5s infinite; } .beak { position: absolute; } .top-beak { position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 5px solid transparent; border-left: 40px solid #cc6900; top: 200px; left: 320px; z-index: 0; animation: topbeak 2s infinite; } .bottom-beak { position: absolute; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 10px solid transparent; border-left: 40px solid #cc6900; transform: rotate(20deg); z-index: -1; top: 215px; left: 314px; animation: bottombeak 2s infinite; } .leg1 { position: absolute; width: 30px; height: 10px; border-left: solid #3b1a0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0