太仓市建设局网站,不是网站可以用云主机吗,沈阳商城网站建设,小程序注册推广一、背景流动边框 实现原理#xff1a; 用背景进行旋转#xff0c;超出我们想显示的范围则hidden#xff0c;就有以上的效果#xff0c;可以用after或者before元素来实现也可以。
!DOCTYPE html
html langenheadmeta charset 用背景进行旋转超出我们想显示的范围则hidden就有以上的效果可以用after或者before元素来实现也可以。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {position: relative;width: 150px;height: 150px;margin: 100px auto;overflow: hidden;border-radius: 4px;}keyframes rotate {to {transform: rotate(1turn);}}.under {position: relative;width: 0px;height: 0px;border-top: 200px solid yellow;border-right: 200px solid green;border-bottom: 200px solid red;border-left: 200px solid blueviolet;left: -125px;top: -125px;animation: rotate 2s linear infinite;}.box span {position: absolute;top: 0px;margin: 8px;width: 134px;height: 134px;border-radius: 4px;background-size: cover;background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);background-color: white;}keyframes rotate2 {0%{transform: rotate(0turn);}to {transform: rotate(-1turn);}}.box .under2 {position: relative;width: 0px;height: 0px;border-top: 200px solid rgb(0, 255, 13);border-right: 200px solid rgb(45, 218, 203);border-bottom: 200px solid rgb(255, 106, 156);border-left: 200px solid rgb(251, 255, 26);left: -125px;top: -125px;animation: rotate2 2s linear infinite;}/style
/headbodydiv classboxdiv classunder/divspan/span/divdiv classboxdiv classunder2/divspan/span/div
/body/html二、跟随鼠标流动边框效果 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle:root {--bg: hsl(246 44% 7%);--border: hsl(280 10% 50% / 1);--card: hsl(237 36% 10%);--color: hsl(240 18% 80%);--border-width: 2px;--border-radius: 12px;--gradient: conic-gradient(from 180deg at 50% 70%, hsla(0, 0%, 98%, 1) 0deg, #eec32d 72.0000010728836deg, #ec4b4b 144.0000021457672deg, #709ab9 216.00000858306885deg, #4dffbf 288.0000042915344deg, hsla(0, 0%, 98%, 1) 1turn);}*,*:after,*:before {box-sizing: border-box;}property --start {syntax: number;inherits: true;initial-value: 0;}body {background: var(--bg);display: grid;place-items: center;min-height: 100vh;font-family: Geist Sans, SF Pro Text, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif, system-ui;font-weight: 70;color: var(--color);}.container {--spread: 60;display: flex;flex-wrap: wrap;flex-direction: var(--direction);gap: calc(var(--gap) * 1px);margin: 0 auto;justify-content: center;place-items: center;position: relative;padding: 2rem;touch-action: none;}article {--active: 0.15;--start: 0;height: 100%;background: var(--card);padding: 4rem;aspect-ratio: 330 / 400;border-radius: var(--border-radius);min-width: 280px;max-width: 280px;display: flex;flex-direction: column;gap: 0.25rem;position: relative;}article:is(:hover, :focus-visible) {z-index: 2;}.glows {pointer-events: none;position: absolute;inset: 0;filter: blur(calc(var(--blur) * 1px));}.glows::after,.glows::before {--alpha: 0;content: ;background: var(--gradient);background-attachment: fixed;position: absolute;inset: -5px;border: 10px solid transparent;border-radius: var(--border-radius);mask:linear-gradient(#0000, #0000),conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));mask-composite: intersect;mask-clip: padding-box, border-box;opacity: var(--active);transition: opacity 1s;}article::before {position: absolute;inset: 0;border: var(--border-width) solid transparent;content: ;border-radius: var(--border-radius);pointer-events: none;background: var(--border);background-attachment: fixed;border-radius: var(--border-radius);mask:linear-gradient(#0000, #0000),conic-gradient(from calc(((var(--start) (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),hsl(0 0% 100% / 0.15) 0deg,white,hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));mask-clip: padding-box, border-box;mask-composite: intersect;opacity: var(--active);transition: opacity 1s;}article::after {--bg-size: 100%;content: ;pointer-events: none;position: absolute;background: var(--gradient);background-attachment: fixed;border-radius: var(--border-radius);opacity: var(--active, 0);transition: opacity 1s;--alpha: 0;inset: 0;border: var(--border-width) solid transparent;mask:linear-gradient(#0000, #0000),conic-gradient(from calc(((var(--start) (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));filter: brightness(1.5);mask-clip: padding-box, border-box;mask-composite: intersect;}.badge {border: 2px solid var(--border);align-self: start;border-radius: 100px;padding: 0.5rem 0.7rem;font-size: 0.675rem;display: flex;align-items: center;gap: 0.25rem;font-weight: 50;}a {color: var(--color);text-decoration: none;opacity: 0.5;display: inline-block;align-self: start;transition: opacity 0.2s;}a:is(:hover, :focus-visible) {opacity: 1;}article h2 {margin: 0;padding: 1rem 0;font-weight: 100;font-size: 1.5rem;}.header {position: relative;flex: 1;display: flex;align-items: center;}.header svg {--count: 4;width: 106px;}.header svg:nth-of-type(2),.header svg:nth-of-type(3),.header svg:nth-of-type(4) {position: absolute;z-index: calc(var(--count) - var(--index));translate: calc(var(--index) * 30%) 0;opacity: calc(var(--count) / (2 * (var(--index) * 10)));}.header svg:nth-of-type(2) {--index: 1;}.header svg:nth-of-type(3) {--index: 2;}.header svg:nth-of-type(4) {--index: 3;}.badge svg {width: 16px;}.dg.ac {z-index: 99999 !important;}/style
/headbodydiv classcontainer style--gap:32;--blur:20;--spread:80;--direction:columnarticlediv classglows/div/articlearticle div classglows /div/article/divscriptconst CONTAINER document.querySelector(.container)const CARDS document.querySelectorAll(article)const CONFIG {proximity: 40,spread: 80,blur: 20,gap: 32,vertical: false,opacity: 0,}const PROXIMITY 10const UPDATE (event) {// get the angle based on the center point of the card and pointer positionfor (const CARD of CARDS) {// Check the card against the proximity and then start updatingconst CARD_BOUNDS CARD.getBoundingClientRect()// Get distance between pointer and outerbounds of cardif (event?.x CARD_BOUNDS.left - CONFIG.proximity event?.x CARD_BOUNDS.left CARD_BOUNDS.width CONFIG.proximity event?.y CARD_BOUNDS.top - CONFIG.proximity event?.y CARD_BOUNDS.top CARD_BOUNDS.height CONFIG.proximity) {// If within proximity set the active opacityCARD.style.setProperty(--active, 1)} else {CARD.style.setProperty(--active, CONFIG.opacity)}const CARD_CENTER [CARD_BOUNDS.left CARD_BOUNDS.width * 0.5,CARD_BOUNDS.top CARD_BOUNDS.height * 0.5]let ANGLE Math.atan2(event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0]) * 180 / Math.PIANGLE ANGLE 0 ? ANGLE 360 : ANGLE;CARD.style.setProperty(--start, ANGLE 90)}}document.body.addEventListener(pointermove, UPDATE)const RESTYLE () {CONTAINER.style.setProperty(--gap, CONFIG.gap)CONTAINER.style.setProperty(--blur, CONFIG.blur)CONTAINER.style.setProperty(--spread, CONFIG.spread)CONTAINER.style.setProperty(--direction, CONFIG.vertical ? column : row)}RESTYLE()UPDATE()/script
/body/html三、利用clip-path实现流动边框效果
四边 两边
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background-color: black;display: flex;justify-content: center;align-items: center;height: 100vh;}.box {height: 150px;width: 150px;position: relative;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-image: linear-gradient(45deg, gold, deeppink);/* animation: hue 3s infinite linear; *//* ::before,::after {content: ;position: absolute;top: -15px;bottom: -15px;left: -15px;right: -15px;border: 5px solid #24acf2;border-image: linear-gradient(45deg, gold, deeppink) 1;clip-path: inset(0px round 10px);animation: clippath 3s infinite linear;}::after {animation: clippath 3s infinite -1.5s linear;}span {color: white;font-size: 20px;} */}.line {position: absolute;top: -15px;bottom: -15px;left: -15px;right: -15px;border: 5px solid #24acf2;border-image: linear-gradient(45deg, gold, blue, deeppink) 1;/* clip-path: inset(0px round 10px); */animation: clippath 8s infinite linear;filter: blur(50px);animation-delay: -0s;box-shadow: 0 0 3px inset rgba(247, 214, 1,0.3);}.line-2 {animation-delay: -2s;animation: clippath2 8s infinite -2s linear;}.line-3 {animation-delay: -4s;}.line-4 {animation-delay: -6s;animation: clippath2 8s infinite -6s linear;}/* .line-2,.line-4{top: -20px;bottom: -20px;left: -20px;right: -20px;} */keyframes hue {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}}keyframes clippath {0% {clip-path: inset(0 0 95% 0);filter: hue-rotate(0deg) blur(5px);}25% {clip-path: inset(0 95% 0 0);}50% {clip-path: inset(95% 0 0 0);}75% {clip-path: inset(0 0 0 95%);}100% {clip-path: inset(0 0 95% 0);filter: hue-rotate(360deg) blur(5px);}}keyframes clippath2 {0% {clip-path: inset(0 0 95% 0);filter: hue-rotate(0deg) blur(10px);}25% {clip-path: inset(0 95% 0 0);}50% {clip-path: inset(95% 0 0 0);}75% {clip-path: inset(0 0 0 95%);}100% {clip-path: inset(0 0 95% 0);filter: hue-rotate(360deg) blur(10px);}}/style
/headbodydiv classboxdiv classline-1 line/div!-- div classline-2 line/div --div classline-3 line/div!-- div classline-4 line/div --spanhello world/span/div
/body/html四、
buttondivA beautiful button/div
/buttonproperty --border-angle-1 {syntax: angle;inherits: true;initial-value: 0deg;
}property --border-angle-2 {syntax: angle;inherits: true;initial-value: 90deg;
}property --border-angle-3 {syntax: angle;inherits: true;initial-value: 180deg;
}/* sRGB color. */
:root {--bright-blue: rgb(0, 100, 255);--bright-green: rgb(0, 255, 0);--bright-red: rgb(255, 0, 0);--background: black;--foreground: white;--border-size: 2px;--border-radius: 0.75em;
}/* Display-P3 color, when supported. */
supports (color: color(display-p3 1 1 1)) {:root {--bright-blue: color(display-p3 0 0.2 1);--bright-green: color(display-p3 0.4 1 0);--bright-red: color(display-p3 1 0 0);}
}keyframes rotateBackground {to { --border-angle-1: 360deg; }
}keyframes rotateBackground2 {to { --border-angle-2: -270deg; }
}keyframes rotateBackground3 {to { --border-angle-3: 540deg; }
}body {background: var(--background);color: var(--foreground);min-height: 100dvh;display: grid;place-content: center;margin: 0;font-family: Aspekta;
}button {--border-angle-1: 0deg;--border-angle-2: 90deg;--border-angle-3: 180deg;color: inherit;font-size: calc(0.8rem 4vmin);font-family: inherit;border: 0;padding: var(--border-size);display: flex;width: max-content;border-radius: var(--border-radius);background-color: transparent;background-image: conic-gradient(from var(--border-angle-1) at 10% 15%,transparent,var(--bright-blue) 10%,transparent 30%,transparent),conic-gradient(from var(--border-angle-2) at 70% 60%,transparent,var(--bright-green) 10%,transparent 60%,transparent),conic-gradient(from var(--border-angle-3) at 50% 20%,transparent,var(--bright-red) 10%,transparent 50%,transparent);animation: rotateBackground 3s linear infinite,rotateBackground2 8s linear infinite,rotateBackground3 13s linear infinite;
}/* Change this background to transparent to see how the gradient works */
button div {background: var(--background); padding: 1em 1.5em;border-radius: calc(var(--border-radius) - var(--border-size));color: var(--foreground);
}
