css布局实现软盘效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现软盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); :root { --background-color: #fff; --diskette-color: #1a62b7; --diskette-metal-color: #c7c9ca; --metal-line-color: rgba(0, 0, 0, 0.04); --diskette-core-color: #bab1ac; --diskette-label-color: #eee; --diskette-label-primary-color: #e62e2e; --diskette-tape-color: #222; --hd-text-color: rgba(0, 0, 0, 0.25); --diskette-metal-pattern: linear-gradient(to bottom, transparent 0 2px, rgba(255, 255, 255, 0.65) 32px 33px, transparent 64px), repeating-linear-gradient( to right, transparent 0 2px, var(--metal-line-color) 2px 3px, transparent 3px 4px, var(--metal-line-color) 4px 5px, transparent 5px 7px, var(--metal-line-color) 7px 8px, transparent 8px 9px, var(--metal-line-color) 9px 11px ); --diskette-label-pattern: linear-gradient(to bottom, var(--diskette-label-primary-color) 0 30px, transparent 30px 100%), repeating-linear-gradient(to bottom, transparent 0 30px, var(--diskette-label-primary-color) 30px 31px); --hd-text-width: 2px; --diskette-size: 300px; --diskette-corner-shape: polygon(0% 0%, 79% 0%, 79% 3%, 80% 3%, 82% 1%, 89% 1%, 89.5% 0%, 94% 0%, 100% 5%, 100% 100%, 0% 100%); } .container { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } .diskette { margin: 1em; width: var(--diskette-size); height: var(--diskette-size); background: var(--diskette-color); border-radius: 5px; -webkit-clip-path: var(--diskette-corner-shape); clip-path: var(--diskette-corner-shape); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset, 4px 4px 1px rgba(0, 0, 0, 0.05) inset; } .diskette .diskette-top { width: 100%; height: 40%; position: relative; } .diskette .diskette-top .hd-zone { position: absolute; right: 24px; width: 24px; height: 24px; color: rgba(255, 255, 255, 0.1); top: 24px; display: flex; } .diskette .diskette-top .hd-zone .h-stick { background: var(--hd-text-color); width: var(--hd-text-width); height: 100%; margin-right: 2px; } .diskette .diskette-top .hd-zone .h-inner-container { display: flex; flex-direction: column; justify-content: space-between; margin-right: 2px; } .diskette .diskette-top .hd-zone .h-square { border: var(--hd-text-width) solid var(--hd-text-color); width: 6px; height: 37%; } .diskette .diskette-top .hd-zone .h-square.up { border-top: 0; } .diskette .diskette-top .hd-zone .h-square.down { border-bottom: 0; } .diskette .diskette-top .hd-zone .d-container { margin-left: 35%; position: absolute; width: 96%; height: 96%; } .diskette .diskette-top .hd-zone .d-container .d-inner-arc, .diskette .diskette-top .hd-zone .d-container .d-external-arc { position: absolute; width: 90%; height: 90%; border: var(--hd-text-width) solid var(--hd-text-color); border-left: 0; border-radius: 50%; -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); } .diskette .diskette-top .hd-zone .d-container .d-inner-arc { width: 75%; height: 65%; transform: translate(0, 3px); -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%); clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%); } .diskette .diskette-top .gap-container { width: 67%; height: 88%; border: 2px solid rgba(0, 0, 0, 0.25); border-top: 0; border-radius: 0 0 15px 15px; transform: translate(15%, 0); display: flex; justify-content: flex-end; } .diskette .diskette-top .gap-container::before { position: absolute; left: 0; content: ""; display: block; background: rgba(255, 255, 255, 0.1); width: 20px; height: 100%; transform: translateX(-3px); border-bottom-left-radius: 15px; -webkit-clip-path: polygon(0 0, 3px 0, 3px 100%, 0 100%); clip-path: polygon(0 0, 3px 0, 3px 100%, 0 100%); } .diskette .diskette-top .gap-container::after { position: absolute; z-index: 5; left: 0; content: ""; display: block; width: 15px; height: 3px; background: var(--background-color); -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); } .diskette .diskette-top:hover .protector { transform: translate(-24%, -2%); position: relative; transition: transform 1s; } .diskette .diskette-top:hover .protector .gap::before { transform: translate(0, 0); transition: transform 1s; } .diskette .diskette-top .protector { width: 80%; height: 100%; background-color: var(--diskette-metal-color); background-image: var(--diskette-metal-pattern); display: flex; justify-content: flex-end; border-radius: 0 0 12px 12px; transform: translate(2%, -2%); transition: transform 0.05s ease-in-out; z-index: 6; } .diskette .diskette-top .protector .gap { width: 25%; height: 80%; background: var(--diskette-color); transform: translate(-50%, 15%); border-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); overflow: hidden; } .diskette .diskette-top .protector .gap::before { position: absolute; width: 100%; height: 100%; content: ""; display: block; background: var(--diskette-tape-color); transform: translate(-42px, 0); transition: transform 0.05s; } .diskette .diskette-bottom { width: 100%; height: 60%; display: flex; justify-content: center; align-items: flex-end; } .diskette .diskette-bottom .lateral { width: 10%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .diskette .diskette-bottom .lateral.left::before { content: "⇧"; display: block; font-size: 28px; color: rgba(0, 0, 0, 0.15); position: absolute; top: 26px; text-shadow: 0 0 1px rgba(0, 0, 0, 0.25); } .diskette .diskette-bottom .lateral .little-gap { width: 50%; height: 7%; background: var(--background-color); margin-bottom: 55%; border-radius: 2px; } .diskette .diskette-bottom .lateral .little-gap.writelock { background: black; } .diskette .diskette-bottom .gap-container { width: 80%; height: 90%; border: 2px solid rgba(0, 0, 0, 0.4); border-bottom: 0; border-radius: 10px 10px 0 0; position: relative; } .diskette .diskette-bottom .gap-container::before { position: absolute; left: 0; content: ""; display: block; background: rgba(255, 255, 255, 0.1); width: 20px; height: 100%; transform: translateX(-3px); border-top-left-radius: 15px; -webkit-clip-path: polygon(0 0, 3px 0, 3px 100%, 0 100%); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0