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

最新推荐文章于 2023-02-12 15:49:57 发布

醉人乙

最新推荐文章于 2023-02-12 15:49:57 发布

阅读量1k

点赞数

分类专栏： Java Web 文章标签： Intellij idea html css filterdrop-shadow keyframes

本文链接：https://blog.csdn.net/qq_35164169/article/details/76383270

版权

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>