console 命令行工具 X clear

console

window.addEventListener('load', function () {
    var goBack = document.querySelector('.goBack');
    // 点击goBack图片，滚动窗口至页面最上方
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= 100) {
            // console.log(window.pageYOffset);
            // 当头部被卷去 >520px 显示goBack返回顶部图片
            // page.style.width = '500px';
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    // 点击goBack图片，滚动窗口至页面最上方
    goBack.addEventListener('click', function () {
        window.scroll(0, 0);
    });
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
	<div class="page">
        <div class="inner">
            <div class="cont">
                <div class="goBack"></div>
                <h1 class="title"><span>CSS3 过渡效果练习</span></h1>
            </div>

            <div class="cont">
                <!-- 进度条案例练习 -->
                <div class="w">
                    <h3>
                        <span></span>
                        <span>进度条过渡效果练习</span>
                    </h3>
                    <ul>
                        <li><p>首先要有个大盒子。设置宽、高、边框，边框圆角是高度的一半</p></li>
                        <li><p>然后大盒子里面包含一个子盒子，子盒子里面添加过渡效果</p></li>
                        <li><p>最后当鼠标经过大盒子的时候，小盒子宽度发生变化</p></li>
                    </ul>
<!-- 代码块 -->
<pre>
&lt;<span class="t0">style</span>&gt;
    <span class="t1">.bar</span> {
        <span class="t2">padding</span>: <span class="t3">1px</span>;
        <span class="t2">width</span>: <span class="t3">150px</span>;
        <span class="t2">height</span>: <span class="t3">15px</span>;
        <span class="t2">border</span>: <span class="t3">1px</span> <span class="t4">solid red</span>;
        <span class="t9">/* 边框圆角是高度的一半 */</span>
        <span class="t2">border-radius</span>: <span class="t3">7px</span>;   
    }
    <span class="t1">.bar_in</span> {
        <span class="t2">width</span>: <span class="t3">50%</span>;
        <span class="t2">height</span>: <span class="t3">100%</span>;
        <span class="t2">background-color</span>: <span class="t4">red</span>;
        <span class="t9">/* 谁做过渡给谁加 */</span>
        <span class="t2">transition</span>: <span class="t4">all .7s</span>;
    }
    <span class="t9">/* 当鼠标经过大盒子的时候，子盒子宽度发生变化 */</span>
    <span class="t1">.bar</span><span class="t5">:hover</span> <span class="t1">.bar_in</span> {
        <span class="t2">width</span>: <span class="t3">100%</span>;
    }
&lt;<span class="t0">/style</span>&gt;
&lt;<span class="t0">body</span>&gt;
    &lt;<span class="t1">div</span> <span class="t2">class</span>=<span class="t4">"bar"</span>&gt;
        &lt;<span class="t1">div</span> <span class="t2">class</span>=<span class="t4">"bar_in"</span>&gt;&lt;<span class="t1">/div</span>&gt;
    &lt;<span class="t1">/div</span>&gt;
&lt;<span class="t0">/body</span>&gt;
</pre>
<!-- 代码块 --> 
                    <div class="bar">
                        <div class="bar_in"></div>
                    </div>                   
                </div>

                <!-- 切换图片案例练习 -->
                <div class="w">
                    <h3>
                        <span></span>
                        <span>切换图片过渡效果练习</span>
                    </h3>
                    <ul>
                        <li><p>首先有个大盒子<code>logo</code></p></li>
                        <li><p>然后大盒子里面再装一个图片盒子，里面放两张图片</p></li>
                        <li><p>当鼠标经过时，通过移动图片的位置，使需要显示的部分摆在显示的盒子中间，其余部分隐藏</p></li>
                        <li><p>移动图片需要使用到<b>定位效果</b>，记得口诀<b>子绝父相</b></p></li>
                    </ul>
<!-- 代码块 -->
<pre>
&lt;<span class="t0">style</span>&gt;
    <span class="t9">/* 最外层大盒子 */</span>
    <span class="t1">.logo</span> {
        <span class="t2">position</span>: <span class="t4">relative</span>;
        <span class="t2">width</span>: <span class="t3">56px</span>;
        <span class="t2">height</span>: <span class="t3">56px</span>;
        <span class="t2">background-color</span>: <span class="t4">pink</span>;
        <span class="t2">border</span>: <span class="t3">3px</span> <span class="t4">solid red</span>;
        <span class="t9">/* 溢出则隐藏 */</span>
        <span class="t2">overflow</span>: <span class="t4">hidden</span>;
    }
    <span class="t9">/* 图片盒子 */</span>
    <span class="t1">.father</span> {
        <span class="t9">/* 使用定位移动盒子 */</span>
        <span class="t2">position</span>: <span class="t4">absolute</span>;
        <span class="t2">left</span>: <span class="t3">8px</span>;
        <span class="t2">top</span>: <span class="t3">5px</span>;
        <span class="t2">width</span>: <span class="t3">120px</span>;
        <span class="t2">height</span>: <span class="t3">56px</span>;
        <span class="t2">font-size</span>: <span class="t3">30px</span>;
        <span class="t9">/* 谁做过渡给谁加 */</span>
        <span class="t2">transition</span>: <span class="t4">all .7s</span>;
    }
    <span class="t9">/* 当鼠标经过图片盒子，位置发生变化 */</span>
    <span class="t1">.father</span><span class="t5">:hover</span> {
        <span class="t2">top</span>: <span class="t3">-34px</span>;
    }
&lt;<span class="t0">/style</span>&gt;
&lt;<span class="t0">body</span>&gt;
    &lt;<span class="t1">div</span> <span class="t2">class</span>=<span class="t4">"logo"</span>&gt;
        &lt;<span class="t1">div</span> <span class="t2">class</span>=<span class="t4">"father"</span>&gt;
            &lt;<span class="t1">i</span> <span class="t2">class</span>=<span class="t4">"fa fa-bell"</span>&gt;&lt;<span class="t1">/i</span>&gt;
            &lt;<span class="t1">i</span> <span class="t2">class</span>=<span class="t4">"fa fa-bell-o"</span>&gt;&lt;<span class="t1">/i</span>&gt;
        &lt;<span class="t1">/div</span>&gt;
    &lt;<span class="t1">/div</span>&gt;
&lt;<span class="t0">/body</span>&gt;
</pre>                
<!-- 代码块 -->    
                    <div class="log">
                        <div class="fater">
                            <span class="fa fa-bell"></span>
                            <span class="fa fa-bell-o"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

/*---------------------------------------------------------- Normalized.css ------------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}


/* 左浮动 */

.fl {
    float: left;
}


/* 右浮动 */

.fr {
    float: right;
}


/* 清除浮动 */

.clear:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: '';
    height: 0
}

.clear {
    *zoom: 1;
}


/* 去除 链接下划线 */

a {
    color: #333;
    text-decoration: none;
}


/* li {
    list-style: none;
} */

i,
em {
    font-style: normal;
}

i {
    color: #c81623;
}

b {
    color: #135ce0;
}

strong {
    color: #373737;
}


/* 去除图片 空白缝隙 */

img {
    border: 0;
    vertical-align: middle;
}

input {
    outline: none;
}

button {
    cursor: pointer;
}


/* 返回顶部按钮 */

div.goBack {
    display: none;
    /* 固定定位和父级没有关系，它以屏幕为准 */
    position: fixed;
    bottom: 22px;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
    /* 版心宽度一般距离 */
    margin-left: 358px;
    /* 固定的盒子必须有宽度 */
    width: 26px;
    height: 26px;
    background: url(https://g.csdnimg.cn/side-toolbar/3.4/images/fanhuidingbucopy.png) no-repeat;
    background-size: cover;
    /* 压住其他所有盒子 */
    z-index: 999;
}


/*---------------------------------------------------------- index.css ------------------------------------------------------------------------------*/

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, "\5B8B\4F53", sans-serif;
    /* 抗锯齿 让文字显示的更清晰 */
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-underline-position: under;
    text-decoration-skip-ink: none;
    background-color: #fff;
}


/* 最外层内边距 */

.page {
    position: relative;
    word-wrap: break-word;
    hyphens: auto;
    background-color: #fff;
    padding: calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
}


/* 版心 */

.inner {
    position: relative;
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
    zoom: 1;
}


/* 标题区域 */

.inner .title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
}

