标签 css 下的文章 - 老姚日记--随心记录，胡乱折腾！

2021-07-22

百度编辑器h1~h6标题美化【教程】找到网站xiunobbs 站点中的/view/css/bootstrap-bbs.css，然后在合适的位置(适合的位置...自己思考)插入如下代码：/* H6标题 */ .card-body .message h6 { border-left: 3px solid #6293d4; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H5标题 */ .card-body .message h5 { border-left: 4px solid #84985a; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H4标题 */ .card-body .message h4 { border-left: 5px solid #b55594; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H3标题 */ .card-body .message h3 { border-left: 6px solid #a232de; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H2标题 */ .card-body .message h2 { border-left: 7px solid #32de5d; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H1标题 */ .card-body .message h1 { border-left: 8px solid #de3232; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; }撰稿人: 22SS

2021年07月22日
62 阅读
0 评论
2 点赞

2021-07-12

新年倒计时代码 <style type="text/css"> .deng-box{position:fixed;top:-40px;right:-20px;z-index:9999;pointer-events:none} .deng-box1{position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none} .deng-box2{position:fixed;top:-40px;left:-20px;z-index:9999;pointer-events:none} .deng-box3{position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none} .deng-box1 .deng,.deng-box3 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d} .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00} .deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03} .deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03} .xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03} .shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px} .shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%} .shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px} .deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng-t{font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center} .night .deng-box,.night .deng-box1,.night .deng-t{background:0 0!important}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}} </style> <article> <div class="gn_box wow zoomIn"> <h1> <center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font> </center> </h1> <center> <div id="CountMsg" class="HotDate" style="margin-bottom: 10px;"> <font color="red"><span id="t_d">* 天</span></font> <font color="red"><span id="t_h">* 时</span></font> <font color="red"><span id="t_m">* 分</span></font> <font color="red"><span id="t_s">* 秒</span></font> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date("2021/02/11 00:00:00"); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> </article>

2021年07月12日
64 阅读
0 评论
3 点赞

2021-07-12

顶部导航跟随固定 /*顶部导航固定css*/ header#header { position: fixed; z-index: 30; } #body { padding-top: 4.5rem; }

2021年07月12日
60 阅读
0 评论
1 点赞

2021-07-03

首页主题列表头像美化,变方一点找到文件主题目录下这个文件overwrite/view/htm/thread_list.inc.htm再最顶部添加下面一行隐藏内容，请前往内页查看详情

2021年07月03日
48 阅读
0 评论
2 点赞

2021-07-02

文字彩虹跑马灯效果特效代码代码： <style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear } @-webkit-keyframes masked-animation { 0%{ background-position: 0 0;} 100% { background-position: -100% 0; } </style><span class="masked">文字彩虹跑马灯效果特效代码</span>

2021年07月02日
49 阅读
0 评论
2 点赞

2021-07-01

弹窗广告代码分享 HTML代码： <div class="modal fade" id="modal_20200114" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">公告</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="modal_20200114_lock">我知道了，不要再弹出</button> </div> </div> </div> </div>JS代码：（放到底部)<script> !function (){ var a = $('#modal_20200114'); var b = $('#modal_20200114_lock'); var k = $.cookie('modal_20200114_lock'); if(!k){ a.modal('show'); b.on('click', function() { $.cookie('modal_20200114_lock', '1'); }); } }(); </script>

2021年07月01日
47 阅读
0 评论
1 点赞

2021-06-30

css 流光按钮先看效果图：实现简单炫酷，直接复制查看效果CSS:<style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 25px; text-transform: uppercase; cursor: pointer; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 60px; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .btn::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: 0.5s; } .btn:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } </style> <body> <b href="#" class="btn">button</b> </body>

2021年06月30日
61 阅读
0 评论
1 点赞

2021-05-19

伪3D文本 HTML<div class="loading">Loading</div>CSS@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap"); @function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) { $shadows: (); // When dropped, it will shrink like a spring. When floating, it grows into its shape. @for $i from 1 to $depth { @if ($floating == false and $i > $depth / 2) { $shadow-color: transparent; } $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma); } // When dropped, the shadow reveals. When floating, the shadow fades. @if ($floating == false) { $shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma); } @else { $shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma); } @return $shadows; } body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #2980b9; } .loading { display: flex; color: white; font-size: 5em; font-family: "Baloo Bhaijaan", cursive; text-transform: uppercase; span { text-shadow: float-text-3d($floating: false); transform: translateY(20px); animation: bounce 0.3s ease infinite alternate; } } @keyframes bounce { to { text-shadow: float-text-3d($floating: true); transform: translateY(-20px); } }JSlet loading = document.querySelector(".loading"); let letters = loading.textContent.split(""); loading.textContent = ""; letters.forEach((letter, i) => { let span = document.createElement("span"); span.textContent = letter; span.style.animationDelay = `${i / 10}s`; loading.append(span); });

2021年05月19日
130 阅读
0 评论
3 点赞

2021-01-04

2021年01月04日
7,794 阅读
0 评论
7 点赞