1. 橘子皮首页
  2. 前端教程

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

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

图片预览

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

代码部署

首先,在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. }

文章整理,作者:橘子皮,如若转载,请注明出处:https://www.juzip.cn/1518.html

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

发表评论

电子邮件地址不会被公开。 必填项已用*标注