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

This article mainly explains "how to use html5 and css3 to achieve animation into avatars", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use html5 and css3 to achieve animation into avatars" bar!

The code for the implementation.

Html Code:

XML / HTML code copies content to text

< div class = 'stage' >

< div class = '图像' >

< img src = " https://cache.yisu.com/upload/information/20220117/488/21350.jpg" >

< div class = '笑脸' >

< svg宽度= " 30px"高度= " 30px" >

< path fill = " #effedd" d = " M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15s15-6.7,15-15C30,6.7,23.3,0,15 ，0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9,18,10.5C18,9.1,19.1,8,20.5,8z M10。 5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5C8,9.1,9.1,8,10.5,8z M15,26c-5， 0-9-4-9-9h4c0,3.3,2.7,6,6,6s6-2.7,6-6h4C24,22,20,26,15,26z" />

Css3 Code:

CSS code copies content to text

.stage {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

Height: 460px

Width: 480px

}

.avatar {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

Height: 64px

Width: 64px

Background repetition: no repetition

Background-size: cover

Boundary radius: 50%

-webkit-transform-origin: center

-ms-transform-origin: center

Transform-origin: center

}

.avatar: before {

Content:''

Position: absolutely

Up to:-8%

Right, right:-8%

Height: 17. 06667px

Width: 17. 06667px

Background: # bec4bc

Boundary radius: 50%

Border: 3px pure white

}

.avatar: nth-of-type (1) {

-webkit-animation:ani1 2s 0.1s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani1 2s 0.1s cube-bezier (0.175, 0.885, 0.32, 1.275) retweets

}

@-webkit-keyframes ani1 {

0% 10% 20% {

-webkit-transform: rotation (45deg) conversion (0) rotation (- 45deg)

Conversion: rotate (45deg) translate (0) rotate (- 45deg)

}

34% 100% {

-webkit-transform: rotation (45deg) conversion (208px) rotation (- 45deg)

Transformation: rotate (45deg), translate (208px), rotate (- 45deg)

}

}

@ keyframes ani1 {

0% 10% 20% {

-webkit-transform: rotation (45deg) conversion (0) rotation (- 45deg)

Conversion: rotate (45deg) translate (0) rotate (- 45deg)

}

34% 100% {

-webkit-transform: rotation (45deg) conversion (208px) rotation (- 45deg)

Transformation: rotate (45deg), translate (208px), rotate (- 45deg)

}

}

.avatar: nth-of-type (2) {

-webkit-animation:ani2 2s 0.2s cubic Bessel (0.175, 0.885, 0.32, 1.275)

Animation: ani2 2s 0.2s cubic Bessel (0.175, 0.885, 0.32, 1.275)

}

@-webkit-keyframes ani2 {

0% 10% 20% {

-webkit-transform: rotation (90deg) conversion (0) rotation (- 90deg)

Transform: rotate (90 degrees) translate (0) rotate (- 90 degrees)

}

34% 100% {

-webkit-transform: rotation (90deg) conversion (208px) rotation (- 90deg)

Transformation: rotate (90deg), translate (208px), rotate (- 90deg)

}

}

@ keyframes ani2 {

0% 10% 20% {

-webkit-transform: rotation (90deg) conversion (0) rotation (- 90deg)

Transform: rotate (90 degrees) translate (0) rotate (- 90 degrees)

}

34% 100% {

-webkit-transform: rotation (90deg) conversion (208px) rotation (- 90deg)

Transformation: rotate (90deg), translate (208px), rotate (- 90deg)

}

}

.avatar: nth-of-type (3) {

-webkit-animation:ani3 2s 0.3s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani3 2s 0.3s cube-bezier (0.175, 0.885, 0.32, 1.275)

}

@-webkit-keyframes ani3 {

0% 10% 20% {

-webkit-transform: rotation (135deg) conversion (0) rotation (- 135deg)

Transform: rotate (135 degrees) translate (0) rotate (- 135 degrees)

}

34% 100% {

-webkit-transform: rotation (135deg) conversion (208px) rotation (- 135deg)

Transform: rotate (135deg) translation (208px) rotate (- 135deg)

}

}

