建设事业单位网站多少钱,最好网站开发公司电话,橙色网站配色,网页设计教程新加坡校友会前言#xff1a;效果是鼠标移入空白区域#xff0c;边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的#xff0c;观看以后是一个实用的小特效。想看的可以平台查询#xff0c;自己也学到了知识。
!DOCTYPE html
html langen
效果是鼠标移入空白区域边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的观看以后是一个实用的小特效。想看的可以平台查询自己也学到了知识。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background: #000;}.card-wrap {display: grid;margin: 0 auto;width: 90%;margin-top: 1em;color: #f0f0f0;grid-template-columns: repeat(3, 1fr);gap: 20px;text-align: center;}.card {aspect-ratio: 4/3;border-radius: 8px;background-color: rgba(255, 255, 255, .1);position: relative;overflow: hidden;}.card .inner {position: absolute;inset: 2px;background-color: #222;border-radius: inherit;display: flex;align-items: center;justify-content: center;z-index: 3;}.card::before {content: ;position: absolute;z-index: 2;top: 0;left: 0;inset: 0;background: radial-gradient(closest-side circle, rgba(255, 255, 255, 0.6) 0%, transparent);border-radius: inherit;transform: translate(var(--x, -1000px), var(--y, -1000px));}/style
/head
bodydiv classcard-wrapdiv classcarddiv classinnerwish you every success/div/divdiv classcarddiv classinnerwish you every success/div/divdiv classcarddiv classinnerwish you every success/div/divdiv classcarddiv classinnerwish you every success/div/divdiv classcarddiv classinnerwish you every success/div/divdiv classcarddiv classinnerwish you every success/div/div/divscriptconst cardWrapEl document.querySelector(.card-wrap)const cardEls document.querySelectorAll(.card)cardWrapEl.onmousemove function (e) {for (const card of cardEls) {// getBoundingClientRect提供了元素的大小及其相对于视口的位置。const react card.getBoundingClientRect()const x e.clientX - react.left - react.width / 2const y e.clientY - react.top - react.height / 2card.style.setProperty(--x, ${x}px)card.style.setProperty(--y, ${y}px)}}/script
/body
/html
