I saw some cool effects with pure CSS3 on the Internet before, thought it was more difficult to achieve, so I want to see how to achieve the specific.
A smiling cat animation
The implementation effect is as follows:
This is a bit of a hassle to implement, and a lot of things take time and patience to adjust.
1. Take a look at the page structure:
<body> <div class="container"> <! <div class="face"> <! - hair - > < div class = "hair" > < div > < / div > < / div > <! <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> <! <div class="nose"> </div> <! <div class="mouth-wrap"> <! -- <div class="mouth-top"></div> --> <div class="mouth left"></div> <div class="mouth right"></div> </div> <! - the beard - > < div class = "mustache - wrap" > < div class = "mustache left" > < div > < / div > < div > < / div > < div > < / div > < div > < / div > <div></div> </div> <div class="mustache right"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> <! - ear - > < div class = "ear - wrap" > < div class = "the ear left" > < / div > < div class = "ear right" > < / div > < / div > < / div > < / body >Copy the code2. Look at the CSS
1. Face 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;
}Copy the codeThe main thing is to draw the ellipse, the width and height Settings should be careful, the face is relatively wide. Then the key is to set the border-radius:
When border-radius is set to 0, it is a rectangle, and then set its four corners to the corresponding Settings, we can have the desired effect.
2. Next, look at the ear Settings:
The ear also looks like an oval. Set the border-radius to get the desired effect. But it needs to be partially covered, so in the HTML structure, I put it outside of 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); }Copy the code
Rotate (15deg); Rotate (15deg); Turn it a little bit and the ear falls down.
3. Then hair:
Had afore-mentioned practice, know a hair to be done well, still ellipse
/* 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; }Copy the codeFor another color, just add a child div inside and give it a different color.
4. Age: 43
The eyes are more complex, split the four small parts: eye socket, eye bead, lower eyeliner, and red eye (smile expression), and set the corresponding effect as:
/* 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; / * the transition: all 1.5 s; */ Transition: all 0.1s ease-in 0.2s; }Copy the codeNotice that the left and right eyes are roughly the same, but in a different position, so we just need to set right: 0px; (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; }Copy the codeHeight :10px; border-bottom: 8px solid #000; I wanted to just use height:10px; Then set border-radius to something like this:
6. Mouth:
/* mouth */. Mouth-wrap {position: absolute; top: 268px; width: 100px; left: 50%; margin-left: -50px; height: 20px; overflow: hidden; } .mouth { width: 50px; height: 40px; border-bottom: 4px solid #000; border-right: 4px solid #000; border-radius: 0% 40% 50% 20%; margin-top: -26px; position: absolute; left: 0; transition: all 1s; } .mouth-wrap .right { border-bottom: 4px solid #000; border-right: none; border-left: 4px solid #000; border-radius: 40% 0% 20% 50%; position: absolute; left: auto; right: 0; }Copy the codeTo make it easier, set border-bottom, border-left or border-right. The upturned mouth has the effect of changing its border-radius value
7. Beards on both sides:
/* mustache */. Mustache -wrap {height: 80px; width: 380px; position: absolute; top: 190px; z-index: 20; left: 50%; margin-left: -190px; } .mustache > div:first-child { width: 30px; height: 10px; border-top: 6px #E53941 solid; border-radius: 30% 50% 20% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; } .mustache > div:nth-child(2) { width: 20px; height: 6px; background-color: #E53941; border-radius: 50% 50% 50% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; } .mustache > div:nth-child(3) { /*margin-top:10px; */ width: 32px; height: 10px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 50% 30%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 8px; } .mustache > div:nth-child(4) { margin-top: 20px; width: 26px; height: 20px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 50% 30%; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); margin-left: 28px; } .mustache > div:last-child { width: 22px; height: 10px; border-bottom: 3px #E53941 solid; border-radius: 0% 0% 50% 50%; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 40px; margin-top: -8px; } /* Mustache */. Mustache -wrap. Right {transform: rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari and Chrome */ -moz-transform: rotateY(180deg); /* Firefox */ margin-top: -85px; }Copy the codeHeight, width, border-top, border-radius, and transform: rotate are all set properly.
8. Mouse hover style:
/* mouse hover style */. Container :hover. Ear-wrap > div:first-child {/* left: -10px; */ transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%; transition: all 1s; /*transition: transform 1s,left 1s; */ } .container:hover .ear-wrap > div:last-child { /* right: -10px; */ transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; transition: all 1s; /*transition: transform 1s,right 1s; */ } .container:hover .eye-bottom { margin-top: 30px; transition: all 1s; } .container:hover .eye-red { opacity: 1; The transition: all 2.5 s; } .container:hover .mouth { border-radius: 50%; transition: all 1s; } .container:hover .eye-core { width: 40px; margin-left: -20px; transition: all 1s; }Copy the codeTransform, border-radius, width, etc.
3. Online effect and source code
Online effects: Click on me
Source code: Poke me to see
Resources: Look again
Two: cube rotation
Effect:
HTML part:
<body class="body"> <div class="rect-wrap"> <! // Set the perspective for the stage element so that its children get perspective. --> <div class="container"> <! <div class="top slide">1</div> <! -- <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>Copy the codeCSS:
<style> .rect-wrap { position: relative; perspective: 2000px; } .container { width: 400px; height: 400px; transform-style: preserve-3d; transform-origin: 50% 50% 100px; /* / set the origin of the 3d space to the center of the plane and move 200px towards the Z axis */ * left: 50%; margin-left: -200px; */ top: 100px; } .slide { width: 200px; height: 200px; position: absolute; background: #000; line-height: 200px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; } .top { left: 100px; top: -100px; transform: rotateX(-90deg); transform-origin: bottom; background: red; } .bottom { left: 100px; bottom: -100px; transform: rotateX(90deg); transform-origin: top; background: grey; } .left { left: -100px; bottom: 100px; transform: rotateY(90deg); transform-origin: right; background: green; } .right { left: 300px; bottom: 100px; transform: rotateY(-90deg); transform-origin: left; background: yellow; } .front { left: 100px; top: 100px; transform: translateZ(200px); background: black; } .back { left: 100px; top: 100px; transform: translateZ(0);; background: blue; } @keyframes rotate-frame { 0% { transform: rotateX(0deg) rotateY(0deg); } 10% { transform: rotateX(0deg) rotateY(180deg); } 20% { transform: rotateX(-180deg) rotateY(180deg); } 30% { transform: rotateX(-360deg) rotateY(180deg); } 40% { transform: rotateX(-360deg) rotateY(360deg); } 50% { transform: rotateX(-180deg) rotateY(360deg); } 60% { transform: rotateX(90deg) rotateY(180deg); } 70% { transform: rotateX(0) rotateY(180deg); } 80% { transform: rotateX(90deg) rotateY(90deg); } 90% { transform: rotateX(90deg) rotateY(0); } 100% { transform: rotateX(0) rotateY(0); } } .container{ animation: rotate-frame 30s linear infinite; } </style>Copy the code1.3 dimensional space diagram
The center of the computer screen is the origin, the horizontal X axis, the vertical Y axis, the direction of the face is the Z axis;
Translate (x,y), translateX(x), translateY(y), translateZ(z), translate3D (x,y,z) : defines the movement distance of a position
Rotate (Angle), rotateX(a), rotateY(a), rotateZ(a), rotate3D (x,y,z, Angle) : defines the rotation Angle of an element.
2. The perspective of attributes
The Perspective property defines the distance, in pixels, of a 3D element from the view. This property allows you to change 3D elements to see the view of 3D elements.
When the Perspective attribute is defined for an element, its children get perspective, not the element itself.
Note: The Perspective attribute affects only 3D transformation elements.
Tip: Use this property with the Perspective-Origin property so that you can change the bottom position of the 3D element.
3. The transform – style property
transform-style: flat|preserve-3d; The default value is flat, which indicates that the child element is rendered in 2D plane. Perserve-3d means that the child elements are rendered in a 3D planeCopy the code
4. The transform – origin attribute
The transform-origin attribute allows you to change the position of the transformed element (interpreted as the position at which the element is rotated).
Grammar:
transform-origin: x-axis y-axis z-axis;Copy the codeProperties Demo Effect: Poke me
The default value is 50%. 50% 0
5. Online effect and source code
Online effects: Click on me
Source code: Poke me see
Resources: Look again
3. Cool button
Effect :(residue pixel (/ □ \))
Take a look at what Twitter did with the stereoscopic button effect, like a clamshell motion.
HTML part:
<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>Copy the codeThe CSS part:
<style> section, section div { transition-duration: .6s; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #D8DFE9 100%); background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #D8DFE9 100%); overflow: hidden; } section, .button { transition-timing-function: ease; } section { display: inline-block; position: relative; padding: .375rem .375rem 0; Height: 2.5 rem; background: #A9ADB6; border-radius: .25rem; perspective: 300; Box-shadow: 0-1px 2px # FFF, inset 0 1px 2px rgba(0,0,0,.2), inset 0.25rem 1rem rgba(0,0,0,.1); } .button { opacity: 0; } .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: center bottom; transform-style: preserve-3d; The font: 1.25 em / 2 "icon"; color: white; text-align: center; pointer-events: none; z-index: 100; } .innie, .outie, .spine, .shadow { position: absolute; width: 100%; } .innie, .outie { height: 100%; Background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%); border-radius: .25rem; } .innie:after, .outie:after { content:"t"; } .innie { background-color: #67E2FE; Text-shadow: 0-2px 4px rgba(0,0,0,.2); } .spine { top: .25rem; background: #20C7F3; height: .25rem; transform: rotateX(90deg); transform-origin: center top; } .shadow { top: 100%; left: 0; Height: 3.5 rem; transform-origin: center top; transform: rotateX(90deg); opacity: 0; z-index: 0; Background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0% transparent 100%); Background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0% transparent 100%); border-radius: .4rem; } .outie { background-color: #2EC8FA; transform: translateZ(.25rem); Text-shadow: 0 2px 4px rgba(0,0,0,.2); } section:hover { background: #EBEFF2; } section:hover .button { opacity: 1; } section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, Section :hover. Spine {transition-timing-function: cubic-bezier(.2,.7,.1,1.1); } section:hover .cover { transform: rotateX(-120deg); } section:hover .innie { background-color: #3ADAFC; } section:hover .spine { background-color: #52B1E0; } section:hover .outie { background-color: #2174A0; Color: rgba (255255255, 0). } section:hover .shadow { opacity: 1; transform: rotateX(45deg) scale(.95); } </style>Copy the codeTransform-style: preserve-3d; preserve-3d; preserve-3d Set the 3D effect.
Online effect and source code
Online effects: Click on me
Source code: Poke me see
(/ □ \)
Four: 3D photo wall
Effect:
HTML part:
<body class="body"> <div class="photo-wrap"> <! <div class="container"> <! </div> <div class="img 01">1</div> <div class="img 02">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>Copy the codeThe CSS part:
<style> @keyframes rotate-frame { 0% { transform: rotateX(-20deg) rotateY(0deg); } 10% { transform: rotateX(-20deg) rotateY(36deg); } 20% { transform: rotateX(-20deg) rotateY(72deg); } 30% { transform: rotateX(-20deg) rotateY(108deg); } 40% { transform: rotateX(-20deg) rotateY(144deg); } 50% { transform: rotateX(-20deg) rotateY(180deg); } 60% { transform: rotateX(-20deg) rotateY(216deg); } 70% { transform: rotateX(-20deg) rotateY(252deg); } 80% { transform: rotateX(-20deg) rotateY(288deg); } 90% { transform: rotateX(-20deg) rotateY(324deg); } 100% { transform: rotateX(-20deg) rotateY(360deg); } } body { background: #f9f9f9; } .photo-wrap { perspective: 800px; width: 800px; } .container { width: 800px; height: 500px; margin: 0 auto; position: relative; transform-style: preserve-3d; transform:rotateX(-10deg); animation: rotate-frame 10s linear infinite; } .img { width: 200px; height: 118px; line-height: 118px; text-align: center; position: absolute; top: 160px; left: 300px; Box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset; - its - box - reflect: below 3 px - its linear - gradient (top, rgba (0,0,0,0) 40%, rgba (0,0,0,0.5)); background: pink; Background: -Moz-Linear-gradient (Top, PINK, RGBA (0, 0, 255, 0.5)); Background :-webkit-gradient(Linear, 0 0, 0 bottom, from(# CCCCFF), to(rgba(174, 221, 129, 0.5)); Background: -O-Linear-gradient (Top, PINK, RGBA (0, 0, 255, 0.5)); transform: rotateY(0deg); } .img01 { transform: rotateY(0deg) translateZ(300px); } .img02 { transform: rotateY(40deg) translateZ(300px); } .img03 { transform: rotateY(80deg) translateZ(300px); } .img04 { transform: rotateY(120deg) translateZ(300px); } .img05 { transform: rotateY(160deg) translateZ(300px); } .img06 { transform: rotateY(200deg) translateZ(300px); } .img07 { transform: rotateY(240deg) translateZ(300px); } .img08 { transform: rotateY(280deg) translateZ(300px); } .img09 { transform: rotateY(320deg) translateZ(300px); } </style>Copy the code1. Reflection realization
Basic syntax:
img {
-webkit-box-reflect: below;
}Copy the codeThe offset attribute defines the distance between the image and the reflection:
img {
-webkit-box-reflect: below 3px;
}Copy the codeAdd cancellation effect to reflection:
- its - box - reflect: below 3 px - its linear - gradient (top, rgba (0,0,0,0) 40%, rgba (0,0,0,0.5));Copy the code2 online effect and source code
Online effects: Click on me
Source code: Poke me see
Reference: Source 1, Source 2
Addendum: I didn’t expect that this article was not only recommended by the most, but also recommended by the editor. I feel flattered, and I feel that I didn’t write carefully enough. Thank you for your likes, the blogger will continue to work hard in the future.