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

This article mainly introduces "how to use css3 to make Naruto write wheel eye opening to reincarnation eye and evolution process". In daily operation, it is believed that many people have doubts about how to use css3 to make Naruto write wheel eye opening to reincarnation eye and evolution process. The editor consulted all kinds of data and sorted out simple and useful operation methods. I hope it will be helpful for you to answer the doubts about how to use css3 to make Naruto write wheel eye opening to reincarnation eye and evolution process. Next, please follow the editor to study!

The specific analysis is as follows:

Today is the day when Naruto (cartoon) announces the end. Friends who have seen Huo Ying all know that I won't say much about what Wheel Eye is. The following is a direct display of the whole effect, in the previous picture, take a look at it:

The compatibility of IE10, Firefox browser, Chrome browser, Opera browser and 360browser (two modes) has been tested and passed.

Warm Tip: the above browser version numbers are up to date; each stage in the animation process will stay for about 5 seconds. I hope you won't fall into the illusion ^ _ ^.

Click here to demonstrate online. (since the special effects are based on css3, it is recommended to browse online using browsers such as Firefox or Google that support css3.)

Click here to download.

The HTML code is as follows:

The code is as follows:

The CSS code is as follows:

The code is as follows:

* {margin:0;padding:0;}

.container {width:800px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}

.eyesBoxs {width:130px;height:70px;position:absolute;top:50px;}

.pullLeft {left:100px;}

.pullRight {right:100px;}

.profile {

Width:130px

Height:70px

Background:#fff

Position:absolute

Top:0

Left:0

Overflow:hidden

Border-radius:0 70px 0 50px

}

.shadow {

Display:block

Width:130px

Height:70px

Position:absolute

Top:0

Z-index:5

Border-radius:0 90px 0 60px

Box-shadow:5px 12px 2px 5px rgba (0B0B0D0B0JEO .25) inset

}

.skewLeft {

Transform:skewX (15deg)

-webkit-transform:skewX (15deg)

-o-transform:skewX (15deg)

}

.skewRight {

Transform:skewX (- 15deg) scale (- 1)

-webkit-transform:skewX (- 15deg) scale (- 1)

-o-transform:skewX (- 15deg) scale (- 1)

}

.basic {

Width:60px

Height:60px

Background:#000

Position:absolute

Top:50%

Left:50%

Z-index:10

Margin-top:-30px

Border-radius:60%

}

.basic: before {

Content: ""

Display:block

Width:10px

Height:11px

Position:absolute

Left:15px

Top:15px

Z-index:100

Border-radius:60%

Background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225, 225), rgba (225, 225)

-webkit-background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225), rgba (225)

-o-background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225), rgba (225)

}

.pullLeft .basic {

Margin-left:-33px

}

.pullRight .basic {

Margin-left:-27px

}

.eyes {

Width:55px

Height:55px

Background:#ff0000

Position:absolute

Top:8px

Border-radius:60%

Box-shadow:0 0 2px 4px # bd0000 inset,0 00 2px # 000

}

.pullLeft .eyes {left:35px;}

.pullRight .eyes {right:35px;}

.eyes .line {

Width:64%

Height:64%

Background:#ff0000

Position:absolute

Right:0

Left:0

Top:10px

Margin:0 auto

Border-radius:60%

Box-shadow:0 0 2px 0 # b20000 inset

}

.eyes .line: before {

Content: ""

Display:block

Width:10px

Height:11px

Position:absolute

Left:3px

Top:4px

Z-index:100

Border-radius:60%

Background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225, 225), rgba (225, 225)

-webkit-background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225), rgba (225)

-o-background-image:radial-gradient (circle,rgb (225225225), rgb (225225225), rgba (225), rgba (225)

}

.eyes .line: after {

Content: ""

Display:block

Width:10px

Height:10px

Position:absolute

Background:#000

Right:0

Left:-1px

Top:13px

Z-index:100

Margin:0 auto

Border-radius:60%

Transform:rotate (150deg)

-webkit-transform:rotate (150deg)

-o-transform:rotate (150deg)

Animation:colour 0.5s ease-in 7s

-webkit-animation:colour 0.5s ease-in 7s

-o-animation:colour 0.5s ease-in 7s

}

@ keyframes colour {

0% {

Background:#000

}

100% {

Background:#f00

}

}

@-webkit-keyframes colour {

0% {

Background:#000

}

100% {

Background:#f00

}

}

