web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
背景
HTML5 canvas元素背景梦幻小星星闪烁特效
分类:
背景
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 可以是然后HTML DOM元素,但是如果是img元素,必须使用一个div对其进行包裹,否则没有效果。 ```html
``` ##### CSS样式 该DOM元素背景特效对CSS样式没有要求,你可以任意添加需要的CSS样式。如DEMO中为背景添加了渐变,按钮添加了一些阴影效果。 ```html .sparkley { background: #3e5771; color: white; border: none; padding: 16px 36px; font-weight: normal; border-radius: 3px; transition: all 0.25s ease; box-shadow: 0 38px 32px -23px black; margin: 0 1em 1em; } .sparkley:hover { background: #2c3e50; color: rgba(255, 255, 255, 0.2); } html { font-family: Lato; font-weight: 200; font-size: 1em; text-align: center; color: #ddd; min-height: 100%; background: #092756; background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -o-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%); } ``` ##### JAVASCRIPT 该星星特效的默认调用方式如下: ```html $(".ele").sparkleh(); ``` 你可以在调用时传入一些参数,可用的参数有: - color:小星星的颜色。特效中内置了一个彩虹色:rainbow,你也可以设置为颜色数组:["#ff0080","#ff0080","#0000FF"]或单独的颜色: ```html $(".ele1").sparkleh({ color: "rainbow" }); $(".ele1").sparkleh({ color: ["#ff0080","#ff0080","#0000FF"] }); $(".ele1").sparkleh({ color: "#00ff00" }); ``` - count:小星星的数量。 - speed:小星星闪烁的速度。 - overlap:小星星可以移出元素的范围。 该小星星背景特效使用非常简单,具体查看各个DEMO。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告