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

This article mainly introduces the "gear animation special effects code realized by HTML5". In the daily operation, I believe that many people have doubts about the gear animation special effects code realized by HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "gear animation special effects code realized by HTML5". Next, please follow the editor to study!

This is a special effect of gear animation based on HTML5. We convert the physical principle of gear rotation into HTML5 code and realize the animation effect of simulating gear rotation on the web page. The biggest feature of the gear animation is that it is composed of many gears, which greatly improves the algorithm requirements of gear transmission, and we do not use JavaScript, but pure CSS3.

HTML code

XML/HTML Code copies content to the clipboard

CSS code

CSS Code copies content to the clipboard

# level {

Width:100%

Height:1px

Position:absolute

Top:50%

}

# content {

Text-align:center

Margin-top:-327px

}

# gears {

Width:478px

Height:655px

Position:relative

Display:inline-block

Vertical-align:middle

}

# gears-static {

Background:url (FgFnjks.png) no-repeat-363px-903px

Width:329px

Height:602px

Position:absolute

Bottombottom:5px

Rightright:0px

Opacity:0.4

}

# title {

Vertical-align:middle

Color:#9EB7B5

Width:43%

Display:inline-block

}

# title h2 {

Font-family: 'PTSansNarrowBold', sans-serif

Font-size:3.6em

Text-shadow:rgba (0,0,0,0.36) 7px 7px 10px

}

# title p {

Font-family: sans-serif

Font-size:1.2em

Line-height:148%

Text-shadow:rgba (0,0,0,0.36) 1px 1px 0px

}

.shadow {

-webkit-box-shadow: 4px 7px 25px 10px rgba (43,36,0,0.36)

-moz-box-shadow: 4px 7px 25px 10px rgba (43,36,0,0.36)

Box-shadow: 4px 7px 25px 10px rgba (43,36,0,0.36)

}

/ * gear-system-1*/

# gear15 {

Background: url (FgFnjks.png) no-repeat 0-993px

Width: 321px

Height: 321px

Position:absolute

Left:45px

Top:179px

-webkit-animation: rotate-back 24000ms linear infinite

-moz-animation: rotate-back 24000ms linear infinite

-ms-animation: rotate-back 24000ms linear infinite

Animation: rotate-back 24000ms linear infinite

}

# shadow15 {

Width:306px

Height:306px

-webkit-border-radius:153px

-moz-border-radius:153px

Border-radius:153px

Position:absolute

Left:52px

Top:186px

}

# gear14 {

Background: url (FgFnjks.png) no-repeat 0-856px

Width: 87px

Height: 87px

Position:absolute

Left:162px

Top:296px

}

# shadow14 {

Width:70px

Height:70px

-webkit-border-radius:35px

-moz-border-radius:35px

Border-radius:35px

Position:absolute

Left:171px

Top:304px

}

# gear13 {

Background: url (FgFnjks.png) no-repeat 0-744px

Width: 62px

Height: 62px

Position:absolute

Left:174px

Top:309px

-webkit-animation: rotate 8000ms linear infinite

-moz-animation: rotate 8000ms linear infinite

-ms-animation: rotate 8000ms linear infinite

Animation: rotate 8000ms linear infinite

}

# shadow13 {

Width:36px

Height:36px

-webkit-border-radius:18px

-moz-border-radius:18px

Border-radius:18px

Position:absolute

Left:187px

Top:322px

}

/ * gear-system-2*/

# gear10 {

Background: url (FgFnjks.png) no-repeat 0-184px

Width: 122px

Height: 122px

Position:absolute

Left:175px

Top:0

-webkit-animation: rotate-back 8000ms linear infinite

-moz-animation: rotate-back 8000ms linear infinite

-ms-animation: rotate-back 8000ms linear infinite

Animation: rotate-back 8000ms linear infinite

}

# shadow10 {

Width:86px

Height:86px

-webkit-border-radius:43px

-moz-border-radius:43px

Border-radius:43px

Position:absolute

Left:193px

Top:18px

}

# gear3 {

Background: url (FgFnjks.png) no-repeat 0-1493px

Width: 85px

Height: 84px

Position:absolute

Left:194px

Top:19px

-webkit-animation: rotate 10000ms linear infinite

-moz-animation: rotate 10000ms linear infinite

-ms-animation: rotate 10000ms linear infinite

Animation: rotate 10000ms linear infinite

}

# shadow3 {

Width:60px

Height:60px

-webkit-border-radius:30px

-moz-border-radius:30px

Border-radius:30px

Position:absolute

Left:206px

Top:31px

}

/ * gear-system-3*/

# gear9 {

Background: url (FgFnjks.png) no-repeat-371px-280px

Width: 234px

Height: 234px

Position:absolute

Left:197px

Top:96px

-webkit-animation: rotate 12000ms linear infinite

-moz-animation: rotate 12000ms linear infinite

-ms-animation: rotate 12000ms linear infinite

Animation: rotate 12000ms linear infinite

}

# shadow9 {

Width:200px

Height:200px

-webkit-border-radius:100px

-moz-border-radius:100px