@ keyframes ani3 {

0% 10% 20% {

-webkit-transform: rotation (135deg) conversion (0) rotation (- 135deg)

Transform: rotate (135 degrees) translate (0) rotate (- 135 degrees)

}

34% 100% {

-webkit-transform: rotation (135deg) conversion (208px) rotation (- 135deg)

Transform: rotate (135deg) translation (208px) rotate (- 135deg)

}

}

.avatar: nth-of-type (4) {

-webkit-animation:ani4 2s 0.4s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani4 2s 0.4s cubic Bezier curve (0.175, 0.885, 0.32, 1.275) forward

}

@-webkit-keyframes ani4 {

0% 10% 20% {

-webkit-transform: rotation (180deg) conversion (0) rotation (- 180deg)

Transform: rotate (180 degrees) translate (0) rotate (- 180 degrees)

}

34% 100% {

-webkit-transform: rotation (180deg) conversion (208px) rotation (- 180deg)

Transform: rotate (180deg) translation (208px) rotate (- 180deg)

}

}

@ keyframes ani4 {

0% 10% 20% {

-webkit-transform: rotation (180deg) conversion (0) rotation (- 180deg)

Transform: rotate (180 degrees) translate (0) rotate (- 180 degrees)

}

34% 100% {

-webkit-transform: rotation (180deg) conversion (208px) rotation (- 180deg)

Transform: rotate (180deg) translation (208px) rotate (- 180deg)

}

}

.avatar: nth-of-type (5) {

-webkit-animation:ani5 2s 0.5s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani5 2s 0.5s cube-bezier (0.175, 0.885, 0.32, 1.275) retweets

}

@-webkit-keyframes ani5 {

0% 10% 20% {

-webkit-transform: rotation (225deg) conversion (0) rotation (- 225deg)

Transform: rotate (225deg) translate (0) rotate (- 225deg)

}

34% 100% {

-webkit-transform: rotation (225deg) conversion (208px) rotation (- 225deg)

Transformation: rotate (225deg), translate (208px), rotate (- 225deg)

}

}

@ keyframes ani5 {

0% 10% 20% {

-webkit-transform: rotation (225deg) conversion (0) rotation (- 225deg)

Transform: rotate (225deg) translate (0) rotate (- 225deg)

}

34% 100% {

-webkit-transform: rotation (225deg) conversion (208px) rotation (- 225deg)

Transformation: rotate (225deg), translate (208px), rotate (- 225deg)

}

}

.avatar: nth-of-type (6) {

-webkit-animation:ani6 2s 0.6s cubic Bessel (0.175, 0.885, 0.32, 1.275)

Animation: ani6 2s 0.6s cubic Bezier curve (0.175, 0.885, 0.32, 1.275) forward

}

@-webkit-keyframes ani6 {

0% 10% 20% {

-webkit-transform: rotation (270deg) conversion (0) rotation (- 270deg)

Transform: rotate (270 degrees) translate (0) rotate (- 270 degrees)

}

34% 100% {

-webkit-transform: rotation (270deg) conversion (208px) rotation (- 270deg)

Transformation: rotate (270deg), translate (208px), rotate (- 270deg)

}

}

@ keyframes ani6 {

0% 10% 20% {

-webkit-transform: rotation (270deg) conversion (0) rotation (- 270deg)

Transform: rotate (270 degrees) translate (0) rotate (- 270 degrees)

}

34% 100% {

-webkit-transform: rotation (270deg) conversion (208px) rotation (- 270deg)

Transformation: rotate (270deg), translate (208px), rotate (- 270deg)

}

}

.avatar: nth-of-type (7) {

-webkit-animation:ani7 2s 0.7s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani7 2s 0.7s cubic Bezier curve (0.175, 0.885, 0.32, 1.275) forward

}

@-webkit-keyframes ani7 {

0% 10% 20% {

-webkit-transform: rotation (315deg) conversion (0) rotation (- 315deg)

Transform: rotate (315 degrees) translate (0) rotate (- 315 degrees)

}

34% 100% {

-webkit-transform: rotation (315deg) conversion (208px) rotation (- 315deg)

Transform: rotate (315deg) translation (208px) rotate (- 315deg)

}

}