.inner .title span {
    padding: 0 0 10px;
    border-bottom: 3px solid rgb(32, 87, 146);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-size: 16px;
}


/* 内容区域 */

.cont {
    visibility: visible;
    position: relative;
    overflow: auto;
    color: #222;
    font-size: 17px;
    word-wrap: break-word;
    hyphens: auto;
    text-align: justify;
    z-index: 0;
}

.cont * {
    max-width: 100%!important;
    box-sizing: border-box!important;
    -webkit-box-sizing: border-box!important;
    word-wrap: break-word!important;
}


/* 内容文本区域 */

.cont .w {
    position: relative;
    font-size: 16px;
    color: black;
    margin-bottom: 15px;
    padding-right: 10px;
    padding-left: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
    line-height: 1.25;
    letter-spacing: 2px;
    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    visibility: visible;
    border: 1px solid transparent;
}

.cont .w:last-child {
    margin-bottom: 100px;
}


/* h3 副标题 */

.cont h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #373737;
    font-size: 18px;
    visibility: visible;
}

.cont h3 span:nth-child(1) {
    position: absolute;
    left: -1px;
    margin-top: 2px;
    width: 4px;
    height: 20px;
    background-color: rgb(199, 29, 35);
    border-radius: 2px;
    display: block;
    float: left;
    visibility: visible
}

.cont h3 span:nth-child(2) {
    margin-left: 0px;
    line-height: 26px;
    visibility: visible;
}


/* 段落文本 p */

.cont p {
    margin-left: 1px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 26px;
    font-size: 14px;
    word-spacing: 2px;
    color: rgb(55, 55, 55);
    text-align: justify;
    visibility: visible;
    min-height: 1em;
}


/* 列表 */

.cont ul {
    padding-left: 42px;
    font-size: 14px;
}

