CSS3 外发光 渐变色
渐变色
--线性渐变 linear-gradient
#bg {
width: 100%;
background: -webkit-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Firefox 3.6 - 15 */
background: linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* 标准的语法 */
}
外发光
box-shadow
@-webkit-keyframes
@-webkit-keyframes shineRed {
from {
-webkit-box-shadow: 0 0 5px #bbb;
}
50% {
-webkit-box-shadow: 0 0 10px red;
}
to {
-webkit-box-shadow: 0 0 5px #bbb;
}
}
.shine_red {
-webkit-animation-name: shineRed;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
} <div class="shine_red" style="width:500px; height:100px; margin:0 auto"></div>
CSS3 外发光 渐变色的更多相关文章
- 关于CSS3背景渐变色无效问题
无效的css[linear-gradient]写法 .loginbox{ background-color: linear-gradient(#D0D0D0, #E0E0E0, white); wid ...
- css3背景渐变色代码
从上到下 #grad { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, b ...
- css3实现颜色渐变以及兼容性处理
有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...
- 推荐7款新鲜出炉的HTML5/CSS3应用
1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...
- 精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- Web中的图标
随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>.除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧 ...
- Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
随机推荐
- JS获取屏幕高度(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 如何设置ASP.NET页面的运行超时时间
全局超时时间 服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值.Machine.config 文件位于 % ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- mysql的基本命令行操作
mysql>CREATE DATABASE imooc; //创建数据库 mysql> USE imooc ;//选择数据库 mysql> SELECT DATABASE();//查 ...
- 为什么print在python3中变成了函数?
转自:http://www.codingpy.com/article/why-print-became-a-function-in-python-3/ 在Python 2中,print是一个语句(st ...
- ES6新特性:使用export和import实现模块化
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- js限制输入框只能输入数字
分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋友参考下. 1.使用正则表达式限制输入框只能输入数字: <input type="text" ...
- 【USACO 2.3】The Longest Prefix
题意: 给你一个少于200000的字符串,求最长的可以划分为给定词典里的单词的前缀. 题解: dp[i]表示第i位结尾的前缀是否可行,然后枚举每一位如果dp[i-1]==1,枚举所有单词,匹配成功的单 ...
- 7.Android开源项目WheelView的时间和地址联动选择对话框
类似WheelView的时间和地址联动选择对话框在现在App经常看到,今天小结下. 主布局界面: <LinearLayout xmlns:android="http://schemas ...
- Python【第二章】:Python的数据类型
基本数据类型 一.整型 如: 18.73.84 二.长整型 如:2147483649.9223372036854775807 三.浮点型 如:3.14.2.88 四.字符串 如:'wupeiqi'.' ...