有时候设计希望我们能够在页面实现类似星星闪烁的效果,如图:

我的解决办法是用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)的更多相关文章

  1. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  2. canvas 星星闪烁的效果

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  4. CSS - toggle collapse 类似bootstrap的展开效果

    问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transi ...

  5. 使用Fragment实现类似TabHost标签栏的效果

    在前几天,我写了篇<Android TabHost的使用>简单的介绍了其使用的方法,但是在实现的时候发现TabHost已经被官方遗弃了.虽然我觉得TabHost还是多好用的(可能因为我这种 ...

  6. 实现类似QQ的折叠效果

    //  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. //  ViewController.m//  实现类似QQ的折叠效果/ ...

  7. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  8. 高逼格UILabel的闪烁动画效果

    高逼格UILabel的闪烁动画效果 最终效果图如下: 源码: YXLabel.h 与  YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...

  9. 如何在Python 2.X中也达到类似nonlocal关键字的效果

    nonlocal关键字时Python 3.X中引入的,目的是让内层函数可以修改外层函数的变量值,而该关键字在Python 2.X中是不存在的.那么,要在Python 2.X中达到类型达到类似nonlo ...

随机推荐

  1. excel 下载

    public string CreateExcel(string SelectedBizType, string strReportDate, DropDownList ddlYQ, DropDown ...

  2. dwz笔记之tree权限扩展

    碰到的问题:tree选择子节点时,父级节点的值没有选择 解决方法如下(红色部分): 原代码: _checkParent:function(){ if($(this).parent().hasClass ...

  3. CSS3选择器小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  4. Hdu1076(n个闰年后的年份)

    #include <stdio.h> #include<stdlib.h> int main() { int T,Y,n,printYear; scanf("%d&q ...

  5. java形参是否会改变实参

    之前一直对java这方面感到困惑---传入的形参是否会影响实参.因为c++有指针,而java没有,所以我做一个测试验证形参是否会影响实参.* 首先第一种情况---基本类型 哈哈,其实结果大概和我想的一 ...

  6. Android DrawerLayout 点击事情穿透

    今天使用DrawerLayout做网易4.4版本侧边栏发现点击DrawerLayout空白部分,下面部分content会获得点击事件.解决方法是在<!-- The navigation draw ...

  7. iOS 面试题集合

      ASIDownloadCache 设置下载缓存 它对Get请求的响应数据进行缓存(被缓存的数据必需是成功的200请求): [ASIHTTPRequest setDefaultCache:[ASID ...

  8. 挖掘机控制器与复制其MCU程序

    最近的时间都浪费在两台小松PW128UU-1上面.旧的一台拆了变速箱,装上去以后就变得换挡不行了.新的一台一直都不行,弄过液压泵以后下部分的行走又出现一时正常一时不动的情况. 先说说概况:PW128U ...

  9. 自己动手写谷歌API翻译接口

      可以看到,利用GET请求方式,带入某些参数,就会返回一个json数组,QueryString参数如下:     同样的,我们只需要传入这三个参数,就可以获得我们想要的翻译内容,公开方法,代码如下. ...

  10. BZOJ 1977 次小生成树(最近公共祖先)

    题意:求一棵树的严格次小生成树,即权值严格大于最小生成树且权值最小的生成树. 先求最小生成树,对于每个不在树中的边,取两点间路径的信息,如果这条边的权值等于路径中的权值最大值,那就删掉路径中的次大值, ...