Border-radius:100px

Position:absolute

Left:214px

Top:113px

}

# gear7 {

Background: url (FgFnjks.png) no-repeat-371px 0

Width: 108px

Height: 108px

Position:absolute

Left:260px

Top:159px

-webkit-animation: rotate-back 10000ms linear infinite

-moz-animation: rotate-back 10000ms linear infinite

-ms-animation: rotate-back 10000ms linear infinite

Animation: rotate-back 10000ms linear infinite

}

# shadow7 {

Width:76px

Height:76px

-webkit-border-radius:38px

-moz-border-radius: 38px

Border-radius: 38px

Position:absolute

Left:276px

Top:175px

}

/ * gear-system-4*/

# gear6 {

Background: url (FgFnjks.png) no-repeat 0-1931px

Width: 134px

Height: 134px

Position:absolute

Left:305px

Bottombottom:212px

-webkit-animation: rotate-back 10000ms linear infinite

-moz-animation: rotate-back 10000ms linear infinite

-ms-animation: rotate-back 10000ms linear infinite

Animation: rotate-back 10000ms linear infinite

}

# shadow6 {

Width:98px

Height:98px

-webkit-border-radius:49px

-moz-border-radius: 49px

Border-radius: 49px

Position:absolute

Left:323px

Bottombottom:230px

}

# gear4 {

Background: url (FgFnjks.png) no-repeat 0-1627px

Width: 69px

Height: 69px

Position:absolute

Left:337px

Bottombottom:245px

-webkit-animation: rotate-back 10000ms linear infinite

-moz-animation: rotate-back 10000ms linear infinite

-ms-animation: rotate-back 10000ms linear infinite

Animation: rotate-back 10000ms linear infinite

}

/ * gear-system-5*/

# gear12 {

Background: url (FgFnjks.png) no-repeat 0-530px

Width: 164px

Height: 164px

Position:absolute

Left:208px

Bottombottom:85px

-webkit-animation: rotate 8000ms linear infinite

-moz-animation: rotate 8000ms linear infinite

-ms-animation: rotate 8000ms linear infinite

Animation: rotate 8000ms linear infinite

}

# shadow12 {

Width:124px

Height:124px

-webkit-border-radius:62px

-moz-border-radius:62px

Border-radius:62px

Position:absolute

Left:225px

Bottombottom:107px

}

# gear11 {

Background: url (FgFnjks.png) no-repeat 0-356px

Width: 125px

Height: 124px

Position:absolute

Left:228px

Bottombottom:105px

-webkit-animation: rotate-back 10000ms linear infinite

-moz-animation: rotate-back 10000ms linear infinite

-ms-animation: rotate-back 10000ms linear infinite

Animation: rotate-back 10000ms linear infinite

}

# shadow11 {

Width:88px

Height:88px

-webkit-border-radius:44px

-moz-border-radius:44px

Border-radius:44px

Position:absolute

Left:247px

Bottombottom:123px

}

# gear8 {

Background: url (FgFnjks.png) no-repeat-371px-158px

Width: 72px

Height: 72px

Position:absolute

Left:254px

Bottombottom:131px

-webkit-animation: rotate 6000ms linear infinite

-moz-animation: rotate 6000ms linear infinite

-ms-animation: rotate 6000ms linear infinite

Animation: rotate 6000ms linear infinite

}

# shadow8 {

Width:42px

Height:42px

-webkit-border-radius:21px

-moz-border-radius: 21px

Border-radius: 21px

Position:absolute

Left:269px

Bottombottom:146px

}

/ * gear1*/

# gear1 {

Background: url (FgFnjks.png) no-repeat 0 0

Width: 135px

Height: 134px

Position:absolute

Left:83px

Bottombottom:111px

-webkit-animation: rotate-back 10000ms linear infinite

-moz-animation: rotate-back 10000ms linear infinite

-ms-animation: rotate-back 10000ms linear infinite

Animation: rotate-back 10000ms linear infinite

}

# shadow1 {

Width:96px

Height:96px

-webkit-border-radius:48px

-moz-border-radius:48px

Border-radius:48px

Position:absolute

Left:103px

Bottombottom:130px

}

/ * gear-system-6*/

# gear5 {

Background: url (FgFnjks.png) no-repeat 0-1746px

Width: 134px

Height: 135px

Position:absolute

Left:22px

Top:108px

-webkit-animation: rotate 10000ms linear infinite alternate

-moz-animation: rotate 10000ms linear infinite alternate

-ms-animation: rotate 10000ms linear infinite alternate

Animation: rotate 10000ms linear infinite alternate

}

# shadow5 {

Width:96px

Height:96px

-webkit-border-radius:48px

-moz-border-radius:48px

Border-radius:48px

Position:absolute

Left:41px

Top:127px

}

# gear2 {

Background: url (FgFnjks.png) no-repeat 0-1364px

Width: 80px

Height: 79px

Position:absolute

Left:49px

Top:136px

-webkit-animation: rotate-back 10000ms linear infinite alternate

-moz-animation: rotate-back 10000ms linear infinite alternate

