<div class="radgrad-wrapper">
<div class="radgrad-color">
<div class="shape-text-clip-wrapper">
<span class="shape-text-clip">
<svg height="80%" width="80%" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<defs>
<clipPath id="svgTextClip">
<text width="100%" height="100%" x="62%" y="66%" text-anchor="middle" alignment-baseline="middle" textLength="100%" font-family="Arial" font-size="1em" font-weight="900" style="">
鼠标经过效果
</text>
</clipPath>
</defs>
</svg>
</span>
</div>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
:root {
--midnight: #232A31;
--dullwhite: #F2F7FA;
--titanium: #DDDDDD;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content:center;
align-items: center;
background: #ffe;
}
.radgrad-wrapper {
--size: 300px;
--rotateHueDeg: 253deg;
--xMouse: 195.000px;
--yMouse: 295.000px;
position: relative;
width: 100%;
max-width: var(--size);
height: 100%;
max-height: var(--size);
padding: 0;
margin: 20px auto;
overflow: hidden;
}
.radgrad-color,
.radgrad-color:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 灰底 */
background:
linear-gradient(
180deg,
hsl(0, 0%, 16%), /* 浅黑 */
hsl(0, 0%, 6%) /* 深黑 */
);
}
.radgrad-color:before {
}
.shape-text-clip-wrapper {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter:
drop-shadow(0px 2px 1px rgba(255, 255, 255, 1));
filter:
drop-shadow(.4px 0px 0px rgba(220, 220, 220, .5))
drop-shadow(-.1px .8px .3px rgba(220, 220, 220, .8))
drop-shadow(-1px -.3px .5px rgba(0, 0, 0, .5))
drop-shadow(1px 1px .5px rgba(0, 0, 0, .4))
drop-shadow(0 -1px 2px rgba(0, 0, 0, .48));
}
.shape-text-clip {
content: "";
position: absolute;
width: 120%;
height: 140%;
/*
top: calc(var(--yMouse) - 50%);
left: calc(var(--xMouse) - 50%);
*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background 30ms linear;
background:
radial-gradient(
circle at 50% 50%,
/* gray base */
hsl(0deg 0% 27.45%) 12%,
/* purple */
hsl(262.57deg 55.8% 64.51%),
/* blue */
hsl(209.64deg 47.98% 66.08%),
/* green */
hsl(134.44deg 31.03% 65.88%),
/* yellow */
hsl(48.36deg 36.22% 63.73%),
/* orange */
hsl(25.36deg 52.43% 63.73%),
/* red */
hsl(5.51deg 43.75% 56.08%),
/* gray base */
hsl(0deg 0% 27.45%) 75%
);
background:
radial-gradient(
circle at 50% 50%,
/* gray base */
hsl(0, 3%, 29%) 12%,
/* purple */
hsl(235, 31%, 65%),
/* purple */
hsl(235, 31%, 65%),
/* blue */
hsl(196.84deg 77.03% 70.98%),
/* green */
hsl(125, 35%, 72%),
/* yellow */
hsl(52, 94%, 82%),
/* orange */
hsl(13, 78%, 73%),
/* pink */
hsl(336, 68%, 78%),
/* gray base */
hsl(0, 3%, 29%) 75%
);
background:
conic-gradient(
from var(--rotateHueDeg) at var(--xMouse) var(--yMouse),
/* gray base */
hsl(0, 3%, 29%),
rgba(100,193,250,1),
rgba(144,139,225,1),
rgba(247,128,177,1),
rgba(252,188,153,1),
rgba(160,248,167,1),
rgba(97,236,210,1),
/* gray base */
hsl(0, 3%, 29%)
);
background:
radial-gradient(
circle at calc((var(--xMouse) + 8%)) calc((var(--yMouse) + 8%)),
/* gray base */
transparent 15%,
rgba(100,193,250,1), /* blue */
rgba(144,139,225,1), /* purple */
rgba(247,128,177,1), /* pink */
rgba(252,188,153,1), /* orange */
rgba(160,248,167,1), /* green */
rgba(97,236,210,1), /* aqua */
/* gray base */
transparent 70%
),
linear-gradient(
/* gray base */
hsl(0, 3%, 29%),
/* gray base */
hsl(0, 3%, 29%)
);
/* SB PLAYING HOLO */
background:
radial-gradient(
circle at calc((var(--xMouse) + 8%)) calc((var(--yMouse) + 8%)),
/* gray base */
transparent 37%,
rgba(65,150,252,1),
rgba(31,219,251,1),
rgba(155,238,166,1),
rgba(255,246,88,1),
rgba(250,161,78,1),
rgba(239,87,101,1),
rgba(237,85,142,1),
rgba(153,97,213,1),
rgba(65,94,252,1),
/* gray base */
transparent 70%
),
linear-gradient(
/* gray base */
hsl(0, 4.5%, 61%),
/* gray base */
hsl(0, 4.5%, 61%)
),
radial-gradient(
circle at calc((var(--xMouse) + 8%)) calc((var(--yMouse) + 8%)),
/* gray base */
transparent 37%,
rgba(65,150,252,1),
rgba(31,219,251,1),
rgba(155,238,166,1),
rgba(255,246,88,1),
rgba(250,161,78,1),
rgba(239,87,101,1),
rgba(237,85,142,1),
rgba(153,97,213,1),
rgba(65,94,252,1),
/* gray base */
transparent 70%
),
linear-gradient(
/* gray base */
hsl(0, 3%, 29%),
/* gray base */
hsl(0, 3%, 29%)
);
background-position: center, center, center, center;
background-size: 70% 70%, cover, 70% 70%, cover;
background-blend-mode: color-dodge, color-burn, color-dodge, normal;
background-repeat: repeat, no-repeat, repeat, no-repeat;
font-size: 3em;
font-weight: bold;
font-family: arial;
-webkit-text-fill-color: transparent;
color: transparent;
display: grid;
align-content: center;
align-items: center;
text-align: center;
-webkit-filter: saturate(105%) blur(18px) contrast(1.1);
filter: saturate(105%) blur(18px) contrast(1.1);
object-fit: cover;
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
-webkit-clip-path: url(#svgTextClip);
clip-path: url(#svgTextClip);
}
.clip-text {
font-family: 'Arial';
text-transform: uppercase;
font-size: 3em !important;
background-color: white;
color: transparent;
font-weight: bold;
margin: 0 auto;
padding: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
filter: drop-shadow(0px 8px 2px rgba(255, 255, 255, 1));
}
JS
格式化
const holoRotationContainers = document.querySelectorAll('.radgrad-wrapper');
holoRotationContainers.forEach(holoRotationContainer => {
holoRotationContainer.addEventListener('pointermove', function(e) {
const holoRotationContainer = e.currentTarget.getBoundingClientRect();
// get half of the width and height
const w = holoRotationContainer.width / 2;
const h = holoRotationContainer.height / 2;
// get x, y mouse coordinates
const x = e.pageX - e.currentTarget.offsetLeft; // x position within the element.
const y = e.pageY - e.currentTarget.offsetTop; // y position within the element.
// get delta values
const deltaX = w - x;
const deltaY = h - y;
// convert mouse position to radians
const rad = Math.atan2(deltaY, deltaX);
// convert to degrees and round outerHeight
let deg = Math.round(rad * (180 / Math.PI) );
// 360 deg variation
if( deg < 0 ) {
deg = (deg + 360) % 360;
}
this.style.setProperty('--rotateHueDeg', deg + 'deg');
this.style.setProperty('--xMouse', (x).toFixed(3) + 'px');
this.style.setProperty('--yMouse', (y).toFixed(3) + 'px');
});
});