CSS創意與視覺表現

 

視覺效果

 

 

 

CSS代碼：

.cover {
    padding: 36% 50%;
    background: linear-gradient(to right, white 50%, black calc(50% + 1px));
    position: relative;
    font-size: 200%;
}
.cover::before,
.cover::after {
    content: '';
    position: absolute;
    width: 36%; height: 50%;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}
.cover::before {
    top: 0;
    background: radial-gradient(circle, white 13%, black calc(13% + 1px));
}
.cover::after {
    bottom: 0;
    background: radial-gradient(circle, black 13%, white calc(13% + 1px));
}
.cover-h,
.cover-p {
    position: absolute;
    mix-blend-mode: difference;
    left: 0; right: 0;
    text-align: center;
    color: #fff;
    z-index: 1;
}

 

HTML代碼：

<div class="cover">
    <h2 class="cover-h">CSS創意與視覺表現</h2>
</div>

 

 

佈局

　　平行四邊形佈局

　　　　# shape-outside是不規則形狀環繞佈局的核心,支持的屬性值分爲以下四大類
　　　　1. none # 默認值
　　　　2. <shape-box> # 圖形盒子
　　　　3. <basic-shape> # 基本圖函數
　　　　4. <image> # 圖像類

　　　　

　　　　CSS Shapes教程

            平行四邊形佈局解讀

 

　　　　效果

 

 　　　　

　　　　代碼

CSS代碼：

.shape-left {
    float: left;
    width: 200px; height: 500px;
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
    padding: 1px;
    position: relative;
    z-index: 0;
}
.content::before {
    content: '';
    position: absolute;
    background-color: #fff;
    transform: skewX(-22deg);
    left: 50px; right: 50px; top: 0; bottom: 0;
    border: 1px solid #ddd;
    z-index: -1;
}

 

HTML代碼

<div class="shape-left"></div>
<div class="shape-right"></div>
<content class="content">
   ...內容...
</content>

 

 

圖形

　　透明方格

　　　　# 原理小方格錯位疊加後效果

　　　　效果

 

 

 

 

　　　　代碼

CSS代碼：

.square {
    display: inline-block;
    padding: 300px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

 

HTML代碼:

<div class="square"></div>

 

 

　　鏤空

　　　　圖像剪裁

　　　　　　# 實現的關鍵就是使用巨大尺寸的outline模擬鏤空

　　　　　效果

 

 

 

　　　　代碼

CSS代碼：

.clip-img-x {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.clip-img {
    display: block;
}
.clip-shape {
    width: 150px; height: 150px;
    outline: 9999px solid rgba(0,0,0,.5);
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    cursor: move;
}

 

HTML代碼

 

<div class="clip-img-x">
    <div class="clip-shape"></div>
    <img src="./mm.jpg" class="clip-img">
</div>

 

 

　　　　　　

　　　　新手引導

　　　　　　# 實現的關鍵就是使用巨大尺寸的box-shadow擴展模擬鏤空。
　　　　　　# 也能夠使用徑向漸變實現，但沒有box-shadow好理解好上手。

 

　　　　效果

 

 

　　　　代碼

CSS代碼：

.guide-x {
    text-align: center;
    padding: 100px 16px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.guide-overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, transparent);
}
.guide-overlay-shape {
    width: 100px; height: 60px;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
}

 

HTML代碼

<div class="guide-x">
    <div class="guide-overlay">
        <i class="guide-overlay-shape" data-content="發佈按鈕搬到這裏了"></i>
    </div>
    <button class="button">發佈</button>
</div>

 

 

　　　　外圓角選項卡

　　　　　　效果

 

 

　　　　代碼

CSS代碼：

.tab-x {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-left: 20px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.tab-a {
    --backgroundColor: #fff;
    background-color: var(--backgroundColor);
    line-height: 20px;
    padding: 10px 20px;
    border-radius: 16px 16px 0 0;
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,.1));
    position: relative;
}
/* 建立外側圓弧 */
.tab-a::before,
.tab-a::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 16px; height: 16px;
}
.tab-a::before {
    background: radial-gradient(circle at 0 0, transparent, transparent 16px, var(--backgroundColor) 17px);
    right: 100%;
}
.tab-a::after {
    background: radial-gradient(circle at 100% 0, transparent, transparent 16px, var(--backgroundColor) 17px);
    left: 100%;
}
.tab-a.active {
    --backgroundColor: teal;
    color: #fff;
    z-index: 1;
}

 

