当前位置:记磊博客 > 技巧-源码 > 代码实用 > 正文

作者:记磊博客

比较忧愁,比较善感,比较孩子气,比较喜欢网络技术的小子

手机扫码查看

【折腾美化】网站页面的左右两侧代码添加梅花飘落特效

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

【折腾美化】网站页面的左右两侧代码添加梅花飘落特效

正好快要下班,然后就水一篇,这篇水分有点大哈,给网站左右两侧添加梅花飘落特效。博客适用哈,挺好玩的呢

效果图

【折腾美化】网站页面的左右两侧代码添加梅花飘落特效

开始食用

首先,在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.ly522.com/1941.html 发布于2018-09-05。
如果我的文章帮助到了你,或者给你产生了些许spark ,欢迎(-(赞助打赏)-)

分享到:
赞(0) 打赏

评论-加入了一言 4

9 + 6 =
  1. #1

    当思念散尽,剩下的,会是什么呢?

    胡青铜?来自中国/China QQ浏览器 Windows 10 2个月前 (10-01)回复
  2. #2
    qq_avatar

    可以的

    龙、夕来自中国/China 谷歌浏览器 Windows 10 2个月前 (10-07)回复
  3. #3

    去发现自己的弱小,去承受失败带来的打击!

    123456来自中国/China 谷歌浏览器 Windows 10 4周前 (11-16)回复
  4. #4
    qq_avatar

    人看不到现实的本来面目。只能看到想看的、想拥有的现实。

    喵咪没有鱼来自中国/China 谷歌浏览器  Android 5.1 OPPO A59s Build/LMY47I 2周前 (11-30)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

时光里的点滴

应广大网友需求记磊工具箱源码需求,开通交流群, 目前禁言。资源已经上传。群稳定后开放

快速加群

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录