@ keyframes ani7 {

0% 10% 20% {

-webkit-transform: rotation (315deg) conversion (0) rotation (- 315deg)

Transform: rotate (315 degrees) translate (0) rotate (- 315 degrees)

}

34% 100% {

-webkit-transform: rotation (315deg) conversion (208px) rotation (- 315deg)

Transform: rotate (315deg) translation (208px) rotate (- 315deg)

}

}

.avatar: nth-of-type (8) {

-webkit-animation:ani8 2s 0.8s cube-bezier (0.175, 0.885, 0.32, 1.275)

Animation: ani8 2s 0.8s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward

}

@-webkit-keyframes ani8 {

0% 10% 20% {

-webkit-transform: rotation (360deg) conversion (0) rotation (- 360deg)

Transform: rotate (360 degrees) translate (0) rotate (- 360 degrees)

}

34% 100% {

-webkit-transform: rotation (360deg) conversion (208px) rotation (- 360deg)

Transformation: rotate (360deg), translate (208px), rotate (- 360deg)

}

}

@ keyframes ani8 {

0% 10% 20% {

-webkit-transform: rotation (360deg) conversion (0) rotation (- 360deg)

Transform: rotate (360 degrees) translate (0) rotate (- 360 degrees)

}

34% 100% {

-webkit-transform: rotation (360deg) conversion (208px) rotation (- 360deg)

Transformation: rotate (360deg), translate (208px), rotate (- 360deg)

}

}

.avatar: nth-of-type (4): previously, .avatar: nth-of-type (2): before {

-webkit-animation: bounce 3s 1.8s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, change color, 1s 1.8s, cubic Bessel (0.175, 0.885, 0.88, 0.32, 1.275) forward.

Animation: beating 3s 1.8s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, changing color, 1s, 1.8s, cubic Bessel (0.175, 0.885, 0.88, 0.32, 1.275) forward

}

.avatar: nth-of-type (7): before {

-webkit-animation: jump forward 3s 2s cubic Bessel (0.175, 0.885, 0.32, 1.275), change color, 1s, 2s, cubic Bessel (0.175, 0.885, 0.32, 1.275)

Animation: forward jump 3s 2s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, color change, 1s 2s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward.

}

.avatar: nth-of-type (3): before {

-webkit-animation: bounce 3s 2.8s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, colorchange 1s, 2.8s, cubic Bessel (0.175, 0.88, 0.32, 1.275) forward

Animation: forward jump 3-second 2.8-second cubic Bessel (0.175, 0.885, 0.32, 1.275), color change, 1-second, 2.8-second, cubic Bessel (0.175, 0.885, 0.32, 1.275)

}

.avatar: nth-of-type (1): before {

-webkit-animation: jump forward 3s 3s cubic Bessel (0.175, 0.885, 0.32, 1.275), change color, 1s, 3s, cubic Bessel (0.175, 0.885, 0.32, 1.275)

Animation: forward jump 3s 3s cubic Bessel (0.175, 0.885, 0.32, 1.275), color change, 1s 3s, cubic Bessel (0.175, 0.885, 0.32, 1.275).

}

.avatar: nth-of-type (6): before {

-webkit-animation: bounce 3s 3.2s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, change color, 1s 3.2, cubic Bessel (0.175, 0.885, 0.32, 1.275) forward.

Animation: forward jump 3s 3.2s cubic Bessel (0.175, 0.885, 0.32, 1.275), change color, 1s, 3.2s, cubic Bessel (0.175, 0.88, 0.88, 0.32, 1.275) forward.

}

.avatar: nth-of-type (5): before {

-webkit-animation: rebound 3s 3.8s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, colorchange 1s, 3.8s, cubic Bessel (0.175, 0.885, 0.88, 0.32, 1.275)

Animation: before jumping 3 seconds, 3.8 seconds cubic Bessel (0.175, 0.885, 0.32, 1.275), discoloration, 3.8 seconds, cubic Bessel (0.175, 0.885, 0.32, 1.275).

}