HTML代碼

<div class="tab-x">
    <a href="javascript:" class="tab-a">選項卡3</a>
    <a href="javascript:" class="tab-a">選項卡2</a>
    <a href="javascript:" class="tab-a active">選項卡1</a>
</div>

 

 

這裏外部的圓角使用徑向漸變實現。咱們也能夠使用box-shadow實現相似的效果，以下：

 

　　 代碼以下：

CSS

.quar-radius {
    width: 96px; height: 96px;
    border-radius: 0 0 50% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: 0 0 0 100px teal;
}

HTML

<div class="quar-radius"></div>

 

 

　　　　任意圖形鏤空

　　　　　　黑色黑色半透明遮罩，中間鏤空的是不規則圖形，例如五角星：

　　　　效果 

 

 

　　　　代碼

CSS代碼：

.shape-hollow-x {
    width: 600px;
    max-width: 100%;
    height: 300px;
    background: linear-gradient(red, green);
    position: relative;
}
.shape-hollow {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0,.75);
    /* 實際開發須要-webkit- */
    mask: no-repeat center;
    mask-image: linear-gradient(black, black), url(./star.svg);
    mask-size: cover, 120px 120px;
    mask-composite: exclude;
    mask-composite: source-out;
}

HTML代碼

<div class="shape-hollow-x">
    <i class="shape-hollow"></i>
</div>

 

      關於mask遮罩的詳細介紹

 

　　　　拓展：新穎的過場動效

 

img.shape-hollow {
    /* 動畫 */
    animation: starIn 2s infinite;
}
@keyframes starIn {
    from {
        -webkit-mask-size: 100%, 0 0;
        mask-size: 100%, 0 0;
    }
    to {
        -webkit-mask-size: 100%, 300% 300%;
        mask-size: 100%, 300% 300%;
    }
}

 

　　圖像處理

　　　　

　　　　# CSSgram中的圖像處理 darken
　　　　# Github項目地址

 

　　　　白天照片模擬黑夜

　　　　效果

 

 

 

　　　　代碼

CSS代碼：

.night {
    width: 256px; height: 256px;
    background: rgba(0,40,140,.6) url(./house-bed.jpg);
    background-size: 100%;
    background-blend-mode: darken;
    filter: brightness(80%) grayscale(20%) contrast(1.2);
}

 

HTML代碼

<div class="night"></div>

 

 

　　　　讓照片更夢幻

　　　　效果

 

 

　　　　代碼

CSS代碼：

.girl {
    width: 256px; height: 171px;
    background: rgba(238,179,163, .8) url(./mm.jpg);
    background-size: 100%;
    background-blend-mode: soft-light;
    filter: contrast(1.1);
}

 

HTML代碼

<div class="girl"></div>

 

 

　　　　

　　　　更高級的圖像處理

　　　　　　參考自

　　　　　　

　　　　　　素描

CSS代碼：

.sketch {
    width: 256px; height: 192px;
    background: url(./example.jpg) -2px -2px, url(./example.jpg);
    background-size: 258px 194px;
    background-blend-mode: difference;
    filter: brightness(3) invert(1) grayscale(1);
}

 

HTML代碼

<div class="sketch"></div>

 

 

　　　　　　

　　　　

　　　　　　水彩

CSS代碼：

