css布局实现adobe reader图标效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现adobe reader图标效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: #e3e4e8; font: 1em/1.5 sans-serif; height: 100vh; display: grid; place-items: center; } .l { background: linear-gradient(#fa200000,#fa20007f), #000; border-radius: 2.2em; box-shadow: 0 0.2em 0.2em #0000007f; width: 15em; height: 15em; } .l__wrap, .l__shadow { width: 100%; height: 100%; } .l__wrap { position: relative; transform: translate(-0.4em,0.4em) rotate(-15deg); } .l__shadow, .l__b-, .l__c-, .l__d-, .l__a, .l__b, .l__c, .l__d1, .l__d2, .l__e, .l__f { position: absolute; } .l__shadow { filter: drop-shadow(0.25em 0.5em 0.5em #fa20007f); top: 0; left: 0; } .l__b-, .l__c-, .l__a, .l__b, .l__c { border-radius: 50%; } .l__b-, .l__c-, .l__a, .l__b, .l__c { top: calc(50% - 1.4em); left: calc(50% - 1.4em); width: 2.8em; height: 2.8em; } .l__b-, .l__c-, .l__d- { background: #fa2000; } .l__d-, .l__d1, .l__d2, .l__e, .l__f { top: calc(50% - 0.7em); left: calc(50% - 3.5em); width: 7em; height: 1.4em; } .l__a { background: conic-gradient(#feffc2 45deg,#feffc200 270deg), radial-gradient(#fa200000 1em,#fa2000dd), conic-gradient(#feffc2 45deg,#fce86a 270deg); transform: translateY(-4em) rotate(180deg); } .l__b-, .l__b { transform: rotate(120deg) translateY(-4em) rotate(-120deg); } .l__b { background: radial-gradient(#fa200000 1em,#fa2000), conic-gradient(#fcea72 135deg,#fa2000 340deg); } .l__c-, .l__c { transform: rotate(240deg) translateY(-4em) rotate(-240deg); } .l__c { background: conic-gradient(#feffc200 190deg,#feffc2 360deg), radial-gradient(#fa200000 1em,#f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0