html音乐唱片自动转,css3animation模仿百度音乐的唱片旋转效果

好久没更新blog，补上几篇技术性的文章。好吧，第一篇是关于css3动画animation的使用，要用到keyframes规则。

  

1

2

3

4

5

Document

6

7

8 $(function(){

9 /*$('.wrap').children('i').click(function(){

10 $(this).toggleClass('action');

11 if($(this).prev().css('-webkit-animation-play-state') == 'paused'){

12 $(this).prev().css({

13 '-webkit-animation-play-state':'running'

14 });

15 }else{

16 $(this).prev().css({

17 '-webkit-animation-play-state':'paused'

18 });

19 }

20 if($(this).prev().css('-moz-animation-play-state') == 'paused'){

21 $(this).prev().css({

22 '-moz-animation-play-state':'running'

23 });

24 }else{

25 $(this).prev().css({

26 '-moz-animation-play-state':'paused'

27 });

28 }

29 });*/

30 $('.wrap>i').click(function(){

31 $(this).toggleClass('action');

32 $(this).prev().toggleClass('pause');

33 });

34

35 });

36

37

38 .wrap{

39 width:120px;

40 height:120px;

41 position:relative;

42 }

43 .avatar-pic{

44 width:120px;

45 height:120px;

46 border-radius:50%;

47 overflow:hidden;

48 display:block;

49 cursor:default;

50 }

51 .wrap>i{

52 position:absolute;

53 top:42px;

54 left:42px;

55 width:36px;

56 height:36px;

57 outline:none;

58 border-radius:50%;

59 cursor:pointer;

60 }

61 .wrap>i:hover{

62 background-color:rgba(0,0,0,.4);

63 }

64 .zantin{

65 background:url(icons_bds.png) no-repeat 0px -408px;

66 }

67 .action{

68 background:url(icons_bds.png) no-repeat -96px -408px;

69 }

70

71

72

73 .avatar{

74 animation:rotator 10s linear infinite;

75 -webkit-animation:rotator 10s linear infinite;

76 -moz-animation:rotator 10s linear infinite;

77 -o-animation:rotator 10s linear infinite;

78 -ms-animation:rotator 10s linear infinite;

79

80 -webkit-animation-play-state:running;

81 -moz-animation-play-state:running;

82 -o-animation-play-state:running;

83 -ms-animation-play-state:running;

84 animation-play-state:running;

85 }

86 .pause{

87 animation-play-state:paused;

88 -webkit-animation-play-state:paused;

89 -moz-animation-play-state:paused;

90 -o-animation-play-state:paused;

91 -ms-animation-play-state:paused;

92 }

93

94 @keyframes rotator{

95 from{transform:rotate(0deg);}

96 to{transform:rotate(360deg);}

97 }

98 @-webkit-keyframes rotator{

99 form{-webkit-transform:rotate(0deg);}

100 to{-webkit-transform:rotate(360deg);}

101 }

102 @-moz-keyframes rotator{

103 form{-moz-transform:rotate(0deg);}

104 to{-moz-transform:rotate(360deg);}

105 }

106 @-o-keyframes rotator{

107 form{-o-transform:rotate(0deg);}

108 to{-o-transform:rotate(360deg);}

109 }

110 @-ms-keyframes rotator{

111 form{-ms-transform:rotate(0deg);}

112 to{-ms-transform:rotate(360deg);}

113 }

114

115

116

117

118

119

120

121

122

123

124

css3看起来非常美好，但是实际使用中还是存在不少的不确定性。如果不能看到已经实现的代码模板，你很难确信自己的代码格式就一定正确。所以你可以到http://daneden.me/animate/来观察各种动画效果，选择自己喜欢的动画并生成代码，下载下来后再按照自己的需求来编写动画代码。这样会让你的动画效果实现起来事半功倍(不要担心它达不到你的要求，上面有很多的效果，你可以自己组合，只要你的想象力够丰富)。

来源：https://www.cnblogs.com/hl-520/p/4363122.html