.avatar: nth-of-type (8): before {

-webkit-animation: jump forward 3s 4s cubic Bessel (0.175, 0.885, 0.32, 1.275), change color, 1s, 4s, cubic Bessel (0.175, 0.885, 0.32, 1.275)

Animation: forward jump 3s 4s cubic Bessel (0.175, 0.885, 0.32, 1.275) forward, color change, 1s 4s cubic Bessel (0.175, 0.885, 0.32, 1.275)

}

. Picture {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

Height: 220px

Width: 220px

}

.image img {

Position: relative

Height: 220px

Width: 220px

Boundary radius: 50%

Z index: 1

}

.image: before {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

Content:''

Height: 100%

Width: 100%

Background: # f9fff7

Border: 3px solid line # e7f5d1

Boundary radius: 50%

-webkit-animation: pulse 1s 1.4s relief

Animation: pulse 1 second 1.4 second relaxation

-webkit-animation-iteration-count:3

Animation-iteration-count:3

}

.image .smiley {

Position: absolutely

Top:-8px

Right:-8px

Height: 64px

Width: 64px

Background: # b5e763

Boundary radius: 50%

Border: 5px pure white

-webkit-animation: bounce forward 5s cubic Bezier curve (0.175, 0.885, 0.32, 1.275)

Animation: bounce forward 5 seconds cubic Bessel (0.175, 0.885, 0.32, 1.275)

-webkit-transform-origin: center

-ms-transform-origin: center

Transform-origin: center

Z index: 1

}

.image .smiley svg {

Position: absolutely

Maximum: 0

Right: 0

Bottom bottom: 0

Left: 0

Margin: automatic

-webkit-animation: bounce 5 seconds 0.075s cubic Bezier curve (0.175, 0.885, 0.32, 1.275)

Animation: forward jump 5 seconds 0.075 seconds cubic Bessel (0.175, 0.885, 0.32, 1.275)

}

@-webkit-keyframes bounce {

0% {

-webkit-transform:scale (0)

Transformations: scale (0)

}

5% {

-webkit-transform:scale (1.5)

Conversion: scale (1.5)

}

10% par 100% {

-webkit-transform:scale (1)

Conversion: scale (1)

}

}

@ keyframes bounce {

0% {

-webkit-transform:scale (0)

Transformations: scale (0)

}

5% {

-webkit-transform:scale (1.5)

Conversion: scale (1.5)

}

10% par 100% {

-webkit-transform:scale (1)

Conversion: scale (1)

}

}

@-webkit-keyframes pulse {

0% {

-webkit-transform:scale (0.1 min 0.1)

Conversion: scale (0.1 min 0.1)

Opacity: 0.0

}

50% {

Transparency: 1.0

}

100% {

-webkit-transform:scale (3)

Conversion: scale (3)

Opacity: 0.0

}

}

@ keyframes pulse {

0% {

-webkit-transform:scale (0.1 min 0.1)

Conversion: scale (0.1 min 0.1)

Opacity: 0.0

}

50% {

Transparency: 1.0

}

100% {

-webkit-transform:scale (3)

Conversion: scale (3)

Opacity: 0.0

}

}

@-webkit-keyframes colorchange {

0% {

Background: # bec4bc

}

100% {

Background: # b5e763

}

}

@ keyframes colorchange {

0% {

Background: # bec4bc

}

100% {

Background: # b5e763

}

}

.avatar: nth-of-type (1) {

Background picture: url ("128.jpg")

}

.avatar: nth-of-type (2) {

Background picture: url ("rasagy.jpg")

}

.avatar: nth-of-type (3) {

Background picture: url ("geeftvorm.jpg")

}

.avatar: nth-of-type (4) {

Background picture: url ("VinThomas.jpg")

}

.avatar: nth-of-type (5) {

Background picture: url ("ladylexy.jpg")

}

.avatar: nth-of-type (6) {

Background picture: url ("claudioguglieri.jpg")

}

.avatar: nth-of-type (7) {

Background picture: url ("jina.jpg")

}

.avatar: nth-of-type (8) {

Background picture: url ("peterme.jpg")

} 9161

Thank you for your reading, the above is "how to use html5 and css3 to achieve animation into avatars" content, after the study of this article, I believe that how to use html5 and css3 to achieve animation into avatars of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.