网站侧边添加梅花飘落特效

概述给网站左右两侧添加梅花飘落特效，花瓣从空中飘落，想雪花一样非常漂亮。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

给网站左右两侧添加梅花飘落特效，花瓣从空中飘落，想雪花一样非常漂亮，刚开始耍博客的时候，比较热衷于这些，其实就是给网站加上一些特效，稍微的美化下带来一点异样的感觉，如果看起来感觉还可以，并且有兴趣的话，那我们继续看下怎么 *** 作：

步骤一

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

<div ID="meihua"></div>

步骤二

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

#meihua {

background: url("images/meihua.png") no-repeat scroll 0% 0% transparent;

wIDth: 278px;

height: 155px;

rightright: 0px;

top: 0px;

position: fixed;

z-index: 1;

}

以上，就能看到梅花树枝的图片了，具体大小和位置可以自己调整。引用 Js，在文章末尾已经给出完整的代码提供下载！最后，再添加下梅花飘落的美化 CSS 如下：

.leave {

position: fixed;

wIDth: 25px;

height: 20px;

-webkit-animation-iteration-count: infinite,infinite;

-webkit-animation-direction: normal,normal;

-webkit-animation-timing-function: linear,ease-in;

-moz-animation-iteration-count: infinite,infinite;

-moz-animation-direction: normal,normal;

-moz-animation-timing-function: linear,ease-in;

-o-animation-iteration-count: infinite,infinite;

-o-animation-direction: normal,normal;

-o-animation-timing-function: linear,ease-in;

animation-iteration-count: infinite,infinite;

animation-direction: normal,normal;

animation-timing-function: linear,ease-in;

}

.leave>img {

position: fixed;

top:125px;

wIDth: 25px;

height: 20px;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

-webkit-transform-origin: 50% -100%;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-timing-function: ease-in-out;

-moz-transform-origin: 50% -100%;

-o-animation-iteration-count: infinite;

-o-animation-direction: alternate;

-o-animation-timing-function: ease-in-out;

-o-transform-origin: 50% -100%;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: ease-in-out;

transform-origin: 50% -100%;

}

@-webkit-keyframes fade {

0% {

opacity: 1

}

95% {

opacity: 1

}

100% {

opacity: 0

}

}

@-webkit-keyframes drop {

0% {

-webkit-transform: translate(30px,-50px)

}

100% {

-webkit-transform: translate(-200px,650px)

}

}

@-webkit-keyframes clockwiseSpin {

0% {

-webkit-transform: rotate(-50deg)

}

100% {

-webkit-transform: rotate(50deg)

}

}

@-webkit-keyframes counterclockwiseSpinAndFlip {

0% {

-webkit-transform: scale(-1,1) rotate(50deg)

}

100% {

-webkit-transform: scale(-1,1) rotate(-50deg)

}

}

@-moz-keyframes fade {

0% {

opacity: 1

}

95% {

opacity: 1

}

100% {

opacity: 0

}

}

@-moz-keyframes drop {

0% {

-moz-transform: translate(30px,-50px)

}

100% {

-moz-transform: translate(-200px,650px)

}

}

@-moz-keyframes clockwiseSpin {

0% {

-moz-transform: rotate(-50deg)

}

100% {

-moz-transform: rotate(50deg)

}

}

@-moz-keyframes counterclockwiseSpinAndFlip {

0% {

-moz-transform: scale(-1,1) rotate(50deg)

}

100% {

-moz-transform: scale(-1,1) rotate(-50deg)

}

}

@-o-keyframes fade {

0% {

opacity: 1

}

95% {

opacity: 1

}

100% {

opacity: 0

}

}

@-o-keyframes drop {

0% {

-o-transform: translate(30px,-50px)

}

100% {

-o-transform: translate(-200px,650px)

}

}

@-o-keyframes clockwiseSpin {

0% {

-o-transform: rotate(-50deg)

}

100% {

-o-transform: rotate(50deg)

}

}

@-o-keyframes counterclockwiseSpinAndFlip {

0% {

-o-transform: scale(-1,1) rotate(50deg)

}

100% {

-o-transform: scale(-1,1) rotate(-50deg)

}

}

@keyframes fade {

0% {

opacity: 1

}

95% {

opacity: 1

}

100% {

opacity: 0

}

}

@keyframes drop {

0% {

transform: translate(30px,-50px)

}

100% {

transform: translate(-200px,650px)

}

}

@keyframes clockwiseSpin {

0% {

transform: rotate(-50deg)

}

100% {

transform: rotate(50deg)

}

}

@keyframes counterclockwiseSpinAndFlip {

0% {

transform: scale(-1,1) rotate(50deg)

}

100% {

transform: scale(-1,1) rotate(-50deg)

}

}

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的网站侧边添加梅花飘落特效全部内容，希望文章能够帮你解决网站侧边添加梅花飘落特效所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。