css布局一个软盘效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局一个软盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #fff; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .diskwrap { position: relative; display: flex; justify-content: center; align-items: center; filter: drop-shadow(1vmin 1vmin 1vmin #A19882); border-bottom-right-radius: 3%; } .disk { position: absolute; width: 40vmin; height: 42vmin; background: #000; border-radius: 3%; clip-path: polygon(85% 0, 100% 16%, 100% 100%, 0 100%, 0 0); } .disk::before { content: ""; position: absolute; right: 9vmin; width: 26vmin; height: 13.5vmin; opacity: .35; background: #000; z-index: 1; } .disk::after { content: ""; position: fixed; width: 40vmin; height: 42vmin; opacity: .35; border-radius: 3%; } .chip { position: absolute; right: 9vmin; width: 20vmin; height: 13vmin; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(220,220,220,1) 79%); border-bottom-left-radius: 5%; border-bottom-right-radius: 5%; z-index: 1; } .chip::before { content: ""; position: absolute; width: 5.5vmin; height: 10.5vmin; background: #000; top: 1.5vmin; right: 3vmin; opacity: .9; border-radius: 3%; } .arrow { position: absolute; bac.........完整代码请登录后点击上方下载按钮下载查看
网友评论0