给网站页面的左右两侧添加梅花飘落特效

刚开始耍博客的时候,比较热衷于这些,其实就是给网站加上一些特效,稍微的美化下带来一点异样的感觉,如果看起来感觉还可以,并且有兴趣的话,那我们继续往下看!

图片预览

代码部署

首先,在body中,添加一个div,来放置梅花树枝的图片。

  1. <div id="meihua"></div>  

然后,添加梅花树枝图片的css,在样式表里添加以下代码:其中url是梅花树枝地址替换成你自己的地址。

  1. #meihua {  
  2.     backgroundurl("images/meihua.png"no-repeat scroll 0% 0% transparent;  
  3.     width278px;  
  4.     height155px;  
  5.     rightright: 0px;  
  6.     top0px;  
  7.     positionfixed;  
  8.     z-index: 1;  
  9. }  

以上,就能看到梅花树枝的图片了,具体大小和位置可以自己调整。

引用JS,在文章末尾已经给出完整的代码提供下载!

  1. <script type="text/javascript" src="leaves.js"></script>  

最后,再添加下梅花飘落的美化css。如下。

  1. .leave {  
  2. positionfixed;  
  3. width25px;  
  4. height20px;  
  5. -webkit-animation-iteration-count: infinite,infinite;  
  6. -webkit-animation-directionnormal,normal;  
  7. -webkit-animation-timing-function: linear,ease-in;  
  8. -moz-animation-iteration-count: infinite,infinite;  
  9. -moz-animation-directionnormal,normal;  
  10. -moz-animation-timing-function: linear,ease-in;  
  11. -o-animation-iteration-count: infinite,infinite;  
  12. -o-animation-directionnormal,normal;  
  13. -o-animation-timing-function: linear,ease-in;  
  14. animation-iteration-count: infinite,infinite;  
  15. animation-directionnormal,normal;  
  16. animation-timing-function: linear,ease-in;  
  17. }  
  18. .leave>img {  
  19. positionfixed;  
  20.     top:125px;  
  21. width25px;  
  22. height20px;  
  23. -webkit-animation-iteration-count: infinite;  
  24. -webkit-animation-direction: alternate;  
  25. -webkit-animation-timing-function: ease-in-out;  
  26. -webkit-transform-origin: 50% -100%;  
  27. -moz-animation-iteration-count: infinite;  
  28. -moz-animation-direction: alternate;  
  29. -moz-animation-timing-function: ease-in-out;  
  30. -moz-transform-origin: 50% -100%;  
  31. -o-animation-iteration-count: infinite;  
  32. -o-animation-direction: alternate;  
  33. -o-animation-timing-function: ease-in-out;  
  34. -o-transform-origin: 50% -100%;  
  35. animation-iteration-count: infinite;  
  36. animation-direction: alternate;  
  37. animation-timing-function: ease-in-out;  
  38. transform-origin: 50% -100%;  
  39. }  
  40. @-webkit-keyframes fade {  
  41. 0% {  
  42. opacity: 1  
  43. }  
  44. 95% {  
  45. opacity: 1  
  46. }  
  47. 100% {  
  48. opacity: 0  
  49. }  
  50. }  
  51. @-webkit-keyframes drop {  
  52. 0% {  
  53. -webkit-transform: translate(30px,-50px)  
  54. }  
  55. 100% {  
  56. -webkit-transform: translate(-200px,650px)  
  57. }  
  58. }  
  59. @-webkit-keyframes clockwiseSpin {  
  60. 0% {  
  61. -webkit-transform: rotate(-50deg)  
  62. }  
  63. 100% {  
  64. -webkit-transform: rotate(50deg)  
  65. }  
  66. }  
  67. @-webkit-keyframes counterclockwiseSpinAndFlip {  
  68. 0% {  
  69. -webkit-transform: scale(-1,1) rotate(50deg)  
  70. }  
  71. 100% {  
  72. -webkit-transform: scale(-1,1) rotate(-50deg)  
  73. }  
  74. }  
  75. @-moz-keyframes fade {  
  76. 0% {  
  77. opacity: 1  
  78. }  
  79. 95% {  
  80. opacity: 1  
  81. }  
  82. 100% {  
  83. opacity: 0  
  84. }  
  85. }  
  86. @-moz-keyframes drop {  
  87. 0% {  
  88. -moz-transform: translate(30px,-50px)  
  89. }  
  90. 100% {  
  91. -moz-transform: translate(-200px,650px)  
  92. }  
  93. }  
  94. @-moz-keyframes clockwiseSpin {  
  95. 0% {  
  96. -moz-transform: rotate(-50deg)  
  97. }  
  98. 100% {  
  99. -moz-transform: rotate(50deg)  
  100. }  
  101. }  
  102. @-moz-keyframes counterclockwiseSpinAndFlip {  
  103. 0% {  
  104. -moz-transform: scale(-1,1) rotate(50deg)  
  105. }  
  106. 100% {  
  107. -moz-transform: scale(-1,1) rotate(-50deg)  
  108. }  
  109. }  
  110. @-o-keyframes fade {  
  111. 0% {  
  112. opacity: 1  
  113. }  
  114. 95% {  
  115. opacity: 1  
  116. }  
  117. 100% {  
  118. opacity: 0  
  119. }  
  120. }  
  121. @-o-keyframes drop {  
  122. 0% {  
  123. -o-transform: translate(30px,-50px)  
  124. }  
  125. 100% {  
  126. -o-transform: translate(-200px,650px)  
  127. }  
  128. }  
  129. @-o-keyframes clockwiseSpin {  
  130. 0% {  
  131. -o-transform: rotate(-50deg)  
  132. }  
  133. 100% {  
  134. -o-transform: rotate(50deg)  
  135. }  
  136. }  
  137. @-o-keyframes counterclockwiseSpinAndFlip {  
  138. 0% {  
  139. -o-transform: scale(-1,1) rotate(50deg)  
  140. }  
  141. 100% {  
  142. -o-transform: scale(-1,1) rotate(-50deg)  
  143. }  
  144. }  
  145. @keyframes fade {  
  146. 0% {  
  147. opacity: 1  
  148. }  
  149. 95% {  
  150. opacity: 1  
  151. }  
  152. 100% {  
  153. opacity: 0  
  154. }  
  155. }  
  156. @keyframes drop {  
  157. 0% {  
  158. transform: translate(30px,-50px)  
  159. }  
  160. 100% {  
  161. transform: translate(-200px,650px)  
  162. }  
  163. }  
  164. @keyframes clockwiseSpin {  
  165. 0% {  
  166. transform: rotate(-50deg)  
  167. }  
  168. 100% {  
  169. transform: rotate(50deg)  
  170. }  
  171. }  
  172. @keyframes counterclockwiseSpinAndFlip {  
  173. 0% {  
  174. transform: scale(-1,1) rotate(50deg)  
  175. }  
  176. 100% {  
  177. transform: scale(-1,1) rotate(-50deg)  
  178. }  
  179. }  


关注微信公众号『SBKKO干货工具』

第一时间了解最新网络动态
关注博主不迷路~

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论