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

The knowledge of this article "how to use CSS3 to achieve NetEase Cloud Lonely Planet Special effects" is not quite understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use CSS3 to achieve NetEase Cloud Lonely Planet Special effects" article.

HTML Code:

CSS3 code

# effect-music {

Position: relative

Margin: auto

Width: 100%

Height: 400px

Overflow: hidden

}

# effect-music > .image {

Position: absolute

Left: 0

Right: 0

Top: 0

Bottom: 0

Margin: auto

Width: 200px

Height: 200px

Background: url (https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575820971101&di=935fabf797c3b30f45f7ed90666f9399&imgtype=0&src=http%3A%2F%2Fimglf1.ph.126.net%2FJceVstVIHMeAlbMvdbYwlA%3D%3D%2F2456713596830921578.jpg);

Background-size: cover

Background-position: center center

Border-radius: 50%

-webkit-border-radius: 50%

-moz-border-radius: 50%

-ms-border-radius: 50%

-o-border-radius: 50%

Animation: rotate 10s linear 0s infinite

-webkit-animation: rotate 10s linear 0s infinite

}

# effect-music > .wave {

Position: absolute

Opacity: 0

Left: 0

Right: 0

Top: 0

Bottom: 0

Margin: auto

Width: 204px

Height: 204px

Border-radius: 50%

Border: 2px solid # eee

Animation: wave 4s linear 0s infinite

-webkit-animation: wave 4s linear 0s infinite

}

# effect-music > .wave:: after {

Content: ""

Position: absolute

Top:-4px

Left: 50%

Width: 6px

Height: 6px

Overflow: hidden

Border-radius: 5px

-webkit-border-radius: 5px

-moz-border-radius: 5px

-ms-border-radius: 5px

-o-border-radius: 5px

Background-color: # ccc

}

# effect-music > .wave:nth-child (2) {

Animation-delay: 1s

}

# effect-music > .wave:nth-child (3) {

Animation-delay: 2s

}

# effect-music > .wave:nth-child (4) {

Animation-delay: 3s

}

@ keyframes rotate {

From {

Transform: rotate (0deg)

-webkit-transform: rotate (0deg)

-moz-transform: rotate (0deg)

-ms-transform: rotate (0deg)

-o-transform: rotate (0deg)

}

To {

Transform: rotate (360deg)

-webkit-transform: rotate (360deg)

-moz-transform: rotate (360deg)

-ms-transform: rotate (360deg)

-o-transform: rotate (360deg)

}

}

@ keyframes wave {

From {

Opacity: 1

Transform: rotate (0deg) scale (1)

-webkit-transform: rotate (0deg) scale (1)

-moz-transform: rotate (0deg) scale (1)

-ms-transform: rotate (0deg) scale (1)

-o-transform: rotate (0deg) scale (1)

}

To {

Opacity: 0

Transform: rotate (- 300deg) scale (2.2)

-webkit-transform: rotate (- 300deg) scale (2.2)

-moz-transform: rotate (- 300deg) scale (2.2)

-ms-transform: rotate (- 300deg) scale (2.2)

-o-transform: rotate (- 300deg) scale (2.2)

}

}

Knowledge point extraction

A total of 4 div are set up here, which are used to do the outer planet rotation effect. We spread the animation execution time of 4 div evenly through animation-delay to achieve the cyclic effect.

The rotating planet is made of: after pseudo-element, and each time it is set to the middle position of the top of the div, which ensures that the rotation of the planet is always in a circular trajectory. Here you can think about how to write this CSS if the starting position is not at the top.

In some browsers, border is still displayed as a box when border-radius is set. In this case, you can use box-shadow to simulate border, and you can try it yourself.

The above is about "how to use CSS3 to achieve NetEase Cloud Lonely Planet Special effects" this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge, please 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.