下面是编程之家 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)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
