CSS3 Animation: Flow color text effect + picture blur effect + border stretching effect realization

Objective

First, the first step is to lay out the HTML code as follows:

<Divclass= "Wrap">    <imgsrc= "Images/1.jpg"class= "Blur"/>    <Divclass= "Text-gradient">Divine</Div>    <Divclass= "Border"></Div></Div>

Above the first picture img is the DOM element that implements the image blur effect,text-gradient implements the DOM element of the streaming color text effect, andborder implements the DOM element of the border stretching effect.

Think about the style of how to write, according to this layout, we first to achieve the image blur effect.

Picture Blur effect

Image blur effect is to use the CSS3 Filter property, want to learn more about can click on the "CSS3 filter Details (change fuzziness brightness transparency, etc.)".

Write The Wrap style first:

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

The style of the. blur 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*/}

Let's step through the code to analyze this:

First, the General CSS3 Blur filter Implementation code is as follows:

{        -webkit-filter: blur (10px)/** */       -moz-filter:  Blur (10px);         -ms-filter: Blur (10px);                 filter: blur (10px);    }

SVG Filter Implementations:

No matter what method Daoteng, make a code as follows, and blur.svg the full name of the SVG 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"><svgversion= "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>        <FilterID= "Blur">            <Fegaussianblurstddeviation= "Ten" />        </Filter>    </defs></svg>

The code for the defs tag above is the added filter code.

The following CSS call code:

/**/

Then, the effect comes out. If your browser is firefox25-you can see the effect.

IE10 and IE11 and later ie11+ are all supported for SVG filters, but this demo is not valid under these browsers, why?

It seems that because it does not support the use of CSS directly in filter: url the wording, in fact, to achieve IE10, IE11 under the fuzzy effect, is also possible, is the applicability of the point, the picture to write the 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"><svgversion= "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>        <FilterID= "Blur">            <Fegaussianblurstddeviation= "Ten" />        </Filter>    </defs>    <ImageXlink:href= "Mm1.jpg"x= "0"y= "0"Height= "191"width= "265"Filter= "url (#blur)" /></svg>

Then, SVG is loaded as a background image:

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

That's all you can do.

IE6?-IE9 Browser can be filter implemented with the help of IE blur filter, the following CSS:

So the final composite 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 know more, click on "Little tip: Use CSS to convert a picture into a blur (frosted glass) effect"

Streaming color Text effect

First, 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;} }

Description

1. Set the gradient color to the background color of the box in which the text is located:background-image: linear-gradient(...)
2. The intersection of the shape of the text with the background (rectangle):-webkit-background-clip: text
3. Delete the original text shape that overrides the resulting intersection:-webkit-text-fill-color: transparent

The Background-clip property specifies the drawing area of the background.

Grammar:

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

The values correspond to: The background is cropped to the bounding box, the padding frame, and the content box.
The text used here is only available for Chrome browser.

After the above steps to get the effect of the gradient fill text, but in fact, it is the background after cutting, so to achieve the color flow, you need the background to circulate, you can use CSS3 animation cycle change background-position can be broken, But there are two holes in the animation effect to note:

• background: linear-gradient(...)is a shorthand for multiple attributes, use specific properties to modify the value of an item in @keyframes, or overwrite the previous setting if you use shorthand.
• You need to set >100% when you initially set the background background-size-x . Let the background picture size horizontal direction to enlarge one times, so that the background-position only move and change space.

can refer to the article: "Small tip:css3 under the gradient text effect realization"

Border Stretch effect

Achieve the outline stretching effect total code:

. 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; }

Mainly through the border:6px solid #000这个属性, when the width and height are set to 100%, the left and right or the upper and lower border set to transparent can be achieved:: After and:: Before assembled into a rectangle, Both sides are expanded from the middle, so the original left and top settings are 50%; Finally, you need to pay attention to the transition-property:height,width,left,top;

Final effect:

Baidu Network disk can download demo run view, download please click on the "CSS3 animation: Streaming Color text effect + image blur effect + border stretching effect implementation"

CSS3 Animation: Flow color text effect + picture blur effect + border stretching effect realization