网址大全有哪些,关键词优化怎么弄,湖南衡阳网站建设,移动互联网技术网站老规矩先上图 为什么今天会想起来整这个呢?这是因为和我朋友吵架, 就是关于这个效果的,就是这个 卡片懸停毛玻璃效果,
我朋友认为纯css也能写,
我则坦言他就是在放狗屁,这种跟随鼠标的3D效果要怎么可能能用纯css写,
然后吵着吵着发现,欸,好像真能用css写哦,我以前还写过这种…老规矩先上图 为什么今天会想起来整这个呢?这是因为和我朋友吵架, 就是关于这个效果的,就是这个 卡片懸停毛玻璃效果,
我朋友认为纯css也能写,
我则坦言他就是在放狗屁,这种跟随鼠标的3D效果要怎么可能能用纯css写,
然后吵着吵着发现,欸,好像真能用css写哦,我以前还写过这种类似的,就是这个取巧视觉欺诈——纯css互动小飞机
然后我就来自己扇自己的脸了
原理在小飞机那写了,所以这里就不再赘述了
遵循开源精神,源码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title纯css跟随鼠标倾斜/titlestylefont-face {font-family: Fredoka One;font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/fredokaone/v14/k3kUo8kEI-tA1RRcTZGmTlHGCac.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}*,:after,:before {padding: 0;margin: 0 auto;box-sizing: border-box;}body {background-color: #000;height: 100vh;display: grid;grid-template: repeat(15, 1fr)/repeat(15, 1fr);overflow: hidden}.cell {width: 100%;height: 100%;z-index: 2}.cell:nth-child(15n1):hover~.content {--positionX: 0}.cell:nth-child(n1):nth-child(-n15):hover~.content {--positionY: 0}.cell:nth-child(15n2):hover~.content {--positionX: 1}.cell:nth-child(n16):nth-child(-n30):hover~.content {--positionY: 1}.cell:nth-child(15n3):hover~.content {--positionX: 2}.cell:nth-child(n31):nth-child(-n45):hover~.content {--positionY: 2}.cell:nth-child(15n4):hover~.content {--positionX: 3}.cell:nth-child(n46):nth-child(-n60):hover~.content {--positionY: 3}.cell:nth-child(15n5):hover~.content {--positionX: 4}.cell:nth-child(n61):nth-child(-n75):hover~.content {--positionY: 4}.cell:nth-child(15n6):hover~.content {--positionX: 5}.cell:nth-child(n76):nth-child(-n90):hover~.content {--positionY: 5}.cell:nth-child(15n7):hover~.content {--positionX: 6}.cell:nth-child(n91):nth-child(-n105):hover~.content {--positionY: 6}.cell:nth-child(15n8):hover~.content {--positionX: 7}.cell:nth-child(n106):nth-child(-n120):hover~.content {--positionY: 7}.cell:nth-child(15n9):hover~.content {--positionX: 8}.cell:nth-child(n121):nth-child(-n135):hover~.content {--positionY: 8}.cell:nth-child(15n10):hover~.content {--positionX: 9}.cell:nth-child(n136):nth-child(-n150):hover~.content {--positionY: 9}.cell:nth-child(15n11):hover~.content {--positionX: 10}.cell:nth-child(n151):nth-child(-n165):hover~.content {--positionY: 10}.cell:nth-child(15n12):hover~.content {--positionX: 11}.cell:nth-child(n166):nth-child(-n180):hover~.content {--positionY: 11}.cell:nth-child(15n13):hover~.content {--positionX: 12}.cell:nth-child(n181):nth-child(-n195):hover~.content {--positionY: 12}.cell:nth-child(15n14):hover~.content {--positionX: 13}.cell:nth-child(n196):nth-child(-n210):hover~.content {--positionY: 13}.cell:nth-child(15n15):hover~.content {--positionX: 14}.cell:nth-child(n211):nth-child(-n225):hover~.content {--positionY: 14}.content {--positionX: 7;--positionY: 7;top: 0;right: 0;bottom: 0;left: 0;display: flex;justify-content: center;align-items: center}.content,.css {position: absolute}.css {font-family: Fredoka One, cursive;top: 50%;left: 50%;animation: color 3s linear infinite;text-shadow: 0 0 10px #000a;transition: all .5s}.css:first-child {font-size: 100px;animation-delay: 0s;opacity: .1;transform: translateX(calc(-50% - (var(--positionX) - 7)*21px)) translateY(calc(-50% - (var(--positionY) - 7)*21px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(2) {font-size: 110px;animation-delay: -.3s;opacity: .2;transform: translateX(calc(-50% - (var(--positionX) - 7)*18px)) translateY(calc(-50% - (var(--positionY) - 7)*18px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(3) {font-size: 120px;animation-delay: -.6s;opacity: .3;transform: translateX(calc(-50% - (var(--positionX) - 7)*15px)) translateY(calc(-50% - (var(--positionY) - 7)*15px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(4) {font-size: 130px;animation-delay: -.9s;opacity: .4;transform: translateX(calc(-50% - (var(--positionX) - 7)*12px)) translateY(calc(-50% - (var(--positionY) - 7)*12px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(5) {font-size: 140px;animation-delay: -1.2s;opacity: .5;transform: translateX(calc(-50% - (var(--positionX) - 7)*9px)) translateY(calc(-50% - (var(--positionY) - 7)*9px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(6) {font-size: 150px;animation-delay: -1.5s;opacity: .6;transform: translateX(calc(-50% - (var(--positionX) - 7)*6px)) translateY(calc(-50% - (var(--positionY) - 7)*6px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(7) {font-size: 160px;animation-delay: -1.8s;opacity: .7;transform: translateX(calc(-50% - (var(--positionX) - 7)*3px)) translateY(calc(-50% - (var(--positionY) - 7)*3px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(8) {font-size: 170px;animation-delay: -2.1s;opacity: .8;transform: translateX(calc(-50% - (var(--positionX) - 7)*0px)) translateY(calc(-50% - (var(--positionY) - 7)*0px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(9) {font-size: 180px;animation-delay: -2.4s;opacity: .9;transform: translateX(calc(-50% - (var(--positionX) - 7)*-3px)) translateY(calc(-50% - (var(--positionY) - 7)*-3px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}.css:nth-child(10) {font-size: 190px;animation-delay: -2.7s;opacity: 1;transform: translateX(calc(-50% - (var(--positionX) - 7)*-6px)) translateY(calc(-50% - (var(--positionY) - 7)*-6px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))}keyframes color {0% {color: #ef8f8f}10% {color: #efc98f}20% {color: #dcef8f}30% {color: #a3ef8f}40% {color: #8fefb6}50% {color: #8fefef}60% {color: #8fb6ef}70% {color: #a38fef}80% {color: #dc8fef}90% {color: #ef8fc9}to {color: #ef8f8f}}/style
/headbodydiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcontentdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/divdiv classcssQayrup/div/div
/body/html
