CSS3 Animation: color text effect + image blur effect + border stretch effect, css3 text Effect

CSS3 Animation: color text effect + image blur effect + border stretch effect, css3 text Effect
Preface

First, layout the html code as follows:

<Div class = "wrap">  <div class =" text-gradient "> godsend </div> <div class = "border"> </div>

As shown above, the first image img is the DOM element that achieves the blur effect of the image. text-gradient implements the DOM element of the colorful text effect, and border implements the DOM element of the border stretch effect.

Think about how to describe the style. Based on this layout, We can first blur the image.

Blur Images

The filter attribute of css3 is used for image blur. For details, click "CSS3 Filter details (Change blur brightness transparency and other methods)".

First, write down the wrap style:

.wrap{    position: relative;    width:300px;    height:225px;    text-align: center;}

The. blur style is as follows:

.wrap .blur{    position: absolute;    top:0;    left:0;    width:300px;    height:225px;    z-index:1;}.wrap:hover img.blur{    transition: all .5s ease;    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    -webkit-filter: blur(10px); /* Chrome, Opera */    -moz-filter: blur(10px);    -ms-filter: blur(10px);     filter: blur(10px);     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /*IE6~IE9 */}

We will analyze the code gradually:

First, the general CSS 3 blur filter implementation code is as follows:

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

SVG Filter Implementation:

No matter what the method is, make a code as follows, and the full name isblur.svgSVG file:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">         <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

The above defs tag code is the added filter code.

The following CSS call code:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

Then the effect is displayed. If your browser is FireFox25, you can see the effect.

IE10, IE11, and later IE11 + all support SVG filters. However, this demo is invalid in these browsers. Why?

It seems that it does not support direct use in CSSfilter: urlIn fact, to achieve the fuzzy Effect of IE10 and IE11, it is also possible, that is, the applicability is poor. The image should be written into SVG code, similar to the following:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs>    <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" /></svg>

Then, load SVG as the background image:

.blur {    background-image: url(blur.svg);}

In this way, you can.

IE6? -Internet Explorer 9 can use IEfilterFuzzy filter implementation, CSS as follows:

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); 

So the final comprehensive code:

.blur {        filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}

If you want to learn more, click "Small tip: Use CSS to convert the image into a blur (frosted glass) effect".

Color text Effect

First go to the css code:

.wrap:hover .text-gradient {     position: relative;    z-index:2;    display: inline-block;    color: black;    font-size: 30px;    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; } @-webkit-keyframes masked-animation {     0% { background-position: 0 0;}     100% { background-position: -100% 0;} }

Note:

The background-clip attribute specifies the painting area of the background.

Syntax:

background-clip: border-box|padding-box|content-box;

The value corresponds to: the background is cropped to the border box, the padding box, and the content box.
The text used here is only applicable to chrome.

After the above steps, the text is filled with gradient color, but the background is cropped. To achieve color flow, the background needs to flow cyclically, you can use CSS3 animation to change the background-position cyclically. However, there are two pitfalls in the animation effect:

• background: linear-gradient(...)Is the abbreviation of multiple attributes. Use the specific attribute to modify the value of an item in @ keyframes. Otherwise, the previous setting will be overwritten if the abbreviation is used.
• You need to set the background for initial settings.background-size-x> 100%. This doubles the size and horizontal direction of the background image so that the background-position can be moved and changed.

Refer to the article: Small tip: Implementation of gradient text in CSS3

Border stretch Effect

Code for implementing the border stretching effect:

.border{    position: absolute;    width:300px;    height:225px;    z-index:2;    top:0;    left:0;} .border::before, .border::after {     content:" ";     display: block;     position: absolute;     width: 0;     height: 0;      box-sizing: border-box;     transition-property: height,width,left,top;     transition-duration: 0.5s;     transition-timing-function: ease-in;     z-index:2; } .border::before {     height: 100%;     left: 50%; } .wrap:hover > .border::before {     left: 0;     width: 100%;     border: 6px solid #000;     border-left-color: transparent;     border-right-color: transparent; } .border::after {     width: 100%;     top: 50%; } .wrap:hover > .border::after {     height: 100%;     top: 0;     border: 4px solid #000;     border-top-color: transparent;     border-bottom-color: transparent; }

This attribute uses the border: 6px solid #000 attribute. When both width and height are set to 100%, you can set the left and right border or upper and lower border to transparent to achieve: after and :: before assembles and grows a square shape, and both sides expand from the middle. Therefore, the left and top values are set to 50% at first. Note the settings of transition-property: height, width, left, top.

Final effect:

Baidu online storage can be downloaded to run the demo. For download, click "CSS3 Animation: colorful text effect + image blur effect + border stretch effect implementation".