css布局实现风扇效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Lato&display=swap" rel="stylesheet"> <style> @charset "UTF-8";body,html { box-sizing: border-box } body { display: -webkit-box; display: flex; display: -ms-flex; -webkit-box-flex: 1; flex: 1 0 auto; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; background: radial-gradient(#111,#000) } .frame { z-index: 10; width: 225px; height: 520px; background: -webkit-gradient(linear,left bottom, left top,color-stop(20%, rgba(85,85,85,.6)),color-stop(30%, rgba(136,136,136,.6)),color-stop(40%, rgba(102,102,102,.6)),color-stop(47%, rgba(102,102,102,.6)),color-stop(80%, rgba(170,170,170,.6)),to(rgba(51,51,51,.8))),url(https://image.freepik.com/free-vector/abstract-colorful-pattern-shape-design-background_38782-954.jpg) 50%; background: linear-gradient(totop,rgba(85,85,85,.6) 20%,rgba(136,136,136,.6) 30%,rgba(102,102,102,.6) 40%,rgba(102,102,102,.6) 47%,rgba(170,170,170,.6) 80%,rgba(51,51,51,.8)),url(https://image.freepik.com/free-vector/abstract-colorful-pattern-shape-design-background_38782-954.jpg) 50%; -webkit-filter: contrast(1.1); filter: contrast(1.1); border-radius: 4px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; box-shadow: inset 0 0 4px; z-index: -1; -webkit-user-select: none!important; -moz-user-select: none!important; -ms-user-select: none!important; user-select: none!important } .frame::before { position: absolute; content: ''; height: 58%; width: 100%; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 40px; background: linear-gradient(75deg,rgba(51,51,51,.7),rgba(17,17,17,.7)),rgba(51,51,51,.8); box-shadow: 0 5px 0 rgba(255,255,255,.2),0 -5px 0 rgba(255,255,255,.2),inset 0 0 5px rgba(0,0,0,.5) } .frame::after { position: absolute; content: 'Re-designed and Code by AMAN. RTX SPECIAL EDITION'; font: 6px Lato; right: -1px; z-index: -1; bottom: 52%; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); color: rgba(255,255,255,.3) } .io_s { height: 2px; width: 100%; background: #666; position: absolute; bottom: -2px; left: 20px; border-radius: 0 4px 4px 0 } .io_s::before { position: absolute; content: ''; height: 20px; width: 2px; background: inherit; border-radius: 0 0 4px 4px } .io_s .dvi { position: absolute; content: 'A'; width: 40px; height: 11px; left: 62%; bottom: -11px; background: -webkit-gradient(linear,left bottom, left top,from(#666),color-stop(50%, #aaa),color-stop(55%, #666),color-stop(#777),to(#444)); background: linear-gradient(totop,#666,#aaa 50%,#666 55%,#777,#444); bottom: inherit10px; border-radius: 0 0 2px 2px } .io_s .dvi::after,.io_s .dvi::before { border-radius: 0 0 1px 1px; position: absolute; content: ''; height: 10px; width: 6px; background: -webkit-gradient(linear,left top, right top,color-stop(10%, #777),color-stop(25%, #777),color-stop(25%, #555),color-stop(75%, #555),color-stop(75%, #333)); background: linear-gradient(toright,#777 10%,#777 25%,#555 25%,#555 75%,#333 75%) } .io_s .dvi::after { left: -12px } .io_s .dvi::before { right: -12px } .pci { background: -webkit-gradient(linear,left top, right top,color-stop(59%, #222),color-stop(70%, #555),color-stop(72%, transparent)); background: linear-gradient(toright,#222 59%,#555 70%,transparent 72%); position: absolute; right: -16px; z-index: -2; bottom: 17%; width: 1rem; height: 43%; border-radius: 0 5px 5px 0 } .pci::before { position: absolute; content: ''; background: -webkit-gradient(linear,left top, right top,color-stop(59%, #222),color-stop(70%, #555),color-stop(72%, transparent)); background: linear-gradient(toright,#222 59%,#555 70%,transparent 72%); bottom: -23px; right: 2px; height: 14px; width: 14px } .pci::after { background: repeating-linear-gradient(totop,#bda559 0,#6a5811 14%); bottom: -23px; position: absolute; content: ''; height: 14px; right: 0; width: 8px; border-radius: 0 1px 1px 0 } .pci .p { z-index: 1; position: inherit; width: 13px; left: 10px; z-index: 1; border-radius: 0 1px 1px 0 } .pci .p::before { position: absolute; content: ''; background: #111; border-radius: 50px; right: 9px; width: 10px; height: 3.5px; bottom: -3.5px } .pci .p.p1 { height: 10%; bottom: 0; background: repeating-linear-gradient(totop,#bda559 0,#6a5811 14%) } .pci .p.p1::before { display: none } .pci .p.p2 { height: 79%; bottom: 11.8%; background: repeating-linear-gradient(totop,#bda559 98%,#6a5811 100%) } .pci .p.p3 { height: 10%; bottom: 92.5%; left: 8px; width: 12px; background: #a28b41 } .pci .p.p3::before { height: 4px; bottom: -4px; right: 8px } #aman { -webkit-filter: sepia(10); filter: sepia(10); text-shadow: 0 .9px .2px rgba(0,0,0,.2); background: linear-gradient(125deg,#ddd 10%,#777 30%,#999 40%,#999 50%,#eee 60%,#adadad 80%,#666); color: transparent; background-clip: text; -webkit-background-clip: text; display: -webkit-inline-box; display: inline-flex; font: bold 1.7rem Lato; position: relative; z-index: 1!important; -webkit-animation: shimmer 2s infinite alternate; animation: shimmer 2s infinite alternate } @-webkit-keyframes shimmer { from { background-position: -150% } to { background-position: 100% }} @keyframes shimmer { from { background-position: -150% } to { background-position: 100% }} .fan { -webkit-box-align: center; align-items: center; background: #555; border-radius: 50%; box-shadow: 0 10px 8px rgba(0,0,0,.6),0 -2px 8px rgba(128,128,128,.5); display: -webkit-inline-box; display: inline-flex; -webkit-box-pack: center; justify-content: center; position: relative } .fan1 { -webkit-transform: scale(.5) translateY(41%); transform: scale(.5) translateY(41%) } .fan2 { -webkit-transform: scale(.5) translateY(-41%); transform: scale(.5) translateY(-41%) } .b { box-shadow: 0 0 0 5px #585016; height: 400px; width: 400px; margin: 0 auto; position: relative; border: .5rem solid #ecd693; border-radius: 50%; overflow: hidden } .bl { display: block; height: 100%; left: 50%; padding-bottom: 1rem; -webkit-perspective: 100px; perspective: 100px; position: a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0