The effect of using CSS3 to draw lighter animated flames

This article is mainly for you to introduce the pure CSS3 draw lighter animation flame effect related data, with a certain reference value, interested in small partners can refer to

This example for everyone to share the pure CSS3 draw lighter animation flame effect of the specific code for your reference, the specific content as follows

The following properties are mainly involved:

<span style= "Font-family:comic Sans MS;" >animation (webkit-animation),   @keyframes name (@-webkit-keyframes name),   transform,   Transform-origin,   transition,   box-shadow (spread attribute),   text-shadow   z-index linear-gradient   .   radial-gradient   background-image    </span>

First, the HTML code is as follows:

<span style= "Font-family:comic Sans MS;" ><! DOCTYPE html>
The Style.css file is as follows:

<span style= "Font-family:comic Sans MS;"   > @charset "Utf-8";    body{margin:0;    padding:0;    Color: #333;    Text-align:center;   font:12px "Microsoft Jas Black";    }: before,:after{Position:absolute;   Content: ""; }. kebody{Background:url (..   /images/bodybg.jpg) repeat #333;    }. ketitle{height:100px;    line-height:100px;    font-size:30px;    font-family: ' Microsoft ya Black ';    Color: #fff;    Text-align:center; Background:url (..    /images/bodybg3.jpg) Repeat-x Bottombottom left;    Font-weight:normal;   margin-bottom:0;    }. kepublic{background: #cccccc;   padding:50px;    }. playground{position:relative;    width:140px;    height:400px;    left:50%;   margin-left:-70px;      }. flame{opacity:0;      Position:absolute;      bottombottom:60%;      left:42%;      width:14px;      height:70px;      Background-color:white;      border-radius:100% 100% 0 0; box-shadow:0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9, 10px-10px 30px #feec85, -20px-20px 40px #ffae34, 20px-40px 50px #ec760c, -20px-60px 60px #cd4606, 0-80px 70px #973716, 10px-90px 80px #451b0e;    }. Playground:hover. Flame {opacity:1;    Transition:opacity 3s linear;   -webkit-animation:flame 1s infinite linear;    }. playground:hover. lid{-webkit-animation:lidoff 1s linear;   /* Animate the object from one place to another and let it stay there: */-webkit-animation-fill-mode:forwards;    }. lighterbody{Position:absolute;    width:140px;    height:130px;    top:200px;    left:0; Background-image:linear-gradient (to Rightright, #959595 0, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838    87%, #1b1b1b 100%);    border-radius:2% 2% 8% 8%;   Box-shadow:inset 0 0 5px 5px #333;    }. lighterbody:before{width:47px;    height:47px;    top:-50px;    left:42px;    Content: "...";    Color: #e6e6e6;    border-radius:6% 6% 0 0;    Background-image:linear-gradient (to Rightright, #f5f5f5 0, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);    font-size:30px; Font-weight: bold;    letter-spacing:7px;    line-height:16px; text-shadow:0    0 5px Black;    padding-top:3px;   padding-left:4px;    }. lighterbody:after{width:33px;    height:33px;    Background-image:radial-gradient (ellipse at center, #7d737d 0, #0e0e0e 100%);    border-radius:100%;    top:-33px;    left:10px;   Box-shadow:inset 0 0 1px 2px Gray;    }. lid{Z-index:2;    Position:absolute;    width:140px;    height:75px;    top:125px;    left:0; Background:linear-gradient (to Rightright, #959595 0, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b    1b 100%);    border-radius:8% 8% 2% 2%;    Box-shadow:inset 0 0 5px 5px #333;    /*BORDER-BOTTOM:3PX solid #f2f2f2; */}. lid:before{width:10px;    height:10px;    top:70px;    left:133px; Background-image:radial-gradient (ellipse at center, #959595 0, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #38383    8 87%, #1b1b1b 100%);   border-radius:100%;    }. hover{z-index:1;    Text-align:center; Margin-top:30%;    Color:rgba (255,255,255,0.9); text-shadow:0    1px 1px rgba (0,0,0,0.8);   font:20px "Microsoft Jas Black";    }. hover:before{content: "";    Z-index:1;    width:0;    height:0;    top:-50px;    left:20px;    border-bottom:35px solid #f2f2f2;     /*border-left:10px Solid transparent;*/} @-webkit-keyframes flame{0%{height:70px;     Transform:skewy (0DEG);    border-radius:100% 100% 0 0;     } 25%{height:60px;     Transform:skewy (40DEG);    border-radius:10% 100% 0 0;     } 60%{height:65px;     Transform:skewy ( -20DEG);    border-radius:90% 10% 0 0;     } 70%{height:50px;     Transform:skewy (10DEG);    border-radius:10% 100% 0 0;     } 100%{height:70px;    Tranform:skewy (0DEG);     }} @-webkit-keyframes lidoff{from{transform:rotate (0deg);    transform-origin:100% 100%;     } to{transform:rotate (130deg);    transform-origin:100% 100%; }}</span>
Initial Photo:


Dynamic photos


There are two main animation effects, one is when the mouse hover over the "hover me" when the lighter lid opened the case, by the following animation code implementation:

<span style= "Font-family:comic Sans ms;font-size:12px;" >@-webkit-keyframes lidoff{     Note here to add-webkit-        from{             transform:rotate (0deg);             transform-origin:100% 100%;        }        to{             transform:rotate (130deg);             transform-origin:100% 100%;        }   }    </span>
The second animation is the realization of the candle light effect: The candle is by the variable by transition:opacity 3s linear; achieved,
The wind-swinging effect of the candle light is implemented by the following code:

<span style= "Font-family:comic Sans ms;font-size:12px;" >@-webkit-keyframes lidoff{       from{            transform:rotate (0deg);            transform-origin:100% 100%;       }       to{            transform:rotate (130deg);            transform-origin:100% 100%;       }   </span>
The effect of separating the lighter lid from the torso is: Box-shadow:inset 0 0 5px 5px #333; This is mainly the inset (note not written as insert) implementation.
When the lighter opens the ball and the small white square, is by: After:before with the z-index implementation of the effect.

Here's a look at some of the properties I've learned through this example.

transform-origin: The default initial position is the center of the image, and 100% 100% corresponds to right bottom. 0% 0% equals left top.

before and: after: The injected content is a literal child element of the associated target element, but it is placed in the "before" or "after" of any content of this element. The inserted content is invisible in the source code of the page and can only be seen in CSS. The elements that are inserted at the same time are inline elements by default. Therefore, in order to give the inserted element height, padding, margins, and so on, it is usually necessary to display a block-level element (Display:block) that is defined.
In addition, although nothing may be inserted, content must be written, and if nothing is inserted, content is written as content: "";
IE6 and IE7 are incompatible with these two elements

Pseudo-element (double colon), Pseudo-class in CSS3 (single colon)

Animation-fill-mode:none|forwards|backwards|both|initial|inherit;
Specifies the style to apply to elements when the animation is not playing (when the animation is complete, or when the animation has a delay that does not start playing).

Background-image: solves the problem that P can only set a background, so that a p may set multiple background images.
Box-shadow: A frequently forgotten parameter--spread (extended shadow radius), the once forgotten spread changes the size of the shadow---its value can be positive negative value, if the values are positive, then the entire shadow is extended, the inverse is negative, then zoom out. With this parameter, you can create a single-sided shadow effect using box-shadow like the shadows in Photoshop. Note here that this extended shadow value needs to be used in conjunction with the shadow blur radius, typically "extended shadow radius is generally set to and blur radius size, and negative"

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!