Shulou(Shulou.com)06/01 Report--

This article mainly shows you "Css how to achieve smiley cat animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Css how to achieve smiley cat animation" this article.

The code is as follows:

.face {

Left: 50%

Top: 50%

Position: absolute

Width: 400px

Height: 340px

Margin-left:-200px

Margin-top:-170px

Border-radius: 50% 35% 35%

Border: 2px solid # 000

Z-index: 10

Background: # f3f3f3

Overflow: hidden

}

. 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% 50% 0%

Transform: rotate (15deg)

-ms-transform: rotate (15deg)

-moz-transform: rotate (15deg)

-webkit-transform: rotate (15deg)

-o-transform: rotate (15deg)

}

.hair {

Position: absolute

Width: 180px

Height: 160px

Left: 50%

Margin-left:-90px

Background: # 8d8d8d

Overflow: hidden

Border-radius: 0 50%

}

.hair div {

Width: 90px

Height: 160px

Background: # f0ac6b

}

. 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

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

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

Left: 18px

Border-radius: 50% 50% 50%

Background-image:-moz-radial-gradient (50% 50%, rgba (253, 214, 244, 0.80), rgba (253, 224, 244, 0.8) 66%, rgba (253, 234, 247, 0.8) 100%)

Background-image:-webkit-radial-gradient (50% 50%, rgba (253, 214, 244, 0.80), rgba (253, 224, 244, 0.8) 66%, rgba (253, 234, 247, 0.8) 100%)

Background-image:-ms-radial-gradient (50% 50%, rgba (253, 214, 244, 0.80), rgba (253, 224, 244, 0.8) 66%, rgba (253, 234, 247, 0.8) 100%)

Opacity: 0.0

Transition: all 0.1s ease-in 0.2s

}

.nose {

Width: 30px

Height: 10px

Border-bottom: 8px solid # 000

Border-radius: 0% 50%

Top: 250px

Left: 50%

Margin-left:-15px

Position: absolute

}

. 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% 20% 50%

Position: absolute

Left: auto

Right: 0

}

. 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% 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%

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) {

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% 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-wrap .right {

Transform: rotateY (180deg)

-webkit-transform: rotateY (180deg)

-moz-transform: rotateY (180deg)

Margin-top:-85px

}

.container: hover. Ear-wrap > div:first-child {

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

}

.container: hover. Ear-wrap > div:last-child {

Transform: rotate (0deg)

-ms-transform: rotate (0deg)

-moz-transform: rotate (0deg)

-webkit-transform: rotate (0deg)

-o-transform: rotate (0deg)

Border-radius: 80%, 60%, 0%

Transition: all 1s

}

.container: hover. Eye-bottom {

Margin-top: 30px

Transition: all 1s

}

.container: hover. Eye-red {

Opacity: 1

Transition: all 2.5s

}

.container: hover .mouth {

Border-radius: 50%

Transition: all 1s

}

.container: hover. Eye-core {

Width: 40px

Margin-left:-20px

Transition: all 1s

}

These are all the contents of the article "how to animate smiley cats with Css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.