Today, I would like to share the realization method of the Logo color change function that I just finished.
My implementation method mainly has two aspects. Using CSS3 dynamic gradient font effect, the implementation has been very mature and stable. What should I do if the logo is a picture? Perfect!
SVG image converted to web font icon
Our web often uses some icons, which are actually the same as fonts (in fact, I am not completely clear here). I feel that fonts are also pictures.
(1) Preparatory work, since we have a logo, it must be a vector image, and then export the image in SVG format;
(2) For font making, enter https://icomoon.io website to make online;
Click icomoon APP -> import icons to import SVG images,
(3) Click Generate Font in the lower right corner to generate a font file, and then the Download button will appear, continue to click to download the file;
(4) Unzip the downloaded package, you will see many files, here is a demo, click on the demo.html file, you will see a string of characters behind the icon: icon-loonlog-logo, this is the class name to be used later;
(6) Copy the css and font folders to the corresponding directory of your website project, and directly use <i class="icon-loonlog-logo" style="font-size: 150px"></i> in html ; That's it, this site is using this method!
css3 text color dynamic gradient
.logo{ height: 60px; color: #f35626; background: coral; background-image: - webkit-linear-gradient(45deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 6s infinite linear;}@-webkit- keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(-360deg); }}The above can dynamically change the color of the font, and I also copy it directly!
These attributes are used
- background-clip
- text-fill-color
- filter: hue-rotate
background-clip
CSS3 property specifies the drawing area of the background W3school only shows three values CSS3 background-clip property
border-box # The background is clipped to the border box.
padding-box # The background is clipped to the padding box.
content-box # The background is clipped to the content box.
The -webkit-background-clip: text; used above must be prefixed with -webkit-, otherwise the browser cannot render normally. The effect of text is that the background color is clipped to the text, and only the text will display the background color. This attribute can be used to achieve an effect similar to the lyrics view in ktv. For specific effects, please refer to the sharp background-clip:text to achieve the effect of karaoke subtitles
text-fill-color
text-fill-color, which means text color filling, the effect is basically the same as color, and it will cover the font color defined by color. It also supports a transparent attribute, that is, transparent filling.
filter: hue-rotate
hue-rotate is used to set the hue rotation of the object. Express with 0-360 numbers
Combining the above three attributes with animation, the effect of text gradient is finally realized.
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Use%20css3%20to%20achieve%20the%20effect%20of%20dynamic%20gradient%20of%20logo%20color.html
支付宝扫一扫 
评论列表（196条）
测试