文章内容:给出一个filter:drop-shadow给文字设置一个阴影+@keyframes 规则合用的例子。似乎还可以做出
发光的效果,我没有试。
简介+运行结果+html&css代码
第一部分:简介
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。这里我只介绍drop-shadow功能:给一个块设置一个阴影。从而制造发光效果。
@keyframes规则
通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。更多介绍在实例代码中有注释。
语法:
@keyframes animationname {keyframes-selector {css-styles;}}
第二部分:运行结果展示
第三部分:html&css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*文字效果*/
#test {
-webkit-filter: drop-shadow(0px 0px 9px blueviolet); /*给文字加阴影*/
font-family: 华文行楷; font-size: 40px; color: #FF0000; position:relative; animation-name:myfirst; /*规定了@keyframes动画的名称*/ animation-duration:5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/ animation-timing-function:linear; /*规定动画的速度曲线。默认是 "ease"。*/ animation-delay:1s; /*规定动画何时开始。默认是 0。*/ animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。*/ animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/ animation-play-state:running; /*规定动画是否正在运行或暂停。默认是 "running"。*/ /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes myfirst { 0% {color:red; left:0px; top:0px;} 25% {color:yellow; left:200px; top:0px;} 50% {color:blue; left:200px; top:200px;} 75% {color:green; left:0px; top:200px;} 100% {color:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {color:red; left:0px; top:0px;} 25% {color:yellow; left:200px; top:0px;} 50% {color:blue; left:200px; top:200px;} 75% {color:green; left:0px; top:200px;} 100% {color:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {color:red; left:0px; top:0px;} 25% {color:yellow; left:200px; top:0px;} 50% {color:blue; left:200px; top:200px;} 75% {color:green; left:0px; top:200px;} 100% {color:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {color:red; left:0px; top:0px;} 25% {color:yellow; left:200px; top:0px;} 50% {color:blue; left:200px; top:200px;} 75% {color:green; left:0px; top:200px;} 100% {color:red; left:0px; top:0px;} } </style></head><body><p><b>注释:</b>本例在 Internet Explorer 中无效。</p><div></div><p id="test">今天天气真好!</p></body></html>