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-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0