刚开始耍博客的时候，比较热衷于这些，其实就是给网站加上一些特效，稍微的美化下带来一点异样的感觉，如果看起来感觉还可以，并且有兴趣的话，那我们继续往下看！
图片预览
代码部署
首先，在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，在文章末尾已经给出完整的代码提供下载！
- <script type=“text/javascript” src=“leaves.js”></script>
最后，再添加下梅花飘落的美化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)
- }
- }
文章链接：https://www.sbkko.com/1-67.html
文章标题：给网站页面的左右两侧添加梅花飘落特效
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：给网站页面的左右两侧添加梅花飘落特效
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
666666666666
学到了