css布局实现一个蝴蝶展翅飞行动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现一个蝴蝶展翅飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { position: relative; z-index: 1; height: 100vh; } .butterfly { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: flutter 0.3s infinite; width: 345px; height: 215px; } .butterfly .body { position: absolute; z-index: 3; top: 65px; left: 50%; transform: translateX(-50%); margin-top: 25px; width: 28px; height: 80px; border-radius: 30% 30% 50% 50%; background: #231f1d; box-shadow: 2px 2px 8px #000; } .butterfly .body:after { content: ""; position: absolute; top: 60px; left: 3px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 38px solid #231f1d; } .butterfly .body .head { position: absolute; z-index: 4; top: -25px; left: 50%; width: 30px; height: 30px; transform: translateX(-50%); background: #eeaf9c; border-radius: 30px 30px 50px 50px; background: repeating-linear-gradient(90deg, #231f1d, #231f1d 2px, #372f23 2px, #372f23 4px); box-shadow: 2px 2px 8px #000; } .butterfly .body .head:before, .butterfly .body .head:after { content: ""; position: absolute; top: -45px; right: 15px; width: 100px; height: 90px; border: solid 1px #372f23; border-color: #372f23 transparent transparent transparent; border-radius: 50%/50px 50px 0 0; transform: rotate(60deg); } .butterfly .body .head:after { right: auto; left: 15px; transform: rotate(-60deg); } .butterfly .wing { position: absolute; width: 130px; height: 120px; box-shadow: 2px 2px 8px #000; } .butterfly .wing:after { content: ""; position: absolute; top: 53px; left: -63px; width: 0; height: 0; border-left: 58px solid transparent; border-right: 41px solid transparent; border-top: 99px solid mediumpurple; transform: rotate(57deg); } .butterfly .wing i, .butterfly .wing i:before, .butterfly .wing i:after { z-index: 3; position: absolute; width: 60px; height: 10px; background: purple; border-radius: 50%; } .butterfly .wing.top { z-index: 2; top: 0; left: 5px; border-radius: 26% 47% 31% 98%; transform-origin: bottom right 0; transform: rotate(-10deg) rotate3d(0, 1, 0, 10deg); animation: flutter-top 0.3s infinite; background: linear-gradient(309deg, mediumpurple 0%, mediumpurple 30%, purple 100%); } .butterfly .wing.top:after { left: auto; right: -63px; transform: rotate(-57deg); border-left: 41px solid transparent; border-right: 58px solid transparent; } .butterfly .wing.top i { top: 70%; left: 60%; transform: translateY(-50%) rotate(30deg); } .butterfly .wing.top i:before { content: ""; top: -24px; left: -6px; transform: rotate(20deg); } .butterfly .wing.top i:after { content: ""; top: 24px; left: -3px; transform: rotate(-20deg); } .butterfly .wing.top i:last-child { top: 34%; left: 14%; transform: translateY(-50%) rotate(39deg); } .butterfly .wing.top i:last-child:before { top: -24px; left: 20px; transform: rotate(20deg); } .butterfly .wing.top i:last-child:after { top: 24px; left: 20px; transform: rotate(-20deg); } .butterfly .wing.right { top: 0; right: 5px; z-index: 2; border-radius: 47% 26% 98% 31%; transform: rotate(10deg) rotate3d(0, 1, 0, -10deg); transform-origin: bottom left 0; animation: flutter-right 0.3s infinite; background: linear-gradient(-309deg, mediumpurple 0%, mediumpurple 30%, purple 100%); } .butterfly .wing.right i { top: 70%; left: auto; right: 60%; transform: translateY(-50%) rotate(-30deg); } .butterfly .wing.right i:before { content: ""; top: -24px; left: 6px; transform: rotate(-20deg); } .butterfly .wing.right i:after { content: ""; top: 24px; left: 3px; transform: rotate(20deg); } .butterfly .wing.right i:last-child { top: 34%; right: 14%; transform: translateY(-50%) rotate(-39deg); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0