zoukankan      html  css  js  c++  java
  • 博客园-文字互动插件

    代码有点乱,,,哈哈哈

    灵感来自文字游戏Lifeline,实际上我改过很多个版本!

    这个版本是修改自最近折腾的 HTML - Trial Error (https://i.iblackly.com/tryerr/index.html

     

    使用方法:

    复制以下代码到博客后台-页面定制-博客侧边栏公告 即可

    支持的语法:

     1 /* :: Start , 跳跃点 */
     2 :: Start
     3 
     4 /* >img img_name.jpg 图 */
     5 >img img.jpg
     6 
     7 /* 文本 */
     8 开头是文本
     9 
    10 /* >bu , 单个按钮*/
    11 >but 按钮文本|jumpname
    12 >but (.+)|(.+)
    13 
    14 
    15 /* >buts , 两个按钮 */
    16 >buts 按钮文本|jumpname 按钮2文本|jump2name
    17 >buts (.+)|(.+) (.+)|(.+)
    18 
    19 /* >link */
    20 >link 超链接|linkefilename.html
    21 >link (.+)|(.+)
    22 
    23 /* >dlink */
    24 >dlink Start
    25 
    26 
    27 /* >code  */
    28 >code waytag
    29 <html>
    30     <head>
    31         <title>Try Err</title>
    32     </head>
    33     <body>
    34         <p>Try Err 0000</p>
    35     </body>
    36 </html>
    37 >/code waytag
    38 
    39 (?<=>code waytag
    )(.*
    )+(?=>/code waytag)
    40 GetPoint[0].match("(?<=>code "+CodesType[1]+"
    )(.*
    )+(?=>/code "+CodesType[1]+")");

    逻辑:

    大致如下

    读取 id StoryData 内的指定内容

    各种判断,各种分割之后 输出到指定的位置

    最重要的时故事要好~

    可惜不会写故事~~~~~

    舞台 

     1 <h1>测试公告栏代码</h1>
     2 
     3 <!-- 舞台 -->
     4 <div id="Story" onclick="Clickd()"></div>
     5 
     6 <!-- 故事数据 -->
     7 <div id="StoryData" hidden>
     8 :: Version
     9 cnblog 文字互动
    10 2019年10月26日23点29分
    11 >but 开始|Start
    12 
    13 :: Start
    14 这是一个cnblog的文字互动插件?
    15 灵感来自以前很火的文字游戏LifeLine
    16 文字游戏有他的魅力
    17 能让人在脑海中构建出一个只属于自己的世界
    18 >buts 唔,有啥功能?|youshagongneng 在哪里下载?|zainalixiazai
    19 
    20 :: youshagongneng
    21 可以输出文字!
    22 哈哈哈~开玩笑的~
    23 你想输出啥都行
    24 只需要就该js就行了~
    25 >but 好吧,哪里下载?|zainalixiazai
    26 
    27 :: zainalixiazai
    28 >delay 2s xiazaiyemian
    29 
    30 :: xiazaiyemian
    31 >link 点击前往下载详情页面|https://www.cnblogs.com/iblackly/p/11745769.html
    32 >but 信息|Version
    33 
    34 </div>
    35 
    36 <!-- 动画舞台-->
    37 <wait><div class="wait la-2x"><div></div><div></div></div></wait>

    脚本

      1 <!-- 脚本 -->
      2 <script>
      3 /* 载入故事然后开始 */
      4 window.onload = function(){
      5     /* 开始跳跃点名 */
      6     StartName = "Start";
      7     /* 感觉大部分时间都在想如何起个好听的名 = =! */
      8     SayNumber = 0;
      9     /* 故事位置 */
     10     StoryData = document.getElementById("StoryData").firstChild.nodeValue;
     11     /* 启动ilearning */
     12     ilearning(StartName);
     13 }
     14 
     15 
     16 /* ilearning */
     17 function ilearning(GO){
     18     console.log(GO);
     19     /* 关闭延时动画 */
     20     //Wait('off');
     21 
     22     /* 跳转点内容 */
     23     GetPoint = StoryData.match(":{2} "+GO+"
    (.+
    )+");
     24     console.log("_> 跳转点内容
    "+GetPoint[0]);
     25 
     26     /* 格式化?感动吗? */
     27     var PointSplist = GetPoint[0].split(/
    /);
     28     console.log("_> 跳转点内容.格式化
    "+PointSplist);
     29 
     30     /* 仙人指路 */
     31     for(var i=0; i<PointSplist.length;i++){
     32         Compass(PointSplist[i]);
     33         console.log("_> 字符串长
    "+PointSplist.length);
     34         console.log("_> 仙人指谁
    "+PointSplist[i]);
     35     }
     36 }
     37 
     38 
     39 /* Compass 仙人指路 */
     40 function Compass(LINE){
     41     switch(true){
     42 
     43         /* :: Start , 跳跃点 */
     44         case /^:{2}/.test(LINE):
     45             console.log("_> 跳跃点
    "+LINE);
     46             JumpPoint(LINE);
     47         break;
     48 
     49         /* TEXT 行头除了 [ < > : /  空格 换行 以外的就是普通文本了 */
     50         case /^[^[<>:/\n	 ]/.test(LINE):
     51             console.log("_> 普通文本
    "+LINE);
     52             JumpText(LINE);
     53         break;
     54         
     55         /* >info 信息提示 */
     56         case /^>info/.test(LINE):
     57             console.log("_> 信息提示
    "+LINE);
     58             InfoText(LINE);
     59         break;
     60 
     61         /* >buts , 两个按钮 */
     62         case /^>buts/.test(LINE):
     63             console.log("_> 两个按钮
    "+LINE);
     64             Buttons(LINE);
     65         break;
     66 
     67         /* >but , 单个按钮 */
     68         case /^>but/.test(LINE):
     69             console.log("_> 单个按钮
    "+LINE);
     70             Button(LINE);
     71         break;
     72 
     73         /* 链接 */
     74         case /^>link/.test(LINE):
     75             console.log("_> 链接
    "+LINE);
     76             ALink(LINE);
     77         break;
     78 
     79         /* 代码 */
     80         case /^>code/.test(LINE):
     81             console.log("_> 代码
    "+LINE);
     82             Codes(LINE);
     83         break;
     84 
     85         /* >img img_name.jpg 图 */
     86         case /^>img/.test(LINE):
     87             console.log("_> 图片
    "+LINE);
     88             Imgs(LINE);
     89         break;
     90         
     91         /* >delay 10s Start 延时 */
     92         case /^>delay/.test(LINE):
     93             console.log("_> 延时
    "+LINE);
     94             DelayGO(LINE);
     95         break;
     96         
     97         /* 音频 
     98         case /^>audio/.test(LINE):
     99             console.log(LINE);
    100             Audios(LINE);
    101         break;*/
    102 
    103         /* 视频 
    104         case /^>video/.test(LINE):
    105             console.log(LINE);
    106             Videos(LINE);
    107         break;*/
    108 
    109         /* 未匹配的 */
    110         default:
    111             console.log("_> 未知
    "+LINE);
    112     }
    113 }
    114 
    115 
    116 /* 跳跃点 */
    117 function JumpPoint(LINE){
    118     /* Sayid +1 */;
    119     SayNumber++;
    120     console.log("_> SAYID NUMBER
    "+SayNumber);
    121     console.log("_> 跳跃点
    "+LINE);
    122 
    123     /* 剥离无用符号,为标签获取id名 */
    124     var JumpID = LINE.replace(/^[:]{2}s/, "");
    125     SAYID = JumpID+".SAY."+SayNumber;// xxx.SAY.123
    126     BUTID = JumpID+".BUT."+SayNumber;// xxx.BUT.123
    127     PREID = JumpID+".PRE."+SayNumber;
    128     console.log("_> SAY ID
    "+SAYID+"
    _> BUT ID
    "+BUTID);
    129 
    130     var JumpHTML = "<section id="+SAYID+"></section>";
    131     var JumpDOM = document.getElementById("Story");
    132     JumpDOM.insertAdjacentHTML("beforeEnd", JumpHTML);
    133 }
    134 
    135 /* 普通文本 */
    136 function JumpText(LINE){
    137     console.log("_> 普通文本
    "+LINE);
    138     var TextDOM = document.getElementById(SAYID);
    139     var TextHTML = "<p>"+LINE+"</p>";
    140     TextDOM.insertAdjacentHTML("beforeEnd",TextHTML);
    141     console.log("_> 普通文本
    "+LINE);
    142 }
    143 
    144 /* 信息提示 */
    145 function InfoText(LINE){
    146     console.log("_> 信息提示
    "+LINE);
    147     var RegExp = LINE.match(/>info (.*)/);
    148     var DOM = document.getElementById(SAYID);
    149     var HTML = "<h2>"+RegExp[1]+"</h2>";
    150     DOM.insertAdjacentHTML("beforeEnd",HTML);
    151     console.log("_> 信息提示
    "+HTML);
    152 }
    153 
    154 /* 两个按钮 */
    155 function Buttons(LINE){
    156     console.log("_> 两个按钮
    "+LINE);
    157     var GetData = LINE.match(/>buts (.+)|(.+) (.+)|(.+)/);
    158     console.log("_> 两个按钮.正则
    "+GetData[0]);
    159     var ButtonsDOM = document.getElementById(SAYID);
    160     var ButtonsHTML = "<span id="+BUTID+"><a class="bl" id=""+BUTID+".A"href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a><a class="br" id=""+BUTID+".B"href="javascript:Selectd('"+BUTID+".B')" onclick="ilearning('"+GetData[4]+"')">"+GetData[3]+"</a></span>";
    161     ButtonsDOM.insertAdjacentHTML("beforeEnd",ButtonsHTML);
    162 }
    163 
    164 /* 单个按钮 */
    165 function Button(LINE){
    166     console.log("_> 单个按钮
    "+LINE);
    167     var GetData = LINE.match(/>but (.+)|(.+)/);
    168     console.log("_> 单个按钮.正则
    "+GetData[0]);
    169     var ButtonDOM = document.getElementById(SAYID);
    170     var ButtonHTML = "<span id="+BUTID+"><a class="bc" id=""+BUTID+".A" href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a></span>";
    171     ButtonDOM.insertAdjacentHTML("beforeEnd",ButtonHTML);
    172 }
    173 
    174 /* 链接 */
    175 function ALink(LINE){
    176     console.log("_> 链接
    "+LINE);
    177     var GetData = LINE.match(/>link (.+)|(.+)/);
    178     console.log(GetData[0]);
    179     var ALinkHTML= "<span><a href=""+GetData[2]+"">"+GetData[1]+"</a></span";
    180     console.log(ALinkHTML);
    181     var ALinkDOM = document.getElementById(SAYID);
    182     ALinkDOM.insertAdjacentHTML("beforeEnd",ALinkHTML);
    183 }
    184 
    185 /* 代码块 */
    186 function Codes(LINE){
    187     console.log("_> 代码
    "+LINE);
    188 
    189     /* 哪个代码块? */
    190     var CodeTag = LINE.split(/>codes(S+)/);
    191     console.log("_> 代码.标签
    "+CodeTag[1]);
    192 
    193     /* 从跳转点获取代码块 */
    194     GetData = GetPoint[0].match("(?<=>code "+CodeTag[1]+"
    )(.*
    )+(?=>/code "+CodeTag[1]+")");
    195     console.log(GetData[0]);
    196     
    197     var CodeDOM = document.getElementById(SAYID);
    198     var CodeHTML = "<pre class="html">"+encodeHtml(GetData[0])+"</pre>";
    199     console.log(GetData[0]);
    200     console.log(CodeHTML);
    201     CodeDOM.insertAdjacentHTML("beforeEnd",CodeHTML);
    202     /* 渲染 */
    203     SyntaxHighlighter.highlight();
    204 }
    205 /* /代码块 */
    206 
    207 // HTML转义函数
    208 function encodeHtml(s){
    209     return s.replace(
    210         /"|&|'|<|>|[x00-x20]|[x7F-xFF]|[u0100-u2700]/g,
    211         function($0){
    212             var c = $0.charCodeAt(0);
    213             switch(c){
    214             case 13: return "<br />";
    215             case 32: return "&#160;";
    216             default: return "&#"+c+";";
    217             }
    218         }
    219     );
    220 };
    221 
    222 /* 图片 */
    223 function Imgs(LINE){
    224     var ImgDOM = document.getElementById(SAYID);
    225     /* 剥离无用符号*/
    226     var ImgUrl = LINE.replace(/^>img /, "");
    227     console.log(ImgUrl);
    228     var ImgHTML = "<img src=""+ImgUrl+"">";
    229     console.log(ImgHTML);
    230     ImgDOM.insertAdjacentHTML("beforeEnd",ImgHTML);
    231 }
    232 
    233 
    234 /* 视频 */
    235 function Videos(LINE){
    236     console.log(LINE);
    237 
    238     /* 获取 */
    239     GetVideo = LINE.match("[^>videos](.*)");
    240     console.log(GetVideo[0]);
    241 
    242     var VideoDOM = document.getElementById(SAYID);
    243     VideoDOM.insertAdjacentHTML("beforeEnd",GetVideo[0]);
    244 
    245     var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">";
    246     console.log(AudioSrc );
    247     var AudioDOM = document.getElementById(SAYID);
    248     AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc);
    249 
    250 }
    251 
    252 
    253 /* 声音 音乐 */
    254 function Audios(LINE){
    255     console.log(LINE);
    256 
    257     /* 获取 */
    258     GetAudio = LINE.match("[^>audios](.*)");
    259     console.log(GetAudio[0]);
    260 
    261     var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">";
    262     console.log(AudioSrc);
    263     var AudioDOM = document.getElementById(SAYID);
    264     AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc);
    265 }
    266 
    267 
    268 
    269 /* Time Delay */
    270 function DelayGO(LINE){
    271     console.log(">_ 延时
    "+LINE);
    272     var RegExp = LINE.match(/delay (d*)s (.*)/);
    273     console.log(RegExp);
    274     var DelayTime = RegExp[1]*1000;
    275     console.log(">_ 延时时间
    "+DelayTime);
    276 
    277     /* 延时执行 */
    278     Wait('on');
    279     setTimeout(function(){
    280         ilearning(RegExp[2]);
    281         Wait('off');
    282     },DelayTime);
    283 }
    284 
    285 
    286 /* Wait 动画 */
    287 function Wait(LINE){
    288     var WaitDOM = document.getElementsByTagName("wait");
    289     if (LINE == 'on'){
    290         WaitDOM[0].style.display="block";
    291     } else {
    292         WaitDOM[0].style.display="none";
    293     }
    294 }
    295 
    296 
    297 /* SelectMe And change color */
    298 function Selectd(LINE){
    299     console.log("_> SelectMe
    " +LINE);
    300     var RegExp = LINE.match(/(.*..*..*.)(.)/);
    301     
    302     var BUTSA = RegExp[1]+"A";
    303     var BUTSB = RegExp[1]+"B";
    304     console.log(BUTSA,BUTSB);
    305     var DOMA = document.getElementById(BUTSA);
    306     var DOMB = document.getElementById(BUTSB);
    307 
    308     console.log(RegExp[0]);
    309     console.log(DOMB);
    310   
    311     if(RegExp[2]== 'A'){
    312         console.log(">_ A")
    313         DOMA.href = "javascript:void(0)";
    314         DOMA.onclick = null;
    315         DOMA.style.color = "#00000080";
    316         DOMA.style.background = "#97e597c9";
    317         
    318         if(DOMB){
    319             console.log("sssssssssssss");
    320             DOMB.onclick = null;
    321             DOMB.href = 'javascript:void(0)';
    322             DOMB.style.color = "#00000080";
    323         }
    324     }else {
    325         console.log(">_ B")
    326         DOMB.href = 'javascript:void(0)';
    327         DOMB.onclick = null;
    328         DOMB.style.color = "#00000080";
    329         DOMB.style.background = "#97e597c9";
    330         
    331         DOMA.href = 'javascript:void(0)';
    332         DOMA.onclick = null;
    333         DOMA.style.color = "#00000080";
    334     }
    335 }
    336 
    337 
    338 //著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    339 //作者: DIYgod
    340 //链接: https://www.anotherhome.net/2153
    341 //来源: Anotherhome
    342 var OriginTitile = document.title;
    343 var titleTime;
    344 document.addEventListener('visibilitychange', function() {
    345   if(document.hidden) {
    346     document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile;
    347     clearTimeout(titleTime);
    348   }
    349   else {
    350     document.title = '(*´∇`*) 被你发现啦~ ' + OriginTitile;
    351     titleTime = setTimeout(function() {
    352     document.title = OriginTitile;
    353     }, 2000);
    354   }
    355 });
    356 
    357 
    358 function Clickd(){
    359     console.log("TAP TAP");
    360 }
    361 </script>

     样式

      1 html {
      2     margin: 5px;
      3     background-color: #f4f4f4;
      4 }
      5 
      6 body {
      7     color: #666;
      8     margin: 0 auto;
      9     //max-width: 700px;
     10     font-weight: normal;
     11     font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans;
     12 }
     13 
     14 a {
     15     color: #97e597;
     16     text-decoration: none;
     17     background: transparent;
     18 }
     19 
     20 ::selection {
     21     background: #97e597;
     22 }
     23 
     24 hr{
     25     background: #e0ffbf;
     26     border: none;
     27     height: 1px;
     28 }
     29 
     30 
     31 
     32 #navigator {
     33     text-align:center;
     34     //border-bottom: 1px solid #e3e3e3;
     35 }
     36 #navigator ul li a{
     37     margin:0;
     38     font-size:1.5rem;
     39     overflow:hidden;
     40     color: #aaa;
     41 }
     42 #navigator ul li{
     43     list-style-type:none;
     44 }
     45 
     46 
     47 
     48 
     49 /* header */
     50 #header {
     51     text-align: center;
     52     margin-bottom: 20px;
     53     -webkit-user-select: none;
     54     user-select: none;
     55 }
     56 
     57 #header a {
     58     margin: 0;
     59     font-size: 3rem;
     60     font-weight: 200;
     61     line-height: 1em;
     62     overflow: hidden;
     63 }
     64 
     65 #header p {
     66     margin: 0;
     67     font-size: 1.6rem;
     68     font-style: normal;
     69 }
     70 
     71 @media screen and (max- 670px) {
     72     #header a {
     73         font-size: 3rem;
     74     }
     75 
     76     #header p {
     77         font-size: 1.5rem;
     78     }
     79 }
     80 
     81 @media screen and (max- 600px) {
     82     #header a {
     83         font-size: 3rem;
     84     }
     85 
     86     #header p {
     87         font-size: 1.4rem;
     88     }
     89 }
     90 
     91 @media screen and (max- 500px) {
     92     #header a {
     93         font-size: 2.5rem;
     94     }
     95 
     96     #header p {
     97         font-size: 1.3rem;
     98     }
     99 }
    100 
    101 @media screen and (max- 400px) {
    102     #header a {
    103         font-size: 2rem;
    104     }
    105 
    106     #header p {
    107         font-size: 1.2rem;
    108     }
    109 }
    110 
    111 /* header */
    112 
    113 
    114 
    115 /* Story */
    116 section{
    117     text-align: center;
    118     /* word-break: break-all; 
    119     background-color: #ffffff;*/
    120     border-radius: 3px;
    121     padding-top: 1px;
    122 }
    123 
    124 
    125 section h2{
    126     background-color: #e0f5a4;
    127     font-size: 1.8em;    
    128     font-weight: normal;
    129     margin: 10px 0;
    130     padding: 5px 0 1px 0;
    131 }
    132 
    133 
    134 section img,audio,embed{
    135     width: 100%;
    136 }
    137 
    138 pre{
    139     text-align: left;
    140     display: block;
    141     font-size: 1.5em;
    142     margin-block-start: 0.83em;
    143     margin-block-end: 0.83em;
    144     margin-inline-start: 0px;
    145     margin-inline-end: 0px;
    146     font-weight: bold;
    147     border-radius: 5px;
    148     padding: 10px;
    149     background-color: #fafafa;
    150 overflow:auto;
    151 }
    152 
    153 /*section a{
    154     padding: 10px;
    155     margin: 5px;
    156     color: #fff;
    157     word-break: break-all;
    158     font-weight: normal;
    159     font-size: 1.6rem;
    160     background-color: #51c75f;
    161     display: inline-block;
    162     border-radius: 5px;
    163 }*/
    164 
    165 section span {
    166     margin: 10px 0;
    167     text-align: center;
    168     display: flex;
    169 }
    170 
    171 section a,section span a {
    172     width: 100%;
    173     padding: 5px;
    174     margin: 2px;
    175     color: #959595;
    176     word-break: break-all;
    177     font-weight: normal;
    178     font-size: 0.8rem;
    179     border-radius: 3px;
    180     border: 1px solid #E6ECF1;
    181     box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
    182 }
    183 
    184 section span a:hover {
    185     color: #fff;
    186     background-color: #97e597c9;
    187 }
    188 
    189 .bl{
    190     text-align: right;
    191 }
    192 
    193 .br{
    194     text-align: left;
    195 }
    196 /* Story */
    197 
    198 /* wait */
    199 wait {
    200     display: none;
    201     padding-bottom: 30px;
    202 }
    203 
    204 .wait,.wait>div {
    205     position: relative;
    206     -moz-box-sizing: border-box;
    207     box-sizing: border-box
    208 }
    209 
    210 .wait {
    211     display: block;
    212     font-size: 0;
    213     color: #c6f693;
    214 }
    215 
    216 .wait>div {
    217     display: inline-block;
    218     float: none;
    219     background-color: currentColor;
    220     border: 0 solid currentColor
    221 }
    222 
    223 .wait {
    224     width: 32px;
    225     height: 32px
    226 }
    227 
    228 .wait>div {
    229     position: absolute;
    230     top: 0;
    231     left: 0;
    232     width: 32px;
    233     height: 32px;
    234     border-radius: 100%;
    235     opacity: 0;
    236     -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    237     -moz-animation: ball-scale-multiple 1s 0s linear infinite;
    238     -o-animation: ball-scale-multiple 1s 0s linear infinite;
    239     animation: ball-scale-multiple 1s 0s linear infinite
    240 }
    241 
    242 .wait>div:nth-child(2) {
    243     -webkit-animation-delay: .2s;
    244     -moz-animation-delay: .2s;
    245     -o-animation-delay: .2s;
    246     animation-delay: .2s
    247 }
    248 
    249 .wait.la-2x {
    250     width: 64px;
    251     height: 64px
    252   text-align: center;
    253     margin: 0 auto;
    254     padding-bottom: 70px;
    255 }
    256 
    257 .wait.la-2x>div {
    258     width: 64px;
    259     height: 64px
    260 }
    261 
    262 @-webkit-keyframes ball-scale-multiple {
    263     0% {
    264         opacity: 0;
    265         -webkit-transform: scale(0);
    266         transform: scale(0)
    267     }
    268 
    269     5% {
    270         opacity: .75
    271     }
    272 
    273     100% {
    274         opacity: 0;
    275         -webkit-transform: scale(1);
    276         transform: scale(1)
    277     }
    278 }
    279 
    280 @-moz-keyframes ball-scale-multiple {
    281     0% {
    282         opacity: 0;
    283         -moz-transform: scale(0);
    284         transform: scale(0)
    285     }
    286 
    287     5% {
    288         opacity: .75
    289     }
    290 
    291     100% {
    292         opacity: 0;
    293         -moz-transform: scale(1);
    294         transform: scale(1)
    295     }
    296 }
    297 
    298 @-o-keyframes ball-scale-multiple {
    299     0% {
    300         opacity: 0;
    301         -o-transform: scale(0);
    302         transform: scale(0)
    303     }
    304 
    305     5% {
    306         opacity: .75
    307     }
    308 
    309     100% {
    310         opacity: 0;
    311         -o-transform: scale(1);
    312         transform: scale(1)
    313     }
    314 }
    315 
    316 @keyframes ball-scale-multiple {
    317     0% {
    318         opacity: 0;
    319         -webkit-transform: scale(0);
    320         -moz-transform: scale(0);
    321         -o-transform: scale(0);
    322         transform: scale(0)
    323     }
    324 
    325     5% {
    326         opacity: .75
    327     }
    328 
    329     100% {
    330         opacity: 0;
    331         -webkit-transform: scale(1);
    332         -moz-transform: scale(1);
    333         -o-transform: scale(1);
    334         transform: scale(1)
    335     }
    336 }
    337 /* wait */
    338 
    339 footer{
    340     text-align: center;
    341 }
    342 footer a{
    343     color: #666;
    344 }
    345 
    346 .iblackly{
    347     width: 25px;
    348     margin: 0px 2px -4px 2px;
    349 }
    350 
    351 .coding{
    352     width: 25px;
    353     margin: 0px 2px -4px 2px;
    354 }
    355 
    356 .chrome{
    357     width: 22px;
    358     margin: 0px 2px -5px 2px;
    359 }
    360 
    361 /* 滚动 */
    362 /* 整个滚动条 */
    363 ::-webkit-scrollbar {
    364   width: 3px;
    365   height: 3px;
    366 }
    367 
    368 /* 滚动条上的滚动滑 */
    369 ::-webkit-scrollbar-thumb {
    370   background: #b3d979; 
    371   border-radius: 3px;
    372 }
    373 /* 滚动 */
  • 相关阅读:
    吴裕雄 19-Mysql 连接的使用
    吴裕雄 18-MySQL GROUP BY 语句
    吴裕雄 17-MySQL 排序
    吴裕雄 16-MySQL UNION 操作符
    吴裕雄 15-MySQL LIKE 子句
    吴裕雄 14-MySQL DELETE 语句
    吴裕雄 13-MySQL UPDATE 查询
    【2017中国大学生程序设计竞赛
    【2017中国大学生程序设计竞赛
    【AtCoder Regular Contest 082 F】Sandglass
  • 原文地址:https://www.cnblogs.com/iblackly/p/11745769.html
Copyright © 2011-2022 走看看