CSS3 外发光 渐变色

时间:2022-09-04 07:35:45
渐变色
--线性渐变 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 外发光 渐变色的更多相关文章

  1. 关于CSS3背景渐变色无效问题

    无效的css[linear-gradient]写法 .loginbox{ background-color: linear-gradient(#D0D0D0, #E0E0E0, white); wid ...

  2. css3背景渐变色代码

    从上到下 #grad {  background: -webkit-linear-gradient(red, blue);  background: -o-linear-gradient(red, b ...

  3. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  4. 推荐7款新鲜出炉的HTML5&sol;CSS3应用

    1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...

  5. 精选10款超酷的HTML5&sol;CSS3菜单

    今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...

  6. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  7. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以*变换IconFont大小(不失真),可以修改IconFont颜 ...

  8. Web中的图标

    随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>.除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧 ...

  9. Bootstrap框架中的字形图标的理解

    最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...

随机推荐

  1. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  2. PintJS – 轻量,并发的 GruntJS 运行器

    PintJS 是一个小型.异步的 GruntJS 运行器,试图解决大规模构建流程中的一些问题. 典型的Gruntfile 会包括 jsHint,jasmine,LESS,handlebars, ugl ...

  3. Sharepoint增加修改密码功能

    Sharepoint中没有自带的修改密码的功能. 如果使用的是AD验证,修改密码,只要修改域帐号的用户名密码就可以了.以下代码可以修改本机密码和域帐号密码. 做法是,添加一个webpart,做一个页面 ...

  4. 【转载】FPGA静态时序分析——IO口时序

    转自:http://www.cnblogs.com/linjie-swust/archive/2012/03/01/FPGA.html 1.1  概述 在高速系统中FPGA时序约束不止包括内部时钟约束 ...

  5. 剖析OkHttp缓存机制

    现在应用市场上的 App 无一不需要网络操作,这些应用的开发者大多数都选择结合使用 OkHttp 和 Retrofit 来完成网络操作.okHttp 最为人称道的一个特性就是它的缓存机制,而我将在本篇 ...

  6. 负载均衡集群之LVS的DR模型详解(Diretor Routing)

    LVS的默认模型:默认模型DR DR模型原理图--> 在讲DR模型要点之前,需要了解网络的相关知识: 接收的报文拆解顺序:帧(MAC)-->数据包(IP)-->数据报文(port) ...

  7. node&period;js&lpar;六&rpar; UTIL模块

    1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...

  8. &lbrack;置顶&rsqb; Android4&period;0中修改挂断键(ENDCALL)的默认行为

    文件: frameworks/base/core/java/android/provider/Setings.java public static final String END_BUTTON_BE ...

  9. Echo团队Alpha冲刺随笔 - 第四天

    项目冲刺情况 进展 前端:完成了差不多一半,小程序部分界面基本完工,WEB端也完成了一部分 后端:也完成了大半了 问题 后端文件上传还没解决 心得 进度还行,团队配合都还不错 今日会议内容 黄少勇 今 ...

  10. Linux基础命令---文本编辑ex

    ex ex会启动vim编辑器,它的执行效果和vim –E相同.从ex模式回到普通模式,可以在vim中输入:vim. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.op ...