纯css加svg实现一个飞机布局
代码语言:html
所属分类:布局界面
代码描述:纯css加svg实现一个飞机布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; overflow: hidden; } div, img { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } img { left: 51.5%; width: 750px; opacity: 0.5; } .background { width: 110%; height: 110%; } .landscape { width: 110%; height: 110%; background-image: linear-gradient( to top, transparent 49%, white 50%, black 50%, black calc(50% + 1px), rgb(68, 40, 18) calc(50% + 1px), rgb(143, 77, 26) 51%, black 51%, black calc(51% + 1px), rgb(84, 160, 52) calc(51% + 1px), rgb(84, 160, 52) 53%, black 53%, black calc(53% + 1px), transparent calc(53% + 1px) ), linear-gradient( to top, rgb(0, 32, 80) 0%, rgb(0, 139, 190) 50%, rgb(147, 228, 255) 50%, rgb(27, 156, 255) 100% ); background-repeat: no-repeat; background-size: 100% 400px, 100% 100%; background-position: center; filter: url(#landscape); } .sizer { width: 600px; height: 400px; } .airplane { width: 100%; height: 100%; } .fin { top: 30%; width: 2%; height: 30%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border: 1px solid black; background-color: rgb(96,49,65); background-image: linear-gradient( to left, rgb(96,49,65) 40%, rgba(190, 113, 122, 0.5) 40%, rgba(190, 113, 122, 0.5) 60%, rgb(96,49,65) 60% ); } .tail { top: 38%; left: 38%; width: 20%; padding-top: 1.5%; border: 1px solid black; border-radius: 10% 0% 0% 100%; background-color: rgb(96,49,65); transform: rotateZ(5deg) translate(-50%, -50%); box-shadow: inset 0p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0