@-o-keyframes colour {

0% {

Background:#000

}

100% {

Background:#f00

}

}

.hook {

Width:92%

Height:92%

Position:absolute

Right:0

Left:0

Top:5%

Margin:0 auto

Border-radius:60%

}

.hook .bar {

Display:block

Width:100%

Height:100%

Position:absolute

Left:0

Top:0

Border-radius:60%

}

.hook .bar b {

Display:block

Width:8px

Height:8px

Background:#000

Position:absolute

Left:0

Bottom:0

Border-radius:60%

}

.hook .bar b:after {

Content: ""

Width:8px

Height:8px

Border-color:transparent transparent # 000 transparent

Border-style:solid

Border-width:0 0 5px 0

Position:absolute

Top:-1px

Left:-3px

Z-index:100

Border-radius:0 0 0 70%

Transform:rotate (- 75deg)

-webkit-transform:rotate (- 75deg)

-o-transform:rotate (- 75deg)

}

Hook. Bar:nth-child (1) {

Transform:rotate (10deg)

-webkit-transform:rotate (10deg)

-o-transform:rotate (10deg)

}

Hook. Bar:nth-child (2) {

Transform:rotate (130deg)

-webkit-transform:rotate (130deg)

-o-transform:rotate (130deg)

}

Hook. Bar:nth-child (3) {

Transform:rotate (250deg)

-webkit-transform:rotate (250deg)

-o-transform:rotate (250deg)

}

.tube {

Width:93%

Height:93%

Position:absolute

Right:0

Left:0px

Top:2px

Margin:0 auto

Background:#000

Border-radius:60%

}

.tube .bar {

Display:block

Width:10px

Height:20px

Border-style:solid

Border-width:0 0 0 10px

Border-color:transparent transparent transparent black

Position:absolute

Border-radius:100% 00 0

}

.tube. Bar:nth-child (1) {

Top:-10px

Left:2px

Transform:rotate (- 10deg)

}

.tube. Bar:nth-child (2) {

Bottom:0px

Right:-10px

Transform:rotate (105deg)

-webkit-transform:rotate (105deg)

-o-transform:rotate (105deg)

}

.tube. Bar:nth-child (3) {

Bottom:-3px

Left:-10px

Transform:rotate (235deg)

-webkit-transform:rotate (235deg)

-o-transform:rotate (235deg)

}

.trans {

Width:130px

Height:70px

Position:absolute

Overflow:hidden

Top:0

Left:0

Border-radius:0 70px 0 50px

}

.trans .bar {

Display:block

Width:9px

Height:9px

Background:#000

Position:absolute

Top:50%

Z-index:2

Margin:-4px 0 0-4px

Border-radius:60%

}

.trans .bar: after {

Content: ""

Display:block

Width:11px

Height:12px

Position:absolute

Top:-13px

Left:-13px

Z-index:100

Border-radius:60%

Background:rgba (250, 250, 250. 85)

}

.pullLeft .trans .bar {

Transform:skewX (- 15deg)

-webkit-transform:skewX (- 15deg)

-o-transform:skewX (- 15deg)

}

.pullLeft .trans .bar {left:48%;}

.pullRight .trans .bar {

Transform:skewX (- 15deg) scale (- 1)

-webkit-transform:skewX (- 15deg) scale (- 1)

-o-transform:skewX (- 15deg) scale (- 1)

}

.pullRight .trans .bar {right:48%;}

. ani-narrow {

Animation:ani-narrow 0.5s linear 1s

-webkit-animation:ani-narrow 0.5s linear 1s

-o-animation:ani-narrow 0.5s linear 1s

}

@ keyframes ani-narrow {

From {

Transform:scale (1)

}

To {

Opacity:0

Transform:scale (0)

}

}

@-webkit-keyframes ani-narrow {

From {

-webkit-transform:scale (1)

}

To {

Opacity:0

-webkit-transform:scale (0)

}

}

@-o-keyframes ani-narrow {

From {

-o-transform:scale (1)

}

To {

Opacity:0

-o-transform:scale (0)

}

}

. ani-zoom {

Animation:ani-zoom 11s linear 0.8s

-webkit-animation:ani-zoom 11s linear 0.8s

-o-animation:ani-zoom 11s linear 0.8s

}