.watercolor {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.watercolor::before {
    content: '';
    display: block;
    height: inherit;
    background: url(./example.jpg) -2px -2px, url(./example.jpg);
    background-size: 100%;
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
.watercolor::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: url(./example.jpg) -1px -1px;
    background-size: 100%;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
}

 

HTML代碼

<div class="watercolor"></div>

 

 

　　　　　　彩鉛

CSS代碼：

.pencil {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.pencil::before {
    content: '';
    display: block;
    height: inherit;
    background: url(./example.jpg) -1px -1px, url(./example.jpg);
    background-size: calc(100% + 1px);
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
.pencil::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: url(./example.jpg);
    background-size: 100%;
}

HTML代碼

<div class="pencil"></div>

 

 

　　動畫

　　　　餅圖

　　　　靜態效果

 

 

 

 

　　　　代碼

CSS代碼：

.pie-simple {
    width: 128px; height: 128px;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
}
.pie-left,
.pie-right {
    width: 50%; height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}
.pie-left::before,
.pie-right::before,
.pie-right::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-color: teal;
}
.pie-left::before {
    left: 100%;
    transform-origin: left;
    transform: rotate(calc(3.6deg * (var(--percent) - 50)));
    opacity: calc(99999 * (var(--percent) - 50));
}
.pie-right::before {
    right: 100%;
    transform-origin: right;
    transform: rotate(calc(3.6deg * var(--percent)));
}
.pie-right::after {
    opacity: calc(99999 * (var(--percent) - 50));
}

HTML代碼

<div class="pie-item">
    <p>10%大小</p>
    <div class="pie-simple" style="--percent: 10;">
        <div class="pie-left"></div>
        <div class="pie-right"></div>
    </div>
</div>
<div class="pie-item">
    <p>40%大小</p>
    <div class="pie-simple" style="--percent: 40;">
        <div class="pie-left"></div>
        <div class="pie-right"></div>
    </div>
</div>
<div class="pie-item">
    <p>80%大小</p>
    <div class="pie-simple" style="--percent: 80;">
        <div class="pie-left"></div>
        <div class="pie-right"></div>
    </div>
</div>
<div class="pie-item">
    <p>99%大小</p>
    <div class="pie-simple" style="--percent: 99;">
        <div class="pie-left"></div>
        <div class="pie-right"></div>
    </div>
</div>

　　　　

　　　　動態效果(略)

　　

　　　　代碼

CSS代碼（單循環）：

.pie-spin {
    width: 128px; height: 128px;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
}
.pie-spin-left,
.pie-spin-right {
    width: 50%; height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}
.pie-spin-left::before,
.pie-spin-right::before,
.pie-spin-left::after,
.pie-spin-right::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-color: teal;
}
.pie-spin-left {
    opacity: 1;
    animation: second-half-show 1.6s steps(1, end) infinite;
}
.pie-spin-left::before {
    left: 100%;
    transform-origin: left;
    animation: spin 1.6s .8s infinite linear;
}
.pie-spin-right::before {
    right: 100%;
    transform-origin: right;
    animation: spin 1.6s infinite linear;
}
.pie-spin-right::after {
    animation: second-half-show 1.6s steps(1, end) infinite;
    opacity: 1;
}
.pie-spin-left::after {
    animation: second-half-hide 1.6s steps(1, end) infinite;
    opacity: 0;
}
@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes second-half-hide {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes second-half-show {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}

 

CSS代碼（交替循環）：

.pie-spin2 {
    width: 128px; height: 128px;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
}
.pie-spin2-left,
.pie-spin2-right {
    width: 50%; height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}
.pie-spin2-left::before,
.pie-spin2-right::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-color: teal;
}
.pie-spin2-left::before {
    left: 100%;
    transform-origin: left;
    animation: spinWait2 3.2s infinite linear;
}
.pie-spin2-right::before {
    right: 100%;
    transform-origin: right;
    animation: spinWait1 3.2s infinite linear;
}
@keyframes spinWait1 {
    0%        { transform: rotate(0deg); }
    25%, 50%  { transform: rotate(180deg); }
    75%, 100% { transform: rotate(360deg); }
}
@keyframes spinWait2 {
    0%, 25%  { transform: rotate(0deg); }
    50%, 75% { transform: rotate(180deg); }
    100%     { transform: rotate(360deg); }
}

 

HTML代碼（單循環）：

<div class="pie-spin">
    <div class="pie-spin-left"></div>
    <div class="pie-spin-right"></div>
</div>

 

HTML代碼（交替循環）：

<div class="pie-spin2">
    <div class="pie-spin2-left"></div>
    <div class="pie-spin2-right"></div>
</div>

 

 

　　　　打點

　　　　　　效果

 

 　　　　　　最優實現

　　　　代碼

CSS代碼：

 

