Home > Developer > Web Develop
Tag: Dex Res reference requires HTTP margin source code height rotation
Before on-line to see some pure CSS3 implementation of the cool effect, thought to be more difficult to achieve, so want to see how the specific implementation.
First, smiley Cat animationThe implementation results are as follows:
This implementation is indeed troublesome, many places need to spend time, have patience to adjust.
1. First look at the page structure:<body> <div class= "container" > <!--face-to-<div class= "faces" > <!--hair---&L T;div class= "Hair" > <div></div> </div> <!--eyes--<div class= "Eye-wra P "> <div class=" eye left "> <div class=" eye-circle "> <div class=" Eye-core "> </div> </div> <div class= "Eye-bottom" ></div> <div class= "eye-red" ;</div> </div> <div class= "eye right" > <div class= "eye-circle" > <div class= "Eye-core" ></div> </div> <div class= "Eye-bottom" ></div> <div class= "eye-red" ></div> </div> </div> <!--nose-to-<div class= "Nose" > </div> <!--mouth-to-<div class= "Mouth-wrap" > <!--<div class= "Mout H-top "></div>--<div class= "mouth left" ></div> <div class= "mouth right" ></div> </DIV&G T <!--Beard--<div class= "Mustache-wrap" > <div class= "Mustache left" > <div>< /div> <div></div> <div></div> <div></div> <d iv></div> </div> <div class= "mustache right" > <div></div> <div></div> <div></div> <div></div> <div></div> ; </div> </div> </div> <!--ears--<div class= "Ear-wrap" > <div class= "ea R left > </div> <div class= ' ear right ' > </div> </div> </div></body>2. Look at the CSS section again
1. Look at face faces first:
. face {/ * top:100px; */ left:50%; top:50%; Position:absolute; width:400px; height:340px; Margin-left: -200px; Margin-top: -170px; border-radius:50% 50% 35% 35%; border:2px solid #000; Z-index:10; Background: #f3f3f3; Overflow:hidden;}The main is to draw the oval, width and height set the value to note that the face is relatively wide. Then the key is the Border-radius setting:
Border-radius all set to 0 o'clock, is a rectangle, and then put its four corners corresponding to the settings, you can appear the effect we want.
2. Next look at the ear settings:
The ear also looks like an ellipse, by setting the Border-radius to bring up the desired effect. But it needs to be obscured, so in the HTML structure, I put it outside the face.
/* Ear */.ear-wrap { position:absolute; width:400px; top:100px; left:50%; Margin-left: -200px;}. ear { width:160px; height:200px; Position:absolute; Top: -22px; left:0; border:2px solid #000; Background: #f3f3f3; Transform:rotate ( -15deg); -ms-transform:rotate ( -15deg); -moz-transform:rotate ( -15deg); -webkit-transform:rotate ( -15deg); -o-transform:rotate ( -15deg); border-radius:4% 80% 0% 50%; Transition:all 1s;}. Ear-wrap. Right { left:auto; right:0; border-radius:80% 4% 50% 0%; Transform:rotate (15deg); -ms-transform:rotate (15deg); -moz-transform:rotate (15deg); -webkit-transform:rotate (15deg); -o-transform:rotate (15deg);}This is pricked up by the ear, through Transform:rotate (15DEG); Rotate a little and the ears fall down.
3. Then the hair:
With the above practice, know the hair is good, or oval
/* Hair */.hair { position:absolute; width:180px; height:160px; left:50%; Margin-left: -90px; Background: #8d8d8d; Overflow:hidden; border-radius:0 0 50% 50%;}. Hair div { width:90px; height:160px; Background: #f0ac6b;}Another color, just need to add a sub-div inside, and then give a different color on OK.
4. Look at your eyes again:
Eyes more complex, split four small parts, eyes, eyes, under the eyeliner, jealous (laugh up the expression), the corresponding effect is set to:
/* Eye */.eye-wrap {position:absolute; width:300px; height:60px; top:200px; left:50%; Margin-left: -150px; Overflow:hidden;}. Eye-wrap. eye {height:100px; width:100px; Position:absolute;}. Eye-wrap. eye-circle {width:100px; height:100px; border:2px solid #000; Overflow:hidden; Position:absolute; border-radius:50%; Box-sizing:border-box;}. Eye-wrap. eye-core {height:100px; width:30px; /* margin:0 auto; */background: #000; Position:absolute; left:50%; Margin-left: -15px; Transition:all 1s;}. Eye-wrap. eye-bottom {height:50px; width:160px; border-radius:50%; Position:absolute; /* Background: #000; */margin-top:50px; border-top:2px solid #000; Left: -30px; Background: #f6f7f2; Transition:all 1s;}. Eye-wrap. Right {Left:auto; right:0px;}. eye-red {position:absolute; height:28px; width:70px; background:red; top:34px; /*top:64px;*/left:18px; border-radius:50% 50% 50% 50%; Background-image:-moz-radial-gradIent (50% 50%, Rgba (253,214,240,0.8) 0, Rgba (253,224,244,0.8) 66%, Rgba (253,234,247,0.8) 100%); Background-image:-webkit-radial-gradient (50% 50%, Rgba (253,214,240,0.8) 0, Rgba (253,224,244,0.8) 66%, Rgba ( 253,234,247,0.8) 100%); Background-image:-ms-radial-gradient (50% 50%, Rgba (253,214,240,0.8) 0, Rgba (253,224,244,0.8) 66%, Rgba ( 253,234,247,0.8) 100%); opacity:0.0; /* Transition:all 1.5s; */Transition:all 0.1s ease-in 0.2s;}
Note that the left and right two eye effect is roughly the same, but the position is not the same, this is the only thing we need to set the right:0px; Yes (because Position:absolute is set)
5. Nose:
/* Nose */.nose { width:30px; height:10px; /* Background: #000; */ border-bottom:8px solid #000; border-radius:0% 0% 50% 50%; top:250px; left:50%; Margin-left: -15px; Position:absolute;}Special attention here, height:10px; border-bottom:8px solid #000, I originally wanted to use only height:10px, and then set the Border-radius, but the effect was long:
No semicircular effect, is the height set enough? Become 18px, this goods long this, also is wrong, so add Border-bottom
6. Mouth:
View Codeis relatively simple, set border-bottom,border-left or border-right can be. The effect of mouth warping is to change its Border-radius value
7. Beard on both sides:
View CodeAlthough it is troublesome, but also is a simple figure, just need to set the height,width,border-top,border-radius,transform:rotate these values properly.
8. Mouse Hover Style:
View CodeThe ears, mouth, eyes and other places need to modify the properties of Transform,border-radius,width equivalents.
3. Online effect and source codeOnline Effect: Dot Me
Source: Poke me to see
Reference: Look again
Two: Cube rotationEffect:
HTML section:
<body class= "Body" > <div class= "Rect-wrap" > <!--//stage elements, set perspective, and let its child elements get perspective. --<div class= "container" > <!--//container, set the transform-style:preserve-3d so that its child elements are rendered in 3D space- <div class= "Top slide" >1</div> <!--//cube six-and- <div class= "Bottom Slide" >2</ div> <div class= "left slide" >3</div> <div class= "right slide" >4</div> < Div class= "front slide" >5</div> <div class= "Back slide" >6</div> </div> </div></body>
Css:
View Code1.3-Dimensional space map2.perspective PropertiesThe center of the computer screen is the origin, the x-axis, the vertical y-axis, and the direction of the face is the z-axis;
Translate (x, y), TranslateX (x), Translatey (y), Translatez (z), Translate3d x, Z: Define the position of the
移动距离Rotate (angle), Rotatex (a), Rotatey (a), Rotatez (a), Rotate3d (X,y,z,angle): Defines the elements
旋转角度.
3.transform-style PropertyThe Perspective property defines the distance, in pixels, of the 3D element from the view. This property allows you to change the 3D element view of the 3D element.
When you define a perspective property for an element, its child elements get a perspective instead of the element itself.
Note: The Perspective property only affects 3D conversion elements.
Tip: Use this property with the Perspective-origin property so you can change the bottom position of the 3D element.
4.transform-origin Propertytransform-style:flat|preserve-3d; The default value is flat, which indicates that child elements are rendered in a 2D plane; Perserve-3d represents a child element rendered in a planar plane
5. Online effect and source codeThe Transform-origin property allows you to change the position of the element being converted (which can be understood as where the element is rotated origin).
Grammar:
Transform-origin:x-axis Y-axis Z-axis;Properties Demo effect: Poke Me
The default value is: 50% 50% 0
Online Effect: Dot Me
Source code: Poke me to see
Reference: Look again
Third, cool buttonEffect: (Slag residue pixel (/-\))
Look at the effect of the three-dimensional buttons that Twitter does, like how the flip action is done.
HTML section:
<body class= "Body" ><section> <div class= "button" > Hello, Welcome to the new world! </div> <div class= "Cover" > <div class= "Innie" ></div> <div class= "Spine" ></div> <div class= "Outie" ></div> </div> <div class= "Shadow" ></ Div></section></body>
CSS section:
View CodeThe main is the superposition of some effects, then pay attention to transform-style:preserve-3d; set the 3D effect.
On-line effects and source codeOnline Effect: Dot Me
Source code: Poke me to see
Reference: Specific not found (/-\)
Four: 3D photo wallEffect:
HTML section:
<body class= "Body" > <div class= "Photo-wrap" > <!--Stage--and <div class= "Container" > <!--containers-- <div class= "img" > I am the center </div> <div class= "img img01" >1</div > <div class= "img img02" >2</div> <div class= "img img03" >3</div> <div Class= "img img04" >4</div> <div class= "img img05" >5</div> <div class= "img img06" >6</div> <div class= "img img07" >7</div> <div class= "img img08" >8</div> <div class= "img img09" >9</div> </div> </div></body>
CSS section:
View Code1. Realization of ReflectionBasic syntax:
img { -webkit-box-reflect:below;}The Offset property value defines the spacing between the picture and the reflection image:
img { -webkit-box-reflect:below 3px;}Add a shadow effect to your reflection:
2. Online effect and source code-webkit-box-reflect:below 3px-webkit-linear-gradient (Top,rgba (0,0,0,0) 40%,rgba (0,0,0,0.5));
Online Effect: Dot Me
Source code: Poke me to see
Some cool effects of pure CSS3 implementation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
