css布局实现飞机翱翔落日天空效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现飞机翱翔落日天空效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .canvas { width: 566px; height: 353.75px; position: absolute; left: 50%; top: 50%; margin-left: -283px; margin-top: -176.87px; background-image: linear-gradient(#AD4A28, #DD723C, #FC7001, #DCB697, #9BA5AE, #3E5879); overflow: hidden; z-index: -20; border-radius: 4px; } .airplane { width: 60px; height: 45px; position: absolute; top: 20%; left: 25px; } .airplane svg { width: 150px; height: 50px; } .sun { width: 250px; height: 250px; background-image: linear-gradient(to bottom, #ffb100, rgba(224, 114, 54, 0) 50%); position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -125px; border-radius: 50%; z-index: -10; } .clouds { width: 600px; height: 200px; position: absolute; } .cloud { width: 50px; height: 30px; position: absolute; } .cloud:nth-child(1) { left: 130px; top: 90px; z-index: -5; } .cloud:nth-child(1) svg { fill: #c57231; width: 50px; } .cloud:nth-child(2) { left: 110px; top: 142px; } .cloud:nth-child(3) { left: 200px; top: 125px; z-index: -5; } .cloud:nth-child(3) svg { fill: #efc9ac; } .cloud:nth-child(4) { left: 225px; top: 165px; display: none; } .cloud:nth-child(5) { left: 266px; top: 160px; } .cloud:nth-child(5) svg { fill: #eae0d7; } .cloud:nth-child(6) { left: 364px; top: 140px; } .cloud:nth-child(7) { left: 385px; top: 111px; z-index: -5; } .cloud:nth-child(7) svg { fill: #e27c09; } .cloud:nth-child(8) { left: 400px; top: 183px; display: none; } .cloud:nth-child(9) { left: 340px; top: 183px; z-index: -5; } .cloud:nth-child(9) svg { fill: #a29692; } .cloud svg { width: 100px; height: 60px; fill: #fff; } </style> </head> <body > <!-- Keeping the svgs here, but you don't have to :) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0