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

作者:记磊博客

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

手机扫码查看

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

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

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

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

效果图

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

开始食用

首先,在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)
}
}
抱歉,隐藏内容 回复 后刷新可见
未经允许不得转载:

作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 记磊博客
原文地址:《【折腾美化】网站页面的左右两侧代码添加梅花飘落特效》 发布于2018-09-05

本文共3195个字,预计阅读时间需要8分钟。
您阅读这篇文章共花了: 0小时00分00秒
分享到:
赞(0) 打赏

评论 8

8 + 9 =
  1. #1

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

    胡青铜?6个月前 (10-01)来自中国/China QQ浏览器 Windows 10 河北省石家庄市 联通回复
  2. #2
    qq_avatar

    可以的

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

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

    1234564个月前 (11-16)来自中国/China 谷歌浏览器 Windows 10 江西省南昌市 电信回复
  4. #4
    qq_avatar

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

    喵咪没有鱼4个月前 (11-30)来自中国/China 谷歌浏览器  Android 5.1 OPPO A59s Build/LMY47I 江苏省 移动回复
  5. #5

    我愿意减寿命一年,让那些人出车祸死掉算了。

    流氓少年3个月前 (12-15)来自中国/China 谷歌浏览器 Windows 10 山东省济南市 联通回复
  6. #6
    qq_avatar

    不管看到什么样的过去,都请不要迷失自己,不管你变成什么样子,我都是你的同伴。

    流氓少年3个月前 (01-06)来自中国/China 谷歌浏览器 Windows 10 山东省济南市 联通回复
  7. #7

    这个好看

    2个月前 (01-10)来自中国/China QQ浏览器 Windows 10 广东省佛山市顺德区 电信回复
  8. #8
    qq_avatar

    来看看 哈哈

    九命猫.2个月前 (01-28)来自中国/China 谷歌浏览器 Windows 7 中国 移动回复
【折腾美化】网站页面的左右两侧代码添加梅花飘落特效

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.3主题

专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

了解一下

登录

忘记密码 ?

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

Q Q 登 录
微 博 登 录