-webkit-text-fill-color: transparent; } .entry-title{font-size:50px;font-weight:500;margin:20px0;border-top:2pxsolid#ecd018;border-bottom:2pxsolid#ecd018;line-height:1.4;padding:20px0;background-image:-webkit-gradient(linear,0%0%,25%100%,from(#ff2c2c),to(#7a5e91)); -webkit-back...
.text{-webkit-background-clip: text; width:200%; background-clip: text; background-image:linear-gradient(-45deg,rgb(255,255,0),rgb(0,255,255)); font-size:20px; width:120px; animation: shine2sinfinite; background-blend-mode: hard-light; background-size:200%; color: white; -webkit-...
gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } } @-webkit-keyframes masked-animation { 0...
.txt{animation:color.001s.5linearforwards;filter:grayscale(1)contrast(9999)invert(1); } 1. 2. 3. 4. 效果如下: 也能完美适配任意渐变色。 完整代码可以查看以下任意链接 CSS auto-gradient-color (juejin.cn)[1] CSS auto-gradient-color (codepen.io)[2] CSS auto-gradient-color (runjs.work)[...
background-image:-webkit-linear-gradient(45deg,#f35626,#feab3a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; -webkit-animation:hue6sinfinitelinear; } @-webkit-keyframeshue{ from{ -webkit-filter:hue-rotate(0deg); ...
background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
background: linear-gradient(to right, red, orange, yellow, green, cyan, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hue 3s linear infinite; font-size: 100px; padding: 20px; } @keyframes hue { ...
background-image:linear-gradient(toright,red,orange,yellow,green,yellow,orange,red,orange,yellow,green,yellow,orange,red); -webkit-text-fill-color:transparent; -webkit-background-clip:text; -webkit-background-size:200%100%; -webkit-animation:word-color-animation5sinfinitelinear; ...
background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; ...
如果这里仅设置conic-gradient并配合animation动画的效果就是下面的样子: 但是再增加一个radial-gradient径向渐变并设置background-size为5vmin 5vmin的显示区域。 radial-gradient(#53515010 2px, #25282a 0), 完成后的效果图: 这里需要注意的一点就是多个渐变设置的顺序,这里的conic-gradient要放置在后面才能完成这个...