-ms-animation: rotate-back 10000ms linear infinite alternate

Animation: rotate-back 10000ms linear infinite alternate

}

/ * weight*/

# weight {

Background: url (FgFnjks.png) no-repeat-371px-564px

Width: 34px

Height: 92px

Position:absolute

Left:1px

Bottombottom:0

-webkit-animation: up 10000ms linear infinite alternate

-moz-animation: up 10000ms linear infinite alternate

-ms-animation: up 10000ms linear infinite alternate

Animation: up 10000ms linear infinite alternate

}

# shadowweight {

Width:10px

Height:80px

Position:absolute

Left:12px

Bottombottom:0px

-webkit-animation: up 10000ms linear infinite alternate

-moz-animation: up 10000ms linear infinite alternate

-ms-animation: up 10000ms linear infinite alternate

Animation: up 10000ms linear infinite alternate

}

/ * chain*/

# chain-circle {

Background: url (FgFnjks.png) no-repeat-371px-706px

Width:146px

Height:147px

Position:absolute

Left:17px

Top:102px

-webkit-animation: rotate 10000ms linear infinite alternate

-moz-animation: rotate 10000ms linear infinite alternate

-ms-animation: rotate 10000ms linear infinite alternate

Animation: rotate 10000ms linear infinite alternate

}

# chain {

Width:1px

Height:380px

Border-left:2px dotted # C8D94A

Position:absolute

Left:17px

Top:175px

Opacity:0.7

-webkit-animation: collapse 10000ms linear infinite alternate

-moz-animation: collapse 10000ms linear infinite alternate

-ms-animation: collapse 10000ms linear infinite alternate

Animation: collapse 10000ms linear infinite alternate

}

/ * ANIMATIONS*/

/ * rotate*/

@ keyframes "rotate" {

From {

-webkit-transform: rotate (0deg)

-moz-transform: rotate (0deg)

-o-transform: rotate (0deg)

-ms-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-webkit-transform: rotate (360deg)

-moz-transform: rotate (360deg)

-o-transform: rotate (360deg)

-ms-transform: rotate (360deg)

Transform: rotate (360deg)

}

}

@-moz-keyframes rotate {

From {

-moz-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-moz-transform: rotate (360deg)

Transform: rotate (360deg)

}

}

@-webkit-keyframes "rotate" {

From {

-webkit-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-webkit-transform: rotate (360deg)

Transform: rotate (360deg)

}

}

@-ms-keyframes "rotate" {

From {

-ms-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-ms-transform: rotate (360deg)

Transform: rotate (360deg)

}

}

@-o-keyframes "rotate" {

From {

-o-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-o-transform: rotate (360deg)

Transform: rotate (360deg)

}

}

/ * rotate-back*/

@ keyframes "rotate-back" {

From {

-webkit-transform: rotate (0deg)

-moz-transform: rotate (0deg)

-o-transform: rotate (0deg)

-ms-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-webkit-transform: rotate (- 360deg)

-moz-transform: rotate (- 360deg)

-o-transform: rotate (- 360deg)

-ms-transform: rotate (- 360deg)

Transform: rotate (- 360deg)

}

}

@-moz-keyframes rotate-back {

From {

-moz-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-moz-transform: rotate (- 360deg)

Transform: rotate (- 360deg)

}

}

@-webkit-keyframes "rotate-back" {

From {

-webkit-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-webkit-transform: rotate (- 360deg)

Transform: rotate (- 360deg)

}

}

@-ms-keyframes "rotate-back" {

From {

-ms-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-ms-transform: rotate (- 360deg)

Transform: rotate (- 360deg)

}

}

@-o-keyframes "rotate-back" {

From {

-o-transform: rotate (0deg)

Transform: rotate (0deg)

}

To {

-o-transform: rotate (- 360deg)

Transform: rotate (- 360deg)

}

}

/ * weight up*/

@ keyframes "up" {

From {

Bottombottom: 0px

}

To {

Bottombottom: 340px

}

}

@-moz-keyframes up {

From {

Bottombottom: 0px

}

To {

Bottombottom: 340px

}

}

@-webkit-keyframes "up" {

From {

Bottombottom: 0px

}

To {

Bottombottom: 340px

}

}

@-ms-keyframes "up" {

From {

Bottombottom: 0px

}

To {

Bottombottom: 340px

}

}

@-o-keyframes "up" {

From {

Bottombottom: 0px

}

To {

Bottombottom: 340px

}

}

/ * chain up and down*/

@ keyframes "collapse" {

From {

Height: 387px

}

To {

Height: 48px

}

}

@-moz-keyframes collapse {

From {

Height: 387px

}

To {

Height: 48px

}

}

@-webkit-keyframes "collapse" {

From {

Height: 387px

}

To {

Height: 48px

}

}

@-ms-keyframes "collapse" {

From {

Height: 387px

}

To {

Height: 48px

}

}

@-o-keyframes "collapse" {

From {

Height: 387px

}

To {

Height: 48px

}

}

At this point, on the "HTML5 implementation of gear animation special effects code" is over, I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.