网站右上角添加梅花飘落

2018年1月29日13:42:18 2 1,798

网站右上角添加梅花飘落。还是老样子,这个效果也是看到好久了,之前都不会弄,这次又在别的站点看到了,就想折腾一番了。

网站右上角添加梅花飘落

也到冬天了,这个梅花树枝,也给网站带来别样的感觉。其实,这也就是一个图片,加上JS,再美化下的css组成,不多说,下面部署代码。

梅花飘落代码部署

首先,在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.     rightright0px;
  6.     top0px;
  7.     positionfixed;
  8.     z-index: 1;
  9. }

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

然后,再部署下调用梅花飘落的JS代码,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. }

以上,这个就完工了,具体效果看本站右上角就可以了。

文件下载 资源名称:梅花飘落代码 资源大小:70kb
下载地址 查看演示


版权声明:本文由江西SEOSEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/4849.html

weinxin
博客之家
欢迎加入博客之家,本站的资源也都会上传到博客之家。当然,更多的是交流~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • itdog itdog 1

      也是看到博主的这个特效很别样的感觉,学习啦~