@ keyframes ani-zoom {

0% {

Opacity:0

Transform:scale (0)

}

6% {

Opacity:1

Transform:scale (1)

}

95% {

Opacity:1

Transform:scale (1)

}

100% {

Opacity:0

Transform:scale (1.5)

}

}

@-webkit-keyframes ani-zoom {

0% {

Opacity:0

-webkit-transform:scale (0)

}

6% {

Opacity:1

-webkit-transform:scale (1)

}

95% {

Opacity:1

-webkit-transform:scale (1)

}

100% {

Opacity:0

-webkit-transform:scale (1.5)

}

}

@-o-keyframes ani-zoom {

0% {

Opacity:0

-o-transform:scale (0)

}

6% {

Opacity:1

-o-transform:scale (1)

}

95% {

Opacity:1

-o-transform:scale (1)

}

100% {

Opacity:0

-o-transform:scale (1.5)

}

}

. ani-rotateHook {

Animation:ani-rotateHook 5s ease-in 2.5s

-webkit-animation:ani-rotateHook 5s ease-in 2.5s

-o-animation:ani-rotateHook 5s ease-in 2.5s

}

@ keyframes ani-rotateHook {

0% {

Opacity:0

Transform:scale (0) rotate (0)

}

15% {

Opacity:1

Transform:scale (1) rotate (- 360deg)

}

90% {

Opacity:1

Transform:scale (1) rotate (- 360deg)

}

100% {

Opacity:0

Transform:scale (1.8) rotate (- 540deg)

}

}

@-webkit-keyframes ani-rotateHook {

0% {

Opacity:0

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

}

15% {

Opacity:1

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

}

90% {

Opacity:1

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

}

100% {

Opacity:0

-webkit-transform:scale (1.8) rotate (- 540deg)

}

}

@-o-keyframes ani-rotateHook {

0% {

Opacity:0

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

}

15% {

Opacity:1

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

}

90% {

Opacity:1

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

}

100% {

Opacity:0

-o-transform:scale (1.8) rotate (- 540deg)

}

}

. ani-rotateTube {

Animation:ani-rotateTube 5s ease-in-out 6.5s

-webkit-animation:ani-rotateTube 5s ease-in-out 6.5s

-o-animation:ani-rotateTube 5s ease-in-out 6.5s

}

@ keyframes ani-rotateTube {

0% {

Opacity:0

Transform:scale (0) rotate (0)

}

30% {

Opacity:1

Transform:scale (1) rotate (- 360deg)

}

100% {

Opacity:1

Transform:scale (1) rotate (- 360deg)

}

}

@-webkit-keyframes ani-rotateTube {

0% {

Opacity:0

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

}

30% {

Opacity:1

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

}

100% {

Opacity:1

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

}

}

@-o-keyframes ani-rotateTube {

0% {

Opacity:0

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

}

30% {

Opacity:1

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

}

100% {

Opacity:1

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

}

}

. ani-shadow {

Animation:ani-shadow 1s linear 11s

-webkit-animation:ani-shadow 1s linear 11s

-o-animation:ani-shadow 1s linear 11s

}

@ keyframes ani-shadow {

0% {

Opacity:0

Box-shadow:none

}

100% {

Opacity:1

Box-shadow:0 00 14px # 464646,0 00 16px # 000,0 00 30px # 6c6c6c,0 00 32px # 000,0 00 44px # a6a6a6,0 00 46px # 000

}

}

@-webkit-keyframes ani-shadow {

0% {

Opacity:0

Box-shadow:none

}

100% {

Opacity:1

Box-shadow:0 00 14px # 464646,0 00 16px # 000,0 00 30px # 6c6c6c,0 00 32px # 000,0 00 44px # a6a6a6,0 00 46px # 000

}

}

@-o-keyframes ani-shadow {

0% {

Opacity:0

Box-shadow:none

}

100% {

Opacity:1

Box-shadow:0 00 14px # 464646,0 00 16px # 000,0 00 30px # 6c6c6c,0 00 32px # 000,0 00 44px # a6a6a6,0 00 46px # 000

}

}

. ani-narrow

. ani-zoom

. ani-rotateHook

. ani-rotateTube

. ani-shadow

.eyes .line: after {

Animation-fill-mode:both

-webkit-animation-fill-mode:both

-o-animation-fill-mode:both

}

At this point, the study on "how to use css3 to make Naruto write wheel eye opening to reincarnation eye and evolution process" 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.