dot-a {
    display: inline-block;
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25ex;
    overflow: hidden;
}
dot-a::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot1 3s infinite step-start both;
}
@keyframes dot1 {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

 

HTML代碼：

正在加載中<dot-a>...</dot-a>

 

　　　　

 

　　　　　　其餘實現　　　　　　　　　　　　

　　　　　　　　1. content動畫實現

　　　　　　　　　　優勢：
　　　　　　　　　　　　易理解易上手；
　　　　　　　　　　　　顏色、字號自然自適應；
　　　　　　　　　　缺點：
　　　　　　　　　　　　IE不兼容，Safari不兼容；

CSS代碼：

dot-b::before {
    content: '...';
    position: absolute;
    animation: dot2 3s infinite step-start both;
}
dot-b:after {
    content: '...';
    color: transparent;
}
@keyframes dot2 {
    33% { content: '.'; }
    66% { content: '..'; }
}

 

HTML代碼

正在加載中<dot-b></dot-b>

 

 

　　　　　　　　2. ch尺寸控制

　　　　　　　　　　優勢：
　　　　　　　　　　　　易理解易上手；
　　　　　　　　　　　　顏色、字號自然自適應；
　　　　　　　　　　缺點：
　　　　　　　　　　　　IE ch支持有瑕疵；
　　　　　　　　　　　　專門使用了等寬字體，樣式不完美；

 

CSS代碼：

dot-c {
    display: inline-block;
    width: 3ch;
    text-indent: -1ch;
    vertical-align: -.25ex;
    overflow: hidden;
    animation: dot3 3s infinite step-start both;
    font-family: Consolas, Monaco, monospace;
}
@keyframes dot3 {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}

 

HTML代碼

正在加載中<dot-c>...</dot-b>

 

　　　　　　　　

　　　　　　　　3. box-shadow模擬

　　　　　　　　　　# 亦能夠使用radial-gradient模擬。
　　　　　　　　　　優勢：
　　　　　　　　　　　　沒有什麼優勢；
　　　　　　　　　　缺點：
　　　　　　　　　　　　尺寸、間距和形狀固定，適用場景有限；

 

CSS代碼：

dot-d::before {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background-color: currentColor;
    box-shadow: 4px 0, 8px 0;
    animation: dot4 3s infinite step-start both;
    margin-top: 1em;
}
dot-d::after {
    content: '...';
    color: transparent;
}
@keyframes dot4 {
    33% { box-shadow: none; }
    66% { box-shadow: 4px 0; }
}

 

HTML代碼：

正在加載中<dot-d></dot-d>

 

 

　　　　　　　　4. border和background模擬
　　　　　　　　　　優勢：
　　　　　　　　　　　　腦洞不錯；
　　　　　　　　　　缺點：
　　　　　　　　　　　　尺寸、間距和形狀固定，適用場景有限；

 

CSS代碼：

dot-e::before {
    content: '';
    position: absolute;
    width: 10px; height: 2px;
    padding: 0 2px;
    border-left: 2px solid; border-right: 2px solid;
    background-color: currentColor;
    background-clip: content-box;
    box-sizing: border-box;
    animation: dot5 3s infinite step-start both;
    margin-top: 1em;
}
dot-e::after {
    content: '...';
    color: transparent;
}
@keyframes dot5 {
    33% { border-right-color: transparent; background-color: transparent; }
    66% { border-right-color: transparent; }
}

 

HTML代碼：

正在加載中<dot-e></dot-e>

 

　　　　流動

　　　　　　色彩的流動

　　　　　　　　# 看上去在流動：實際上沒有任何位移。

 

CSS代碼：

.flow-colorful {
    max-width: 600px;
    height: 150px;
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
    animation: hue 6s linear infinite;
}
@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

 

HTML代碼：

<div class="flow-colorful"></div>

 

 

　　　　　　

　　　　　　文字動效

CSS代碼：

.flow-slogon {
    font-size: 120px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 6s linear infinite;
}

 

HTML代碼：

<h2 class="flow-slogon">第五屆CSS大會</h2>

 

　　　　　　移動的錯覺

　　　　　　　　# 斜紋進度條：視覺上是前進，其實是上下移動。

CSS代碼：

.flow-twill {
    padding-right: 30%;
    height: calc(1.4142 * 20px);
    background: repeating-linear-gradient(45deg, teal, teal 10px, transparent 11px, transparent 19px, teal 20px);
    background-clip: content-box;
    animation: twill 1s linear infinite;
    position: relative;
}
.flow-twill::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,.5), hsla(0,0%,100%,.5), rgba(0,0,0,.5));
}
@keyframes twill {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 calc(-1 * 1.4142 * 40px);
    }
}

 

HTML代碼：

<div class="flow-twill"></div>

 

 

　　　　　　移動與水波的錯覺

　　　　　　　　# CSS模擬的波浪線

CSS代碼：

