2021-01-03

文字闪烁特效 html+css

上效果先:

在这里插入图片描述

先言:

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

实现:

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2.文字的基本样式,大小颜色等:

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

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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;
        }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97

总结:

新的一年,新的希望!

<div id="blink"> 闪烁文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; c...
最近在做一个新需求,涉及到了input标签的 闪烁光标的移动。

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

&lt;input id=“inputBox” value=“abcdefgh”&gt;

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>

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


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美化效果,为了防止遗忘,记录一下!

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

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

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


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

文字闪烁效果一:

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

文字带渐变效果的闪烁

<div class=“main”>
文字闪烁:<span class=“blink”>闪烁效果</span>
</div>

<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">
1.通过改变透明度来实现 文字的渐变 闪烁,效果图:

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

.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、 文字带有 闪烁的霓虹...

abcd

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

CSS

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



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

最新评论

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值