HTML/css学习之-filter:drop-shadow给文字设置一个阴影+@keyframes 规则

Java Web 专栏收录该内容
8 篇文章 0 订阅

文章内容:给出一个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>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

醉人乙

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值