html网页蒲公英特效代码,代码实现网页左下角添加蒲公英飘动特效
网页左下角有一个蒲公英飘动特效,相信很多站长都见过,为此,橘子君也做了一番研究,实现蒲公英飘动特效还是比较简单。只需在网页中加入以下代码即可实现。如果是想全站展示,建议将特效代码添加到footer文件中。
蒲公英特效代码
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
.dandelion .smalldan {
width: 36px;
height: 60px;
left: 21px;
background-position: 0 -90px;
border: 0px solid red;
}
.dandelion span {
-webkit-animation: ball-x 3s linear 2s infinite;
-moz-animation: ball-x 3s linear 2s infinite;
animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
}
.dandelion span {
display: block;
position: fixed;
z-index:9999999999;
bottom: 0px;
background-image: url(https://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 47px;
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
0% { transform:rotate(0deg);}
20% { transform:rotate(5deg); }
40% { transform:rotate(0deg);}
60% { transform:rotate(-5deg);}
80% { transform:rotate(0deg);}
100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
0% { -webkit-transform:rotate(0deg);}
20% { -webkit-transform:rotate(5deg); }
40% { -webkit-transform:rotate(0deg);}
60% { -webkit-transform:rotate(-5deg);}
80% { -webkit-transform:rotate(0deg);}
100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
0% { -moz-transform:rotate(0deg);}
20% { -moz-transform:rotate(5deg); }
40% { -moz-transform:rotate(0deg);}
60% { -moz-transform:rotate(-5deg);}
80% { -moz-transform:rotate(0deg);}
100% { -moz-transform:rotate(0deg);}
}
PS:在电脑上可以点击运行进入预览,群聊时博主见过很多新手站长说一看到代码就头疼,就会觉得很复杂,其实现在的互联网如此开放,很多工作不再是敲代码了,借力互联网,给网页加代码也是一件比较简单的事了。
html网页蒲公英特效代码,代码实现网页左下角添加蒲公英飘动特效相关推荐
- 网页滚动文字特效的代码
收藏一下,谢谢! 原文地址:网页滚动文字特效的代码作者:丑小鸭 基本代码1: 插入文字 说明:direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right) ...
- HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱 ...
- 网页广告代码php,【网页广告特效代码】精选5种常用的网页广告特效代码
网站少不了发布一些活动广告,网页中的广告显示效果有很多种,一般是采用JS或者JQ实现多种网页广告显示效果,以下是php中文网精选5种常用的网页广告特效代码推荐给大家下载使用! 效果预览和下载地址:ht ...
- html5点击效果文字跳转,JS网页特效代码,点击跳出爱心和文字特效
鼠标左键点击网页会跳出爱心,相信不少站长见过这种JS网页特效,有些点击还会跳出文字.橘子君也是觉得挺好奇的,然后也给网站加了一段时间这种特效,后来由于种种原因的考虑,博主又将该代码删除了.如果你对这种 ...
- HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 ...
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- java调色板代码_简易网页调色板功能调用代码_html
简易网页调色板功能调用代码 colorSelect('色值输入框ID','显示色值的容器ID',event) 调用起来很简单,任何物品onClick就可以. 以下是html网页特效代码,点击运行按钮可 ...
- 期末作业成品代码——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:餐饮美食网站设计--绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设 ...
- html网页播放器编辑代码大全
<P align=center><FONT color=#0066ff face=隶书 size=5>插进去文字</FONT></P> align=ce ...
最新文章
- HttpClient第一章(一)
- 【数据竞赛】“达观杯”文本智能处理挑战赛6——模型优化
- 使用Bootstrap插件datapicker获取时间
- 分布式监控之Zabbix-Server
- 大理三塔,及崇圣寺里的假深沉
- 封装cookie.js、EventUtil.js、
- 安全,从写第一行代码开始!
- .net发送邮件outlook中文乱码
- ACM模板——拓扑排序
- socket通信基础知识
- 吴恩达机器学习ex8:推荐系统
- cnblogs今天开通了!
- winform基础,主要控件简单介绍,以及小练习
- 总结---BOM浏览器对象模型
- R 修改安装包默认存放位置的方法
- telnet php,使用php实现telnet功能
- DH参数法 例题 机器人学
- 构建虚拟局域网与漏洞扫描x-scan
- 51单片机:共阴数码管动态显示(定时器+中断)
- 苹果为小学生推出编程指南
热门文章
- 加减交替法(不恢复余数法)
- 转一个牛人的人生感悟
- httpbin的使用
- GEE开发之MODIS_MCD12Q1数据分析和获取
- excel横向纵向求和结果(均保留两位小数)相差1分的问题
- Python:(使用matplotlib画图)次坐标轴,两个坐标轴
- python异常处理--猜字游戏
- linux 画图开源工具有哪些,【Drawing:一款开源的类似微软画图的Linux桌面应用】...
- 算法作业——打靶问题
- phpstudy使用mysql8.0_Phpstudy升级到Mysql8