搜索到
13
篇与
css
的结果
-
百度编辑器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 -
新年倒计时代码 <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> <!--新年倒计时结束-->
-
-
-
文字彩虹跑马灯效果特效代码 代码： <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>
-
弹窗广告代码分享 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>
-
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>
-
伪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); });
-
主题添加移动端下边栏 joe 主题移动样式下面无法登录，所以索性给 joe 主题加上下边栏1.首先在component文件夹里新建一个footer.navimobi.php，其中JNavigation是我自己之前美化加的，你可以换成自己的链接。 <?php /** * 手机底部列表菜单 */ if (!Helper::options()->JMobiset) return; //$settings = Helper::options()->JNavmobi; $all = Typecho_Plugin::export(); $loginUrl = $this->options->loginUrl; if (array_key_exists('TePass', $all['activated'])){ if ($this->user->hasLogin()) $loginUrl = $this->options->index.'/admin/extending.php?panel=TePass/theme/ucenter/profile.php'; else $loginUrl = $this->options->index.'/tepass/signin'; } ?> <nav class="navigation-tab"> <!-- --><?php // $navtops_list = array(); // if (strpos($settings,'||')) { // //解析关键词数组 // $kwsets = array_filter(preg_split("/(\r|\n|\r\n)/",$settings)); // foreach ($kwsets as $kwset) { // $navtops_list[] = explode('||',trim($kwset)); // } // } // ?> <div class="navigation-tab-item"><a href="<?php echo $this->options->index ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-zhuye"></i></span></a></div> <div class="navigation-tab-item"><a href="<?php echo $loginUrl ?>" target="_blank"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-denglu"></i></span></a></div> <div class="navigation-tab-item <?php if ($this->is('page')) _e('active'); ?>" id="load_mobinav"><a href="<?php echo $this->options->JNavigation ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-paihangbang"></i></span></a></div> <div class="navigation-tab-item" id="mob_goTop"><a><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-gotop"></i></span></a></div> <div class="navigation-tab-overlay"></div> </nav> 2.然后在functions.php里面加上一个开关 // 手机底部导航栏样式 $JMobiset = new Typecho_Widget_Helper_Form_Element_Select('JMobiset',array(0=>'不开启',1=>'开启'),0,'<h2>移动设置 Info</h2><hr>移动底部菜单设置','移动端页脚底部菜单'); $JMobiset->setAttribute('class', 'j-setting-content j-setting-index'); $form->addInput($JMobiset);3.在 public/config.php 里面（顶部）引入我们刚刚的文件<?php $this->need('component/footer.navmobi.php'); ?>最后加上控制js和 样式css $(".navigation-tab-item").bind('click',function() { $(".navigation-tab-item").removeClass("active"); $(this).addClass("active"); $(".navigation-tab-overlay").css({ left: 25 * $(this).prevAll().length + "%" }) }) $("#mob_goTop").click(function () { $("#backToTop").click() }) let load_mobi = $('#load_mobinav') if (load_mobi.hasClass('active')){ $(".navigation-tab-overlay").css({ left: 25 * load_mobi.prevAll().length + "%" }) }4.以下代码为scss ，自己手动转css @media (max-width: 768px) { .navigation-tab { display: flex !important; } } /* navigation-tab */ .navigation-tab{ height: 60px; width: 100%; line-height: 1; background-color: #fff; box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); overflow: hidden; border: 10px solid #fff; display: none; flex-shrink: 0; position: fixed; bottom: 0; z-index: 40; .navigation-tab-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; flex-shrink: 0; line-height: 1; cursor: pointer; transition: 0.3s; position: relative; z-index: 2; &.active { width: 25%; } .navigation-tab__icon { display: block; color: #4298e7; transition-duration: 0.3s; line-height: 1; svg{ width: 24px; height: 24px; fill:#4298e7; } i{ font-size: 24px; } } } .navigation-tab-overlay { border-radius: 20px; background-color: #e4f2ff; height: 100%; width: 25%; position: absolute; left: 0; top: 0; transition: 0.3s; } }
