分享一些可能會用到的原生前端CSS例子~

時間 2020-07-09

標籤分享一些可能會用原生前端 css 例子欄目 CSS 简体版

原文原文鏈接

前言

今天來分享一些原生的CSS或者是CSS+JS的實際例子，這些例子比較的簡單，可是都是實際開發之中可能遇到的。相信仍是會對部分童鞋有所幫助~javascript

css時間軸效果

時間軸算是很常見效果，咱們能夠經過CSS的相對定位和絕對定位來實現，在開發的時候咱們能夠根據實際狀況來調整各個屬性的值，以知足需求。css

效果：html

代碼：java

HTMLcss3

<div class="message_item">
    <div class="message_time">2020-05-13 19:11</div>
    <sapn class="message_circle"></sapn>
</div>
<div class="message_item">
    <div class="message_time">2020-05-13 19:10</div>
    <sapn class="message_circle"></sapn>
</div>
複製代碼

CSSweb

.message_item{
    height: 145px;
    width: 300px;
    padding-left: 12px;
    border-left: 1px solid #979797;
    position: relative;
}
.message_time{
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    margin-bottom: 12px;
}
.message_circle{
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #547ABD;
    border-radius: 50%;
    left: -4px;
    top: 5px;
}
複製代碼

css實現信息框樣式

對於信息框樣式的實現，咱們能夠利用CSS僞類和CSS3 transform 屬性來實現。ide

第一種

HTML佈局

<div class="box"></div>
複製代碼

CSSflex

.box{
    width: 200px;
    height: 80px;
    background: #E3EAF4;
    position: relative;
}
.box::after{
    content: ' ';
    height: 12px;
    width: 12px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -4px;
    left: 20px;
    position: absolute;
    background: #E3EAF4;
}
複製代碼

信息框的指向能夠在僞類中進行修改ui

第二種

HTML

<div class="box"></div>
複製代碼

CSS

.box{
    width: 200px;
    height: 80px;
    position: relative;
    border: 1px solid #E3EAF4;
    background-color: #ffffff;
}
.box::after{
    content: ' ';
    height: 12px;
    width: 12px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -8px;
    left: 20px;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #E3EAF4;
    border-bottom: none;
    border-right: none;
}
複製代碼

上面兩種其實就是設備背景色和設置邊框的區別。前面的時間軸和信息框組合起來就能夠完成一個完整的信息時間軸的例子。

CSS容量球效果

這裏的波浪效果參考了chokcoco大佬的文章純 CSS 實現波浪效果！

效果

HTML

<div class="box">
    <div class="circular">
        <div class="content">
            
        </div>
        <span class="num">40%</span>
    </div>
</div>
複製代碼

CSS

.box{
    height: 500px;
    padding-top: 100px;
    padding-left: 200px;
}
.circular{
    height: 100px;
    width: 100px;
    border: 2px solid #4682B4;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.num{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    transform: translate(-50%,-50%);
}
.content{
    position: absolute;
    height: 30px;
    width: 100px;
    background: #4682B4;
    bottom: 0px;
}
.content::after, .content::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 40% 42% 40% 41%;
    transform: translate(-50%, -100%) rotate(0);
    animation: rotate 8s linear infinite;
    z-index: 10;
}
.content::after{
    border-radius: 42% 40% 41% 40%;
    background-color: rgba(255, 255, 255, .9);
    transform: translate(-50%, -100%) rotate(0);
    animation: rotate 8s linear -5s infinite;
    z-index: 20;
}

@keyframes rotate {
    50% {
        transform: translate(-50%, -103%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -100%) rotate(360deg);
    }
}
複製代碼

容量球內容量的高度就是.content的div的高度，波浪的幅度大小和波浪翻滾速度都是能夠經過設置屬性的值來實現。在實際運用的時候，咱們基本上只須要動態設置.content的height，就能實現不一樣容量的展現。

移動端抽屜式導航

移動端導航多種多樣，抽屜式導航就是常見之一，下面咱們經過javascript和css相結合來實現移動端的抽屜式導航

效果：

HTML

<div id="root">
    <div class="box">
        <div class="btn-box">
            <button id="btn" class="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
        <div id="content-box" class="content-box">
            <ul class="content-ul">
                <li class="content-li active">首頁</li>
                <li class="content-li">文章</li>
                <li class="content-li">歸檔</li>
            </ul>
        </div>
    </div>
</div>
複製代碼

CSS

抽屜式導航的核心就是經過css3的transition實現導航欄高度的變化過渡；還須要注意的是，雖然父元素高度發生變化，可是子元素若是有固定高度或者有內容的話，佈局仍是會受到影響。因此咱們就要把父元素的overflow設置爲hidden，這樣就不會出現子元素撐開父元素的狀況。

#root{
    width: 100%;
    height: 400px;
    margin-top: 100px;
    background: #cccccc;
}
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    width: 400px;
    border: 1px solid #eeeeee;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
}
.btn-box{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}
.btn{
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    border: none;
    background: #ffffff;
    outline: none;
}
.btn span{
    display: inline-block;
    height: 4px;
    width: 30px;
    background: #2b2b2b;
}
.content-box{
    height: 0;
    border-bottom: 1px solid #dddddd;
    background: #cccccc;
    overflow: hidden;  /* 讓子元素不能撐開父元素 */
    transition:height ease-out .3s;
    -webkit-transition:height ease-out .3s; /* Safari */
}
.content-li{
    padding: 5px 10px;
    margin-bottom: 20px;
    font-size: 20px;
}
.active{
    background: #ffffff;
}
複製代碼

JavaScript

let btn = document.getElementById("btn");
let nav = document.getElementById("content-box");
let contentLi = document.getElementsByClassName("content-li");

let hide = true;
let length = contentLi.length;

/** * 實現導航條抽屜式 */
btn.addEventListener('click', function () {
    if (hide){
        nav.style.height = "200px";
        hide = false;
    } else {
        nav.style.height = "0";
        hide = true;
    }
});

/** * 導航選中效果 */
for (let i = 0; i < length; i++ ){
    contentLi[i].addEventListener('click', function () {
        for (let j = 0; j < length; j++){
            contentLi[j].classList.remove('active');
        }
        contentLi[i].classList.add('active');
    })
}
複製代碼