圆弧派博客 - 专注于网络技术 - CSS 2024-03-18T18:06:00+08:00 Typecho https://www.iarc.top/feed/atom/tag/CSS/ <![CDATA[给博客评论框添加一个简单的滑动背景图]]> https://www.iarc.top/417.html 2024-03-18T18:06:00+08:00 2024-03-18T18:06:00+08:00 青帝 http://icp.iarc.top 纯css实现，代码各个主题都是通用的，这里以Joe主题为例

效果：

360截图20240317180456301.jpg

css代码：

.joe_comment__respond-form .body{padding:15px;background:url(https://www.iarc.top/usr/uploads/2024/03/1257364055.png);background-position:right;background-repeat:no-repeat;resize:none;}.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;}

.joe_comment__respond-form .body 就是评论框主题，可以直接在前端按F12查看自己主题的是哪个组
图片：
ltvcwens.png
最好自己保存下来，以防失效。

]]> <![CDATA[萤火虫氛围效果(纯CSS)]]> https://www.iarc.top/376.html 2024-02-15T00:21:00+08:00 2024-02-15T00:21:00+08:00 青帝 http://icp.iarc.top

效果图：

360截图20240215001000165.jpg

纯CSS实现，效果可见本页面从下往上飘得一闪一闪的特效，未引入除CSS代码外任何文件。

代码如下

{hide}

<link rel="stylesheet" href="https://www.iarc.top/css/firefly.css" />
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
    firefly = '<div class="circle-container"><div class="circle"></div></div>';
    document.writeln(firefly);
}
</script>

{/hide}

可添加至任何HTML网页，CSS文件建议本地化一下，以免链接失效。
]]> <![CDATA[分享一款圣诞树代码]]> https://www.iarc.top/91.html 2022-12-26T00:16:00+08:00 2022-12-26T00:16:00+08:00 青帝 http://icp.iarc.top 演示站

::(滑稽) 感觉还不错的一款源码 ❤ 里面所有图片均可替换，全开源！
https://lab.iarc.top/Christmas-Code/

技术栈

代码主要是由 HTML + LESS 编写

注释在style.less文件，有能力自由发挥~

展示图

sds.jpg

下载地址

{hide}

{cloud title="https://xql.lanzoue.com/i0SdE0jeuojc" type="lz" url="https://xql.lanzoue.com/i0SdE0jeuojc" password=""/}

{/hide}

]]> <![CDATA[为网站添加个新年灯笼提前增点喜庆]]> https://www.iarc.top/82.html 2022-12-23T22:14:00+08:00 2022-12-23T22:14:00+08:00 青帝 http://icp.iarc.top 效果图（与本篇文章上面一致）

lll.jpg

代码：

将下面代码加在head标签或者body中即可

年
新
乐
快
<!-- 灯笼代码 -->
<meta charset="utf-8">
<div class="deng-box2">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">年</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box3">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">新</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b">
            </div>
        </div>
    </div>
</div>
<div class="deng-box1">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">乐</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">快</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<style type="text/css">
    .deng-box {
        position: fixed;
        top: -40px;
        right: 150px;
        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: 150px;
        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>
]]> <![CDATA[给网站logo添加一个扫光CSS特效]]> https://www.iarc.top/80.html 2022-12-23T17:03:00+08:00 2022-12-23T17:03:00+08:00 青帝 http://icp.iarc.top 具体扫光演示:本博客logo
saoguang.jpg

方法开始

步骤一

电脑右击，手机当然也可以找到相应工具即可，获取首页源码，确定你的网站logo的class属性名称

步骤二

找到所用模板文件得全局css开始添加:before 选择器代码
提示(.logo:before{})logo改为你自己的class属性名

/**logo扫光效果CSS**/
.logo:before{  /**根据logo外div样式名称修改before前名称**/
    content:"";
    position: absolute;
    left: -665px; 
    top: -460px;
    width: 120px;
    height: 10px; /**光标的宽度，可根据实际调整**/
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度，数字越大越慢**/
}
@-webkit-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
/*END*/
]]> <![CDATA[如何让css按钮居中&CSS小技巧]]> https://www.iarc.top/78.html 2022-12-23T14:20:00+08:00 2022-12-23T14:20:00+08:00 青帝 http://icp.iarc.top margin：auto的用途
水平垂直居中
margin: auto;
{margin-left:auto;margin-right:auto;}

缩写形式为:

{margin:0 auto;}

0为上下边距，可按自己需要设置成不同的

实现最高渲染性能的去除下边框css

div { 　border: 1px solid; 　border-bottom: 0 none;  /**key code here**/}

增加icon按钮点击区域

点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38

.icon- clear { 　width: 16px; 　height: 16px; 　border: 11px solid transparent; 　 /**key code here**/}

永远居中的dialog(可兼容到IE7)

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><style>       .container {           position: fixed;           top:0;           right: 0;           left: 0;           bottom: 0;           background-color: rgba(0,0,0,.5);           text-align: center;           font-size: 0;           white-space: nowrap;           overflow: auto;       }       .container:after {           content: '';           display: inline-block;           height: 100%;           vertical-align: middle;       }       .content {           width: 240px;           height: 120px;           padding: 20px;       }       .dialog {           display: inline-block;           vertical-align: middle;           border-radius: 6px;           background-color: #fff;           font-size: 14px;           white-space: normal;       }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>

去除页面默认滚动条(PC端有效)

/**good code**/html {overflow: hidden;}/**bad code**/html, body {    overflow: hidden;}
]]> <![CDATA[为Typecho Joe主题添加一个侧边栏文章导读！]]> https://www.iarc.top/76.html 2022-12-18T23:32:41+08:00 2022-12-18T23:32:41+08:00 青帝 http://icp.iarc.top 效果图

PC侧边栏文章导读

一、引用1个JS

<script src="https://cdn.jsdelivr.net/gh/xh8039/static-assets/Joe/assets/js/joe.autoc.min.js?version=1.23"></script>

二、添加一段css

打开文件:/usr/themes/Joe/assets/css/joe.autoc.css
在此文件最下方加入这一行代码即可：

/*外部*/
.outline-outside {
    background: var(--background);
}

/*章节*/
.outline-chapter {
    font-size: 0.95rem;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outline-subject {
    padding: 0 10px;
}

.outline-chapter-code {
    padding-right: 5px;
}

.outline-link:link,
.outline-link:visited {
    color: var(--routine);
    text-decoration: none;
    transition: 0.15s;
}

.outline-link:hover {
    color: var(--theme);
}
]]>