Rumah > hujung hadapan web > tutorial css > 可控制转速CSS3旋转风车特效

可控制转速CSS3旋转风车特效

高洛峰
Lepaskan: 2017-02-23 10:44:12
asal
2795 orang telah melayarinya

以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大。以下是一个纯CSS3制作的风车旋转动画,而且也用CSS 3控制速度。

体验效果:
http://hovertree.com/texiao/css3/40/

效果图:
可控制转速CSS3旋转风车特效

可以看到,风车的叶片是三角形,使用css画各种图形请参考:
http://hovertree.com/h/bjaf/jtkqnsc1.htm

http://hovertree.com/h/bjaf/ltgc20vn.htm

css制作动画是用到了animation属性,请参考:
http://hovertree.com/h/bjaf/i309b77d.htm

http://hovertree.com/h/bjaf/fwck53gt.htm

http://hovertree.com/h/bjaf/xpxgjfap.htm

http://hovertree.com/h/bjaf/kqud99m6.htm

扇叶的旋转使用到了transform属性,参考:
http://hovertree.com/h/bjaf/c3bshswk.htm

http://hovertree.com/h/bjaf/lxsexx3m.htm

本示例用到了CSS 3的选择器nth-of-type,参考:
http://hovertree.com/h/bjaf/c2c0k0tf.htm

下面给出本示例的代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html><html lang="zh-CN">

<head><meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>可控制转速CSS3旋转风车特效 - 何问起</title>

<link rel="stylesheet" href="http://hovertree.com/texiao/css3/40/style/hovertreespin.css">

</head><body><p class="wrapper">

    <p class="pin-layout">

        <a href="#" class="control">暂停</a>

        <a href="#" class="control">旋转</a>

        <a href="#" class="control">中速</a>

        <a href="#" class="control">高速</a>

        <p class="pillar">

            <p class="dot"></p>

            <span class="item1"></span>

            <span class="item2"></span>

            <span class="item3"></span>

            <span class="item4"></span>

        </p>

    </p>

    <p><b>何问起温馨小提示:</b>暂停后点击页面任何区域都可自动旋转哦!</p></p><!-- end wrapper --><p style="text-align:center;margin:100px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;"><p>适用于支持CSS3的浏览器。</p><p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/efqb2w4s.htm" target="_blank">说明</a></p></p></body></html>

Salin selepas log masuk


CSS文件代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

*{margin:0; padding:0;}body{background:#eee;width:100%; height:100%;}.wrapper{

    position: relative;

    width: 800px;

    height:450px;

    margin:60px auto 0;

}.wrapper .pin-layout{

    position: absolute;

    bottom: 0;

    left: calc(50% - 20px);

    width:40px;

    height:280px;

}.wrapper .pin-layout::after{

    position:absolute;

    bottom:0;

    left: calc(50% - 20px);

    content:"";

    height:0;

    width:10px;

    border-width: 0px 15px 280px 15px;

    border-style:solid;

    border-color:transparent transparent #6B3500 transparent;

}.wrapper .pin-layout .pillar{

    position: absolute;

    top: -18px;

    left: calc(50% - 18px);

    width:36px;

    height:36px;

    z-index: 9;

    transform: rotateZ(45deg);

    transition:all .9s linear;

    animation: hovertreespin 3s linear 0s infinite;

}.pin-layout .control:hover::after{

    position: absolute;

    left: 0;

    content: "";

    width: 100%;

    height:100%;

    background: rgba(0,0,0,.3);

}.pin-layout .control{

    position: absolute;

    bottom:0;

    width: 80px;

    height:30px;

    line-height:30px;

    border: 1px solid #ADADAD;

    border-radius: 4px;

    text-align:center;

    text-decoration:none;

    letter-spacing:2px;

    color: white;

    background: red;

}.pin-layout .control:nth-of-type(1){

    left: -100px;

}.pin-layout .control:nth-of-type(3):focus ~ .pillar{

    animation-duration:.8s;

}.pin-layout .control:nth-of-type(4):focus ~ .pillar{

    animation-duration:.2s;

}.pin-layout .control:nth-of-type(2){

    right: -100px;

    background: green;

}.pin-layout .control:nth-of-type(3){

    bottom: -40px;

    left: -100px;

    background: #037862;

}.pin-layout .control:nth-of-type(4){

    bottom: -40px;

    right: -100px;

    background: #036B3E;

}.pin-layout .control:nth-of-type(1):focus ~ .pillar{

    animation-play-state:paused;

}.pin-layout .control:nth-of-type(2):focus ~ .pillar{

    animation-play-state:running;

}

 .pin-layout .pillar span[class^="item"]{

    position: absolute;

     top: calc(-200px + 18px);

    left: 18px;

    border-width:0px 80px 200px 0px;

    border-style:solid;

 }

 .pin-layout .pillar span[class^="item"]:nth-of-type(1){

    z-index:1;

    border-color:transparent transparent dodgerblue transparent;    /*border-color:green red gray blue;*/}

 .pin-layout .pillar span[class^="item"]:nth-of-type(2){

    z-index:2;

    border-color:transparent transparent orangered transparent;

    transform-origin:left bottom;

    transform: rotateZ(90deg);

}

 .pin-layout .pillar span[class^="item"]:nth-of-type(3){

    z-index:3;

    border-color:transparent transparent greenyellow transparent;

    transform-origin:left bottom;

    transform: rotateZ(180deg);

}

 .pin-layout .pillar span[class^="item"]:nth-of-type(4){

    z-index:4;

    border-color:transparent transparent mediumpurple transparent;

    transform-origin:left bottom;

    transform: rotateZ(270deg);

}.wrapper .pin-layout .pillar .dot{

    position: absolute;

    top: 0;

    left: 0;

    border-width: 19px;

    border-style: solid;

    border-color: #3C0505 transparent #3C0505 transparent;

    border-radius:50%;

    background:#F505EE;

    z-index:1999;

    box-shadow:0 0 2px #1A0505;

}@keyframes hovertreespin {

    0%{

        transform: rotate(0deg)    }

    100%{

        transform:rotate(360deg);

    }}

Salin selepas log masuk


使用图片扇叶的风车:
http://hovertree.com/h/bjaf/h9tb5itb.htm

特效集合:

http://www.cnblogs.com/roucheng/p/texiao.html

更多可控制转速CSS3旋转风车特效 相关文章请关注PHP中文网!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan