div+css实现磨砂中性图标悬浮动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现磨砂中性图标悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在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"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.3s; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); } body, button { color: var(--fg); font: 1em/1.5 Nunito, sans-serif; } body { background-color: var(--bg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .icon-btns { display: grid; grid-gap: 3em; grid-template-columns: repeat(2,1fr); margin: auto; padding: 3em 0; } .icon-btn { background-color: transparent; outline: transparent; position: relative; width: 4.5em; height: 4.5em; perspective: 24em; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; } .icon-btn__back, .icon-btn__front, .icon-btn__label { transition: opacity var(--trans-dur) cubic-bezier(0.83,0,0.17,1), transform var(--trans-dur) cubic-bezier(0.83,0,0.17,1); } .icon-btn__back, .icon-btn__front { border-radius: 1.25em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .icon-btn__back { background: linear-gradient(hsl(var(--hue),10%,50%),hsl(208,10%,50%)); box-shadow: 0.5em -0.5em 0.75em hsla(var(--hue),10%,10%,0.15); display: block; transform: rotate(15deg); transform-origin: 100% 100%; } .icon-btn__front { background-color: hsla(0,0%,100%,0.3); box-shadow: 0 0 0 0.125em hsla(0,0%,100%,0.3) inset; backdrop-filter: blur(0.75em); -webkit-backdrop-filter: blur(0.75em); display: flex; transform-origin: 80% 50%; } .icon-btn--blue .icon-btn__back { background: linear-gradient(hsl(var(--hue),90%,50%),hsl(208,90%,50%)); } .icon-btn--green .icon-btn__back { background: linear-gradient(hsl(123,90%,40%),hsl(108,90%,40%)); } .icon-btn--indigo .icon-btn__back { background: linear-gradient(hsl(253,90%,50%),hsl(238,90%,50%)); } .icon-btn--purple .icon-btn__back { background: linear-gradient(hsl(283,90%,50%),hsl(268,90%,50%)); } .icon-btn--red .icon-btn__back { background: linear-gradient(hsl(3,90%,50%),hsl(348,90%,50%)); } .icon-btn--orange .icon-btn__back { background: linear-gradient(hsl(43,90%,50%),hsl(28,90%,50%)); } .icon-btn__icon { margin: auto; width: 1.5em; height: 1.5em; } .icon-btn__label { font-size: 0.75em; line-height: 2; opacity: 0; position: absolute; top: 100%; right: 0; left: 0; transform: translateY(0); } .icon-btn:focus-visible .icon-btn__back, .icon-btn:hover .icon-btn__back { transform: rotate(22.5deg); } .icon-btn:focus-visible .icon-btn__front, .icon-btn:hover .icon-btn__front { transform: translateZ(3em) rotateX(20deg) rotateY(20deg); } .icon-btn:focus-visible .icon-btn__label, .icon-btn:hover .icon-btn__label { opacity: 1; transform: translateY(20%); } .sprites { display: block; position: fixed; transform: translateY(-100%); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,30%); --fg: hsl(var(--hue),10%,90%); } } /* Beyond mobile */ @media (min-width: 768px) { .icon-btns { grid-template-columns: repeat(3,1fr); } } </style> </head> <body > <svg class="sprites" display="none"> <defs> <linearGradient id="icon-grad" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#fff" /> <stop offset="100%" stop-color="#222" /> </linearGradient> <mask id="icon-mask"> <rect x="0" y="0" width="24" height="24" fill="url(#icon-grad)" /> </mask> <symbol id="files" viewBox="0 0 24 24"> <g fill="hsl(0,0%,100%)" mask="url(#icon-mask)"> <path d="m2.003,3h3.997c1.105,0,2,.895,2,2h0s14.005,0,14.005,0c1.102,0,1.995.893,1.995,1.995v1.005H0v-2.997c0-1.106.897-2.003,2.003-2.003Z"/> <path d="m22.005,21H1.996c-1.102,0-1.996-.893-1.996-1.996v-9.004l24-.172v9.177c0,1.102-.893,1.995-1.995,1.995Z"/> </g> </symbol> <symbol id="books" viewBox="0 0 24 24"> <g fill="hsl(0,0%,100%)" mask="url(#icon-mask)"> <path d="m14.113,22.696c-.356.389-1.022.176-1.022-.351V3.287c1.091-1.091,2.277-1.558,3.509-1.83,2.182-.481,4.125-.377,5.314-.222,1.317.171,2.087,1.342,2.087,2.495v14.357c0,1.553-1.296,2.777-2.802,2.727-1.246-.041-2.975.003-4.541.382-1.195.289-1.954.856-2.544,1.501Z"/> <path d="m9.887,22.696c.356.389,1.022.176,1.022-.351V3.287c-1.091-1.091-2.277-1.558-3.509-1.83-2.182-.481-4.125-.377-5.314-.222C.77,1.406,0,2.577,0,3.729v14.357c0,1.553,1.296,2.777,2.802,2.727,1.246-.041,2.975.003,4.541.382,1.194.289,1.954.856,2.544,1.501Z"/> </g> </symbol> <symbol id="graph" viewBox="0 0 24 24">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0