2021-01-03

2024-02-01 22:24:40

文字闪烁特效 html+css

北极光之夜。 2021-01-01 22:56:16

1834

收藏 17 分类专栏：前端文章标签： css html css3 前端最后发布:2021-01-01 22:56:16 首次发布:2021-01-01 22:56:16 版权

上效果先：

先言：

看过我文章可以知道，这东西似曾相识~ ╭(●｀∀´●)╯确实，这个和我另一篇文章“文字点闪特效”原理是差不多的

实现：

1.定义html标签：

<h1>
        <span>佛</span>
        <span>主</span>
        <span>保</span>
        <span>佑</span>
        <span>，</span>
        <span>考</span>
        <span>试</span>
        <span>全</span>
        <span>过</span>
        <span>！</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

2.文字的基本样式，大小颜色等：

 h1{
            font-family: 'fangsong';
            font-size: 6em;
            color: transparent;
        }
        span{
           display: table-cell;
           animation: san 3s linear infinite;
        }

display: table-cell;此元素会作为一个表格单元格显示（类似和）
color: transparent;文字颜色透明

3.文字发亮的效果，就闪一下然后就又会（20%-80%的时候）变透明：

 @keyframes san{
            0%,100%{
                color: rgb(255, 255, 255);         
                text-shadow: 0 0 5px rgb(1, 231, 247),
                            0 0 15px rgb(1, 231, 247),
                            0 0 25px rgb(1, 231, 247),
                            0 0 50px rgb(1, 231, 247),
                            0 0 80px rgb(1, 231, 247),
                            0 0 120px rgb(1, 231, 247),
                            0 0 160px rgb(1, 231, 247),
                            0 0 200px rgb(1, 231, 247),
                            0 0 300px rgb(1, 231, 247),
                            0 0 400px rgb(1, 231, 247),
                            0 0 500px rgb(1, 231, 247);
            }
            20%,80%{
               color: transparent;
               text-shadow: none;
            }
    <span class="token punctuation">}</span>

text-shadow：是给它加阴影，写了很多行是为了阴影更亮；

4.制造时间差，让不同的时间不同的文字亮；

 h1 span:nth-child(1){
            animation-delay:0s;
        }
        h1 span:nth-child(2){
            animation-delay:0.1s;
        } 
        h1 span:nth-child(3){
            animation-delay:0.2s;
        }
        h1 span:nth-child(4){
            animation-delay:0.3s;
        }
        h1 span:nth-child(5){
            animation-delay:0.4s;
        }
        h1 span:nth-child(6){
            animation-delay:0.5s;
        }
        h1 span:nth-child(7){
            animation-delay:0.6s;
        }
        h1 span:nth-child(8){
            animation-delay:0.7s;
        }
        h1 span:nth-child(9){
            animation-delay:0.8s;
        }
        h1 span:nth-child(10){
            animation-delay:0.9s;
        }