.flow-wave {
    padding: 5px 0;
}
.flow-wave:hover,
.flow-wave:focus {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

 

HTML代碼：

<a href="javascript:" class="flow-wave">hover我（移動端按下）</a>

 

 

　　行爲

　　　　滾動指示器

　　　　　　# 我這裏實現的方法去傳統的CSS滾動指示器適用的場景要普遍的多，且使用更簡單。

　　　　　　# 滾動頁面，觀察最頂端的條狀進度。

　　　　　　# 滾動指示器建議在頁面滾動高度超過一屏的時候使用。

　　　　原理

　　　　　　使用mix-blend-mode:darken改進實現。

CSS代碼：

body {
    position: relative;
}
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}
.indicator::after {
    content: '';
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}

 

HTML代碼：

<!-- 在<body>標籤內插入指示器元素 -->
<div class="indicator"></div>

 

　　　　視差滾動

CSS代碼：

.scroll {
    height: 600px;
    perspective: 1px;
    position: relative;
    background-color: #fff;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    overflow-x: hidden;
}
.box {
    height: 1280px;
    transform-style: preserve-3d;
    transform: translateZ(-1px);
    position: relative;
}
.iphone {
    position: absolute; left: 50%;
    transform: translate3d(-50%, -120px, -1px) scale(2);
}

.smile, .flower, .music, .pdf {
    position: absolute; left: 50%; top: 50%;
    background: url(../../201503/mobile_1_layer2.png) no-repeat;
    transform: translate3d(-50%, -50%, 0);
}
.smile {
    width: 64px; height: 64px;
    margin: -400px 0 0 -400px;
}
.flower {
    width: 268px; height: 229px;
    background-position: 0 -56px;
    margin: -320px 0 0 400px;
}
.music {
    width: 114px; height: 114px;
    background-position: -10px -297px;
    margin: -40px 0 0 -300px;
}
.pdf {
    width: 130px; height: 120px;
    background-position: -10px -423px;
    margin: 140px 0 0 500px;
}
/*mobile*/
@media screen and (max-width: 640px) {
    .scroll {
        height: 400px;
    }
    .iphone {
        transform: translate3d(-50%, -40px, -1px) scale(2);
        max-width: 100%;
    }
    .smile {
        margin-left: -200px;
    }
    .flower {
        margin-left: 200px;
    }
    .pdf {
        margin-left: 260px;
    }
}

 

HTML代碼：

<div class="scroll">
    <div class="box">
        <img src="./mobile_1_iphone.jpg" class="iphone">
        <i class="smile"></i>
        <i class="flower"></i>
        <i class="music"></i>
        <i class="pdf"></i>
    </div>
</div>

 

 

　　　　　　分欄拉伸

 

　　　　　　　　# 效果（PC only，Android亦可）
　　　　　　　　# 拖拽分隔線，能夠改變左右兩欄尺寸。

 

CSS代碼：

.column {
    overflow: hidden;
}
.column-left {
    height: 400px;
    background-color: #fff;
    position: relative;
    float: left;
}
.column-right {
    height: 400px;
    padding: 16px;
    background-color: #eee;
    box-sizing: border-box;
    overflow: hidden;
}
.resize-save {
    position: absolute;
    top: 0; right: 5px; bottom: 0; left: 0;
    padding: 16px;
    overflow-x: hidden;
}
.resize-bar {
    width: 200px; height: inherit;
    resize: horizontal;
    cursor: ew-resize; 
    opacity: 0;
    overflow: scroll;
}
/* 拖拽線 */
.resize-line {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    border-right: 2px solid #eee;
    border-left: 1px solid #bbb;
    pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
    border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
    width: 200px; height: inherit;
}

/* Firefox只有下面一小塊區域能夠拉伸 */
@supports (-moz-user-select: none) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        border-left: 1px solid #bbb;
    }
    .resize-bar:hover ~ .resize-line::after,
    .resize-bar:active ~ .resize-line::after {
        content: '';
        position: absolute;
        width: 16px; height: 16px;
        bottom: 0; right: -8px;
        background: url(./resize.svg);
        background-size: 100% 100%;
    }
}

 

HTML代碼：

<div class="column">
    <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
            左側的內容，左側的內容，左側的內容，左側的內容
        </div>                                            
    </div>
    <div class="column-right">
        右側的內容，右側的內容，右側的內容，右側的內容
    </div>
</div>