五彩泡泡box-shadow

emmm虽然和想象中不一样（颜色有点小丑），而且，用的很笨的方法，还比较麻烦，但是还是实现了自己的想法。hhhh

这次是利用多重阴影box-shadow来实现的:

要想实现多重阴影就需要小的先写，它是一层层堆上来的，先写的在上面，后写的在下面。
box-shadow的用法：box-shaow：px(必写的x阴影的位置能负) px(必写的y阴影的位置能负) px(模糊的距离） px(阴影的大小) 阴影的颜色；
多重阴影用逗号隔开，如：
box-shadow:0 0 5px 5px rgb(238, 22, 22),0 0 5px 10px rgba(98, 49, 231, 0.733)

html代码：

<body>
<ul><li>龙卷风</li><li>沙城暴</li><li>洗衣机</li><li>遥控器</li><li>陈大仙</li><li>张小狐</li><li>杨小鸭</li>
</ul>
</body>

css代码：

li{text-align: center;display: block;border-radius:100px;line-height: 70px;color:white;z-index: 1;position: relative;animation:shadow 5s infinite;
}
@keyframes shadow{0%{box-shadow:0 0 5px 2px rgb(238, 22, 22)}7%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733)}14%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84)}21%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22)}28%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22),0 0 5px 10px rgb(13, 109, 13)}30%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22),0 0 5px 10px rgb(13, 109, 13),0 0 5px 12px rgb(88, 88, 238)}40%{ box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22),0 0 5px 10px rgb(13, 109, 13),0 0 5px 12px rgb(88, 88, 238),0 0 5px 14px rgb(227, 47, 233);}50%{ box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22),0 0 5px 10px rgb(13, 109, 13),0 0 5px 12px rgb(88, 88, 238)
}60%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22),0 0 5px 10px rgb(13, 109, 13)}70%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84),0 0 5px 8px rgb(22, 253, 22)}80%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733),0 0 5px 6px rgb(250, 250, 84)}90%{box-shadow:0 0 5px 2px rgb(238, 22, 22),0 0 5px 4px rgba(235, 108, 58, 0.733)}100%{box-shadow:0 0 0 0;}
}

实现这样的还有一种思路：

在li中添加几个div。
将div定位，设置不同的大小。
设置不同的透明度，背景颜色。
设置不同的层级z-index不断叠加。

五彩泡泡box-shadow相关推荐

html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
Box Shadow
1.box-shadow属性 box-shadow属性是一个给元素添加阴影效果的css3属性,允许给元素设置一个或多个阴影效果,IE9+.Firefox 4.Chrome.Opera 以及 Safar ...
html span box shadow,box-shadow用法
一. box-shadow的定义和语法当我们需要设置多个阴影时,中间需要将每个阴影用逗号隔开. /*html代码*/ /*对应的css代码*/ .test{ width: 100px; height ...
Bootstrap3.x - 源代码分析
参照http://v3.bootcss.com/css/ 文档与源代码 colors 比较全面定义总结有意义的颜色.所有uI要用的颜色,都先从已定义的读,这样保证样式的同一性,而且方便以后开发主题库. ...

五彩泡泡box-shadow

五彩泡泡box-shadow相关推荐

最新文章

热门文章