.cont ul li p {
    line-height: 35px;
    word-spacing: 2px;
    margin-left: 5px;
    margin-right: 8px;
    padding: 0;
}

.cont ol {
    padding-left: 48px;
    font-size: 14px;
}

.contol li p {
    line-height: 35px;
    word-spacing: 2px;
    margin-left: -2px;
    margin-right: 8px;
    padding: 0;
}


/* 表格 */

.cont .table-box {
    overflow-x: auto;
}

.cont table {
    display: table;
    width: 100%;
    max-width: 600px !important;
    margin: 0 auto 15px;
    border-collapse: collapse;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 14px;
}

.cont table tr {
    text-align: left;
    border-top: 1px solid #dfe2e5;
}

.cont table tr td:nth-child(1) {
    white-space: nowrap;
}


/* .cont table tr td:nth-child(2) {
    white-space: nowrap;
} */

.cont table th {
    color: #135ce0;
    font-size: 17px;
    white-space: nowrap;
}

.cont table th,
.cont table td {
    border: 1px solid #dfe2e5;
    padding: 9px 20px;
}

.cont table td p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-indent: 0;
    margin: 0;
    padding: 0;
}

.cont table td p:nth-child(n+2) {
    margin: 10px 0 0 0;
}


/* 图片 */

.cont figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px auto 15px;
    visibility: visible;
}

.cont figure img {
    box-shadow: rgb(55 55 55 / 12%) 2px 4px 6px 0px;
    border-radius: 8px;
    visibility: visible !important;
    height: auto !important;
    width: 600px !important;
}


/* 链接 */

.cont .link {
    margin: 20px 0;
}

.cont .link a {
    padding: 10px 16px;
    font-size: 13px;
    color: white;
    background-color: #e9686b;
    border-radius: 8px;
}


/* 引用快 */

.cont blockquote {
    color: rgb(106, 115, 125);
    margin: 15px 8px 20px;
    padding: 16px;
    border-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left: 3px solid #DBDBDB;
    border-color: rgb(199, 29, 35);
    border-radius: 8px;
    box-shadow: rgb(199 29 35) 8px 8px 0px;
    background: rgb(255, 255, 255);
}

.cont blockquote p {
    font-size: 14px;
    word-spacing: 2px;
    line-height: 26px;
    color: rgb(55, 55, 55);
    text-align: left;
}


/* pre */

.cont pre {
    margin: 10px auto 10px;
    border-radius: 5px;
    box-shadow: none !important;
    position: relative;
    overflow-x: auto;
    padding: 8px 16px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 13px;
    color: #abb2bf;
    text-align: left;
    line-height: 24px;
    letter-spacing: 0px;
    -webkit-overflow-scrolling: touch;
    background: #272822;
    white-space: pre;
}


/* code 代码块 */

.cont code {
    font-size: 14px;
    overflow-wrap: break-word;
    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    word-break: break-all;
    color: rgb(199, 29, 35);
}


/* 文字样式 */

.t0 {
    color: #3f9cd6 !important;
}

.t1 {
    color: #dcce80 !important;
}

.t2 {
    color: #7cdcfe !important;
}

.t3 {
    color: #b5ce9b !important;
}

.t4 {
    color: #ce9178 !important;
}

.t5 {
    color: #c678dd !important;
}

.t6 {
    color: #ff8c00 !important;
}

.t8 {
    color: #de645b !important;
}

.t9 {
    color: #4a892d !important;
}

.bar {
    width: 300px;
    height: 30px;
    border: 1px solid red;
    border-radius: 15px;
    padding: 2px 2px 3px 2px;
}
.bar_in {
    width: 50%;
    height: 100%;
    background-color: red;
    border-radius: 15px;
    /* 谁做过渡给谁加 */
    transition: all .7s;
}
.bar:hover .bar_in {
    width: 100%;
}

.log {
    position: relative;
    margin-left: 30px;
    width: 56px;
    height: 56px;
    background-color: pink;
    border: 5px solid red;
    overflow: hidden;
}
.fater {
    position: absolute;
    left: 8px;
    top: 5px;
    width: 120px;
    height: 56px;
    font-size: 30px;
    transition: all .1s;
}
.fater:hover {
    top: -34px;
}
/*---------------------------------------------------------- media.css ------------------------------------------------------------------------------*/

@media screen and (max-width: 500px) {
    /* html {
        -webkit-text-size-adjust: 100%;
    } */
    .cont .w p {
        font-size: 16px;
    }
    .cont .w ul li p,
    .cont .w ol li p {
        font-size: 14px;
    }
    .cont ol p code,
    .cont ul p code {
        font-size: 14px;
    }
    .cont ol p a,
    .cont ul p a,
    {
        font-size: 14px;
    }
    .cont .w table td p {
        font-size: 14px;
    }
    .cont .w table code {
        font-size: 14px;
    }
    .cont .w blockquote p {
        font-size: 14px;
    }
    .cont p code {
        font-size: 16px;
    }
    div.goBack {
        margin-left: 238px !important;
        background-size: 70% 70%;
    }
}