怎么实现类似星星闪烁的效果(box-shadow)
有时候设计希望我们能够在页面实现类似星星闪烁的效果,如图:
我的解决办法是用box-shadow:
html
<div class="star04 active-blink" id="star04" ></div>
css
.star04{
background-color: #FFFFFF;
border-radius: 50%;
}
.star04:after{
display: block;
content: '';
box-shadow: 0 0 20px 10px rgba(255,255,255,0.3),
0 0 20px 10px rgba(255,255,255,0.3),
0 0 20px 10px rgba(255,255,255,0.3),
0 0 20px 10px rgba(255,255,255,0.3),
0 0 20px 10px rgba(255,255,255,0.3);
}
如果你觉得他的亮度不够可以给.star04的:before加上box-shadow
或者给star04增加宽高在给:after,:before定位
要是你的设计师觉得动态的更好看,想要让它闪烁,那么用keyframes对它进行透明度改变就可以了
如果你的设计师还没有得到满足,想要很多的星星在闪个不停你可以用我js里面那个随机抽取的方法让它闪个不停
怎么实现类似星星闪烁的效果(box-shadow)的更多相关文章
- 原生js实现星星闪烁的效果
星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...
- canvas 星星闪烁的效果
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- CSS - toggle collapse 类似bootstrap的展开效果
问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transi ...
- 使用Fragment实现类似TabHost标签栏的效果
在前几天,我写了篇<Android TabHost的使用>简单的介绍了其使用的方法,但是在实现的时候发现TabHost已经被官方遗弃了.虽然我觉得TabHost还是多好用的(可能因为我这种 ...
- 实现类似QQ的折叠效果
// 主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. // ViewController.m// 实现类似QQ的折叠效果/ ...
- 创意HTML5文字特效 类似翻页的效果
原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...
- 高逼格UILabel的闪烁动画效果
高逼格UILabel的闪烁动画效果 最终效果图如下: 源码: YXLabel.h 与 YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...
- 如何在Python 2.X中也达到类似nonlocal关键字的效果
nonlocal关键字时Python 3.X中引入的,目的是让内层函数可以修改外层函数的变量值,而该关键字在Python 2.X中是不存在的.那么,要在Python 2.X中达到类型达到类似nonlo ...
随机推荐
- excel 下载
public string CreateExcel(string SelectedBizType, string strReportDate, DropDownList ddlYQ, DropDown ...
- dwz笔记之tree权限扩展
碰到的问题:tree选择子节点时,父级节点的值没有选择 解决方法如下(红色部分): 原代码: _checkParent:function(){ if($(this).parent().hasClass ...
- CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
- Hdu1076(n个闰年后的年份)
#include <stdio.h> #include<stdlib.h> int main() { int T,Y,n,printYear; scanf("%d&q ...
- java形参是否会改变实参
之前一直对java这方面感到困惑---传入的形参是否会影响实参.因为c++有指针,而java没有,所以我做一个测试验证形参是否会影响实参.* 首先第一种情况---基本类型 哈哈,其实结果大概和我想的一 ...
- Android DrawerLayout 点击事情穿透
今天使用DrawerLayout做网易4.4版本侧边栏发现点击DrawerLayout空白部分,下面部分content会获得点击事件.解决方法是在<!-- The navigation draw ...
- iOS 面试题集合
ASIDownloadCache 设置下载缓存 它对Get请求的响应数据进行缓存(被缓存的数据必需是成功的200请求): [ASIHTTPRequest setDefaultCache:[ASID ...
- 挖掘机控制器与复制其MCU程序
最近的时间都浪费在两台小松PW128UU-1上面.旧的一台拆了变速箱,装上去以后就变得换挡不行了.新的一台一直都不行,弄过液压泵以后下部分的行走又出现一时正常一时不动的情况. 先说说概况:PW128U ...
- 自己动手写谷歌API翻译接口
可以看到,利用GET请求方式,带入某些参数,就会返回一个json数组,QueryString参数如下: 同样的,我们只需要传入这三个参数,就可以获得我们想要的翻译内容,公开方法,代码如下. ...
- BZOJ 1977 次小生成树(最近公共祖先)
题意:求一棵树的严格次小生成树,即权值严格大于最小生成树且权值最小的生成树. 先求最小生成树,对于每个不在树中的边,取两点间路径的信息,如果这条边的权值等于路径中的权值最大值,那就删掉路径中的次大值, ...