animation-delay 等待多少秒，然后才开始动画；

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北极光之夜。</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(0, 0, 0);
        }
        h1{
            font-family: 'fangsong';
            font-size: 6em;
            color: transparent;
        }
        span{
           display: table-cell;
           animation: san 3s linear infinite;
        }
        h1 span:nth-child(1){
            animation-delay:0s;
        }
        h1 span:nth-child(2){
            animation-delay:0.1s;
        } 
        h1 span:nth-child(3){
            animation-delay:0.2s;
        }
        h1 span:nth-child(4){
            animation-delay:0.3s;
        }
        h1 span:nth-child(5){
            animation-delay:0.4s;
        }
        h1 span:nth-child(6){
            animation-delay:0.5s;
        }
        h1 span:nth-child(7){
            animation-delay:0.6s;
        }
        h1 span:nth-child(8){
            animation-delay:0.7s;
        }
        h1 span:nth-child(9){
            animation-delay:0.8s;
        }
        h1 span:nth-child(10){
            animation-delay:0.9s;
        }
        @keyframes san{
            0%,100%{
                color: rgb(255, 255, 255);         
                text-shadow: 0 0 5px rgb(1, 231, 247),
                            0 0 15px rgb(1, 231, 247),
                            0 0 25px rgb(1, 231, 247),
                            0 0 50px rgb(1, 231, 247),
                            0 0 80px rgb(1, 231, 247),
                            0 0 120px rgb(1, 231, 247),
                            0 0 160px rgb(1, 231, 247),
                            0 0 200px rgb(1, 231, 247),
                            0 0 300px rgb(1, 231, 247),
                            0 0 400px rgb(1, 231, 247),
                            0 0 500px rgb(1, 231, 247);
            }
            20%,80%{
               color: transparent;
               text-shadow: none;
            }
    <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>
<body>
<h1>
<span>佛</span>
<span>主</span>
<span>保</span>
<span>佑</span>
<span>，</span>
<span>考</span>
<span>试</span>
<span>全</span>
<span>过</span>
<span>！</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

</body>
</html>

总结：

新的一年，新的希望！

HTML文字闪烁 weixin_30463341的博客 05-25

646 <div id="blink"> 闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; c... input 标签闪烁光标原理 liubangbo的专栏 03-07

3168 最近在做一个新需求，涉及到了input标签的闪烁光标的移动。

其实闪烁光标是个矩形框，当矩形框的宽度为0时就变成了闪烁的光标。

inputBox.focus();

我们看到闪烁的光标在字符a的前面。这是因为input标签有一个 selectStart 属性这个属性默认值为0，通…

  <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="优质评论可以帮助作者获得更高权重" maxlength="1000"></textarea>
		<div class="comment-emoticon"><img class="comment-emoticon-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/emoticon.png" alt="表情包"></div> 
  <span class="comment-emoticon-tip">插入表情</span>
  <div class="comment-emoticon-box">
    <div class="comment-emoticon-img-box">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:001.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/001.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:002.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/002.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:003.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/003.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:004.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/004.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:005.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/005.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:006.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/006.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:007.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/007.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:008.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/008.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:009.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/009.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:010.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/010.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:011.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/011.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:012.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/012.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:013.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/013.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:014.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/014.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:015.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/015.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:016.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/016.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:017.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/017.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:018.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/018.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:019.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/019.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:020.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/020.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:021.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/021.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:022.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/022.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:023.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/023.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:024.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/024.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:025.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/025.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:026.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/026.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:027.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/027.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:028.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/028.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:029.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/029.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:030.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/030.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:031.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/031.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:032.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/032.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:033.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/033.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:034.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/034.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:035.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/035.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:036.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/036.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:037.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/037.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:038.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/038.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:039.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/039.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:040.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/040.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:041.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/041.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:042.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/042.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:043.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/043.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:044.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/044.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:045.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/045.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:046.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/046.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:047.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/047.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:048.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/048.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:049.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/049.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:050.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/050.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:051.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/051.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:052.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/052.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:053.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/053.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:054.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/054.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:055.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/055.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:056.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/056.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:057.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/057.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:058.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/058.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:059.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/059.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:060.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/060.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:061.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/061.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:062.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/062.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:063.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/063.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:064.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/064.png">
    </div>
  </div>
  <div class="opt-box">
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="112076419">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<div class="txt-selected text-truncate">添加代码片</div>
					<svg class="icon d-block" width="200px" height="100.00px" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.33333292 298.666667h853.333334L1023.99999992 725.333333 597.33333292 298.666667z"></path></svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>
			<div class="right-box" id="rightBox" data-type="2">
						<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
						<a data-report-click="{&quot;spm&quot;:&quot;3001.4374&quot;}" class="btn btn-sm btn-quick-comment" id="quickComment">“速评一下”</a>
						<a data-report-click="{&quot;mod&quot;:&quot;1582594662_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4227&quot;,&quot;ab&quot;:&quot;new&quot;}"><input type="submit" class="btn btn-sm btn-comment" value="发表评论"></a>
			</div>
		</div>
	</form>
	<input type="button" class="bt-comment-show" value="评论">
</div>
<div class="comment-list-container" style="display: block;">
	<a id="comments"></a>
	<div class="comment-list-box"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14438636" data-replyname="luo1831251387"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/luo1831251387"><img src="https://profile.csdnimg.cn/D/5/5/3_luo1831251387" username="luo1831251387" alt="luo1831251387" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/luo1831251387"><span class="name ">北极光之夜。<img class="is_bloger" src="https://csdnimg.cn/release/blogv2/dist/components/img/bloger@2x.png"></span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">冲冲冲~</span><span class="date" title="2021-01-01 22:57:25">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14438636"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span>2</span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14455578" data-replyname="kimol_justdo"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/kimol_justdo"><img src="https://profile.csdnimg.cn/E/6/2/3_kimol_justdo" username="kimol_justdo" alt="kimol_justdo" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/kimol_justdo"><span class="name ">不正经的kimol君</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">大佬的文章让我受益匪浅，如痴如醉，以后的日子还希望能够得到大佬的谆谆指点！</span><span class="date" title="2021-01-03 21:06:25">1小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14455578"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14451101" data-replyname="weixin_44671737"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/weixin_44671737"><img src="https://profile.csdnimg.cn/E/3/5/3_weixin_44671737" username="weixin_44671737" alt="weixin_44671737" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/weixin_44671737"><span class="name ">兴趣使然的程序猿</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">挺不错的，一下子很多大佬都出现在我这个小白的视野中了</span><span class="date" title="2021-01-03 14:02:14">8小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14451101"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li><li class="replay-box" style="display:block"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14452034" data-replyname="luo1831251387"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/luo1831251387"><img src="https://profile.csdnimg.cn/D/5/5/3_luo1831251387" username="luo1831251387" alt="luo1831251387" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/luo1831251387"><span class="name mr-8">北极光之夜。<img class="is_bloger" src="https://csdnimg.cn/release/blogv2/dist/components/img/bloger@2x.png"></span></a><span class="text">回复</span><span class="colon">:</span><span class="text"></span><span class="new-comment">哈哈</span><span class="date" title="2021-01-03 15:35:48">7小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14452034"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14443517" data-replyname="qq_40542534"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_40542534"><img src="https://profile.csdnimg.cn/D/D/E/3_qq_40542534" username="qq_40542534" alt="qq_40542534" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/qq_40542534"><span class="name ">strive_day</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">分析的很到位，学到了很多，谢谢分享！</span><span class="date" title="2021-01-02 16:15:34">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14443517"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li><li class="replay-box" style="display:block"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14444038" data-replyname="luo1831251387"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/luo1831251387"><img src="https://profile.csdnimg.cn/D/5/5/3_luo1831251387" username="luo1831251387" alt="luo1831251387" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/luo1831251387"><span class="name mr-8">北极光之夜。<img class="is_bloger" src="https://csdnimg.cn/release/blogv2/dist/components/img/bloger@2x.png"></span></a><span class="text">回复</span><span class="colon">:</span><span class="text"></span><span class="new-comment">谢谢</span><span class="date" title="2021-01-02 17:06:59">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14444038"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14443231" data-replyname="qq_37960603"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_37960603"><img src="https://profile.csdnimg.cn/8/3/3/3_qq_37960603" username="qq_37960603" alt="qq_37960603" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/qq_37960603"><span class="name ">ITKaven</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">膜拜大佬的技术,来我博客指点*吧！</span><span class="date" title="2021-01-02 15:42:56">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14443231"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li><li class="replay-box" style="display:block"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14444040" data-replyname="luo1831251387"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/luo1831251387"><img src="https://profile.csdnimg.cn/D/5/5/3_luo1831251387" username="luo1831251387" alt="luo1831251387" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowBlack.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/luo1831251387"><span class="name mr-8">北极光之夜。<img class="is_bloger" src="https://csdnimg.cn/release/blogv2/dist/components/img/bloger@2x.png"></span></a><span class="text">回复</span><span class="colon">:</span><span class="text"></span><span class="new-comment">好</span><span class="date" title="2021-01-02 17:07:14">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14444040"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></li></ul></div>
	<div id="commentPage" class="pagination-box d-none" style="display: block;"><div id="Paging_08640918170434815" class="ui-paging-container"><ul><li class="js-page-first js-page-action ui-pager ui-pager-disabled"></li><li class="js-page-prev js-page-action ui-pager ui-pager-disabled">&lt;</li><li data-page="1" class="ui-pager focus">1</li><li class="js-page-next js-page-action ui-pager ui-pager-disabled">&gt;</li><li class="js-page-last js-page-action ui-pager ui-pager-disabled"></li></ul></div></div>
	
</div>

html 文字闪烁功能的 js 代码 qin_zhimou的专栏 01-21

9231 文字闪烁

function blinklink() {
if (!document.getElementById(‘blink’).style.color) {
document.getElementById(‘blink’).style.color = “red”;
}
if (document.getElementById(‘blink’)

HTML学习小结之HTML标签 Must so 09-13

2211 1.文档结构标签 ◎ :标识文档的开始和结束 ◎ :标识文档的头部区域 ◎ :标识文档的主体区域其中头部区域在页面中不可见而主体区域可见示例1：

文档结构标签

网页正文写在这里

2.文本格式标签
主要标识文本区块并附带显示格式
◎ :标识网页标题

◎ :标识标题文本，其中i是1到6的数字，标识i级标题

◎ :段落

文字闪烁特效 html+ css_Start_Strive的博客 1-2 文字闪烁特效 html+ css 上效果先: 实现: 1.定义 html标签: <h1><span>佛</span><span>主</span><span>保</span><span>佑</span><span>,</span><span... css 文字闪烁效果_weixin_30793643的博客 12-17 css 文字闪烁效果 <!DOCTYPE html>< html><headlang="en"><metacharset="UTF-8"><title></title><style>body{background:#000;}h1.fb-glitch{position:... CSS文字选中样式和文字闪烁效果夏尔的小酒馆 04-13

9982 最近在做自己的网站漫岛网的时候，用到了两个 CSS美化效果，为了防止遗忘，记录一下！

第一个是文字选中效果，这个可能很少有人注意过。一般网站默认的都是蓝色背景白色字体代表文字被选中，效果如下：

但是我们可以小小的改变一下配色，虽然只是微小的一点改动，但是效果却很好呢！

/文字选中效果/
*::selection {
background-color: paleviole…

css3实现文字闪烁效果的三种展示方式 art_people的博客 03-10

2179 转载自：http://www.fly63.com/article/detial/616

文字闪烁效果一：

通过改变透明度来实现文字的渐变闪烁，效果如下：

文字带渐变效果的闪烁：

<style type="t…

css 文字闪烁效果_素味平生的博客_ css 文字闪烁 12-22 css 文字闪烁效果使用 css3的animation就可以实现 <p class="arktitle">Ark</p> .arktitle { font-size: 36px; font-weight: bold; line-height: 280px; ... css3实现文字闪烁效果的三种展示方式_art_people的博客... 12-17 文字带渐变效果的闪烁: <divclass="main"> 文字闪烁:<spanclass="blink"> 闪烁效果</span> </div> <styletype="text/ css"> css3 实现文字闪烁效果的三种方式冉冉胜起博客 11-09

606 1.通过改变透明度来实现文字的渐变闪烁，效果图：

<!DOCTYPE html>
<html>
<head>
</head>
<title>文字闪烁</title>
<body>
<div class=“blink”>
星星之火可以燎原
</div>
</body>
<style>
.myclass{
letter-spacing:5px;/字间距/

css3之animation制作闪烁文字效果巴黎的妖 10-08

1万+ .box{ animation: change 1s ease-in infinite ; font-size: 36px; color:#f00; font-weight: bold} @keyframes change { 0%{ text-shadow: 0 0 4px #f00} 50%{ text-shadow: 0 0 css动画文字闪烁效果_weixin_30878501的博客 12-24 css动画文字闪烁效果 /*定义页面基础 CSS*/ body{ font-family: 'microsoft yahei',Arial,sans-serif; color: #EFEFEF; background: #222;... HTML5/ CSS3实现闪烁霓虹灯文字特效-其它代码类资源 12-13 今天我们要给大家分享一款非常惊艳的 HTML5/ CSS3 文字特效, 闪烁的霓虹灯动画特效就是这款文字最让人震撼的地方。这个 HTML5 文字动画有几个特点:1、文字带有闪烁的霓虹... CSS3+HTML5特效6 - 闪烁的文字 weixin_30765577的博客 02-19

174 先看效果

abcd

这个效果也比较简单，利用keyframes对文字的大小、透明度及颜色做循环显示。

CSS

1 <style>
2 @-webkit-keyframes flash {
3 0%{
4 opacity: 0;
5 }
6 50%{
7 opacity: 1;
…

js实现文字闪烁呼吸效果 bruce_zhao1407的博客 01-01

630 在网页设计中，为了使页面更加美观，编辑者经常会给网页添加一些动画效果，例如文字呼吸效果实现代码 <!DOCTYPE html> < html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div&g... ©️2020 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客返回首页

码农公寓

2021-01-03

文字闪烁特效 html+css

上效果先：

先言：

实现：

完整代码：

总结：

热门文章

分类专栏

最新评论

最新文章

目录

码农公寓

文字闪烁特效 html+css

上效果先：

先言：

实现：

完整代码：

总结：

热门文章

分类专栏

最新评论

最新文章

目录

相关文章