css实现鹦鹉小鸟在蓝天白云下飞翔动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现鹦鹉小鸟在蓝天白云下飞翔动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="sky"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .sky { height: 100%; width: 100%; background: linear-gradient(to bottom, #ADD8E6 0%, #B5E0EF 100%); overflow: hidden; } .bird, .bird *, .cloud { position: absolute; } .bird:after, .bird:before, .bird *:after, .bird *:before, .cloud:after, .cloud:before { display: block; content: ""; position: absolute; } .bird { position: absolute; top: 40%; left: 50%; z-index: 5; -webkit-animation: bird-movement-xy 20s linear infinite alternate both, bird-movement-z 50s linear infinite alternate both; animation: bird-movement-xy 20s linear infinite alternate both, bird-movement-z 50s linear infinite alternate both; } .b-body { top: 0; right: 0; border-top: 55px solid transparent; border-bottom: 25px solid transparent; border-left: 30px solid #5A5A5A; transform: rotate(-90deg); } .b-body:after { top: -55px; right: 30px; border-top: 55px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #75BF75; transform: rotate(180deg); } .b-wings:before { top: 54px; right: -51px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 50px solid #5A5A5A; transform: rotateZ(90deg) rotateY(90deg); -webkit-animation: wing-movement-top 0.8s infinite linear both; animation: wing-movement-top 0.8s infinite linear both; transform-origin: 0% 0%; } .b-wings:after { top: 56px; right: -11px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 50px solid #A9A9A9; transform: rotateZ(-90deg) rotateY(90deg); -webkit-animation: wing-movement-bottom 0.8s infinite linear both; animation: wing-movement-bottom 0.8s infinite linear both; transform-origin: 0% 0%; } .b-details { top: 39px; right: -13px; border-top: 0px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #FFFF43; transform: rotate(50deg); } .b-details:after { top: 8px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background-color: #2D2D2D; } .b-beak { top: 43px; right: -26px; border-top: 0px solid transparent; border-bottom: 11px solid transparent; border-left: 13px solid gray; transform: rotate(-90deg); } .b-beak:after { top: 3px; right: 10px; border-top: 0px solid transparent; border-bottom: 5px solid transparent; border-left: 11px solid #A9A9A9; transform: rotate(90deg); } .b-back { top: 39px; right: 55px; border-top: 39px solid transparent; border-bottom: 15px solid transparent; border-left: 10px solid #5A5A5A; transform: rotate(-130deg); } .b-back:after { top: -43px; right: 10px; border-top: 43px solid transparent; border-bottom: 11px solid transparent; border-left: 9px solid #75BF75; transform: scale(-1, 1); } .cloud { width: 35px; height: 11px; background-color: #fff; border-radius: 100px; box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05); opacity: 1; } .cloud:after, .cloud:before { background-color: #fff; } .cloud:after { width: 10px; height: 10px; border-radius: 50%; top: -54%; left: 14%; transform: rotate(-25deg); } .cloud:before { width: 20px; height: 20px; border-radius: 50%; top: -90%; right: 10%; } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0