css3經常使用新特性總結

時間 2019-11-08

標籤 css3 css 經常使用特性總結欄目 CSS 简体版

原文原文鏈接

前言

在此記錄並總結下項目中經常使用 $\color{red}{css3}$ 特性javascript

文章有點長你們能夠看本身感興趣的特性~~css

1.邊框圓角（border-radius）

語法：border-radius: n1,n2,n3,n4;html

n1-n4 四個值的順序是：左上角，右上角，右下角，左下角。

示例vue

<!--border-radius  -->
    <div class="no-border-radius">no-border-radius</div>
    <div class="border-radius">border-radius</div>
    <div class="border-radius-special">border-radius-special</div>
    <div class="border-radius-circle">border-radius-circle</div>


  .no-border-radius{
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
  }
  .border-radius{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:5px;
  }
  .border-radius-special{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 80px 25px 80px;
  }
  .border-radius-circle{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 10px;
    background:#dddddd;
    text-align:center;
    width:100px;
    height:100px;
    border-radius:50%;
  }

複製代碼

效果以下： java

實用拓展：當咱們須要創造一些比較個性的圖案的時候能夠用圓角配合僞元素去實現好比聊天氣泡框頭像組合不少想要的形狀react

2.過渡（transition）

語法：transition： CSS 屬性，持續時間，效果曲線(默認 ease)，延遲時間(默認 0)css3

先來看一個不使用過分的下拉菜單web

<div class="demo-hover demo-ul ul-transition t_c">
        <ul class="fllil">
            <li>
                <a href="javascript:;">html</a>
                <ul>
                    <li><a href="#">div</a></li>
                    <li><a href="#">h1</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">js</a>
                <ul>
                    <li><a href="#">string</a></li>
                    <li><a href="#">array</a></li>
                    <li><a href="#">object</a></li>
                    <li><a href="#">number</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">css3</a>
                <ul>
                    <li><a href="#">transition</a></li>
                    <li><a href="#">animation</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">框架</a>
                <ul>
                    <li><a href="#">vue</a></li>
                    <li><a href="#">react</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>


    .demo-hover.demo-ul.t_c {
        margin-bottom: 200px;
    }

    .demo-ul li {
        display: inline-block;
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }

    .demo-ul li a {
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .demo-ul li ul {
        padding: 0;
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0px;
        transform: scaleY(0);
        overflow: hidden;
        margin: 0;
    }
    .demo-ul li:hover ul {
        transform: scaleY(1);
    }

    .demo-ul li ul li {
        float: none;
        background: #0099ff;

    }
複製代碼

效果以下：chrome

如今加上過渡效果bash

.ul-transition ul {
        transform-origin: 0 0;
        transition: all .5s;
    }

複製代碼

實用拓展：合理的運用過渡效果能夠使交互體驗好不少還能夠本身定製效果曲線 hover 效果下拉菜單等

3.動畫（animation）

語法：animation：動畫名稱，一個週期花費時間，運動曲線（默認 ease），動畫延遲（默認 0），播放次數（默認 1），是否反向播放動畫（默認 normal），是否暫停動畫（默認 running）

示例：呼吸燈效果

<div class="screen-3_circle">
        <div class="screen-3_circle_item screen-3_circle_item_i-1">HTML5</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-2">PHP</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-3">JAVA</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-4">Python</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-5">Node.js</div>
    </div>


    .screen-3_circle {
        position: absolute;
        width: 520px;
        height: 64px;
        right: 10px;
        top: 20px;
    }

    .screen-3_circle_item {
        width: 54px;
        height: 54px;
        background-color: #2b333b;
        text-align: center;
        font-size: 10px;
        line-height: 54px;
        border-radius: 50%;
        float: left;
        margin-left: 40px;
        position: relative;
    }

    .screen-3_circle_item_i-1 {
        color: #17b0ff;
    }

    .screen-3_circle_item_i-2 {
        color: #4f7df0;
    }

    .screen-3_circle_item_i-3 {
        color: #ff6060;
    }

    .screen-3_circle_item_i-4 {
        color: #25c7da;
    }

    .screen-3_circle_item_i-5 {
        color: #83bd4d;
    }

    .screen-3_circle_item:before {
        content: ' ';
        display: block;
        width: 54px;
        height: 54px;
        background-color: transparent;
        border-radius: 50%;
        position: absolute;
        left: -5px;
        top: -5px;
        animation: shine 2s infinite;
    }

    .screen-3_circle_item_i-1:before {
        border: 5px solid #1f5975;
    }

    .screen-3_circle_item_i-2:before {
        border: 5px solid #424d76;
    }

    .screen-3_circle_item_i-3:before {
        border: 5px solid #6b4146;
    }

    .screen-3_circle_item_i-4:before {
        border: 5px solid #29535f;
    }

    .screen-3_circle_item_i-5:before {
        border: 5px solid #3e4e40;
    }

    @-webkit-keyframes shine {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }
    }
複製代碼

效果以下：

實用拓展：能夠基於 animate.css 動畫庫去實現不少常見的動效好比 css3-loading 效果

4.陰影（box-shadow）

語法：box-shadow: 水平陰影的位置垂直陰影的位置模糊距離陰影的大小陰影的顏色陰影開始方向（默認是從裏往外，設置 inset 就是從外往裏）

示例：

<div class="shadown"></div>
<div class="shadown-border"></div>


.shadown {
        display: inline-block;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.71);
        width: 100px;
        height: 100px;
        background: pink;
    }

    .shadown-border {
        display: inline-block;
        box-shadow: 0 0 10px 7px rgba(103, 58, 183, 0.62);
        width: 100px;
        height: 100px;
        background: pink;
        margin-left: 50px;
        border-radius: 50%;
    }

複製代碼

效果以下：

實用拓展：可運用陰影創造不少設計感十足的效果好比陰影邊框立體感光暈效果等等

5.背景大小（background-size）

語法：background-size: length|percentage|cover|contain

<div class="background-cover">background-cover</div>
 <div class="background-contain">background-contain</div>


  .background-cover {
        width: 450px;
        height: 200px;
        margin: 30px auto;
        border: 1px dashed skyblue;
        text-align: center;
        background: url(./test.jpg) no-repeat;
        background-size: cover;
    }

    .background-contain {
        width: 450px;
        height: 200px;
        margin: 30px auto;
        border: 1px dashed skyblue;
        text-align: center;
        background: url(./test.jpg) no-repeat;
        background-size: contain;
        background-position: center;
    }
複製代碼

效果以下：

實用拓展：background-size 還能夠設置具體的寬高 px 或者百分比用來在項目裏更加合適的展現背景圖

6.文本溢出（text-overflow）

語法：text-overflow：clip|ellipsis|string

<div class="text-overflow">
        這是一段很長的話，若是超出容器就會以省略號的形式存在
</div>


.text-overflow {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
複製代碼

效果以下：

實用拓展：通常用做於單行省略

7.漸變

語法：

CSS3 線性漸變

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);

<point>：[ left | right ]? [ top | bottom ]? || <angle>?

<color-stop>：<color> [ <length> | <percentage> ]?
複製代碼

CSS3 徑向漸變

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>：circle | ellipse

<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>：<length> | <percentage>

<color-stop>：<color> [ <length> | <percentage> ]?

複製代碼

示例

<!-- 直線漸變 -->
    <div class="toRight"></div>
    <!-- 徑向漸變 -->
    <div class="radial-gradient"></div>


   /* 直線漸變*/
    .toRight {
        margin-top: 100px;
        width: 100%;
        height: 200px;
        background-image: -webkit-linear-gradient(to right,
                rgba(255, 0, 0, 0) 0%,
                rgba(255, 0, 0, 0.8) 7%,
                rgba(255, 0, 0, 1) 11%,
                rgba(255, 0, 0, 1) 12%,
                rgba(255, 252, 0, 1) 28%,
                rgba(1, 180, 7, 1) 45%,
                rgba(0, 234, 255, 1) 60%,
                rgba(0, 3, 144, 1) 75%,
                rgba(255, 0, 198, 1) 88%,
                rgba(255, 0, 198, 0.8) 93%,
                rgba(255, 0, 198, 0) 100%);
        background-image: linear-gradient(to right,
                rgba(255, 0, 0, 0) 0%,
                rgba(255, 0, 0, 0.8) 7%,
                rgba(255, 0, 0, 1) 11%,
                rgba(255, 0, 0, 1) 12%,
                rgba(255, 252, 0, 1) 28%,
                rgba(1, 180, 7, 1) 45%,
                rgba(0, 234, 255, 1) 60%,
                rgba(0, 3, 144, 1) 75%,
                rgba(255, 0, 198, 1) 88%,
                rgba(255, 0, 198, 0.8) 93%,
                rgba(255, 0, 198, 0) 100%);
    }

    /*徑向漸變 */
    .radial-gradient {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        background-image: -wekbit-radial-gradient(red 20%, green 50%, blue 80%);
        background-image: radial-gradient(red 20%, green 50%, blue 80%);
    }

複製代碼

效果以下：

實用拓展：這個在實際項目能夠用來作彩虹特效同時模擬太陽光線以及地球地殼分層等

8.濾鏡（Filter）

<img src='./test.jpg' class='pic-filter'>

.pic-filter {
        margin: 0 auto;
        display: block;
        width: 400px;
        filter: grayscale(100%)  blur(2px) opacity(50%);
    }
複製代碼

效果以下：

實用拓展：對圖片置灰背景圖高斯模糊視覺優化圖片透明度調整等等

9.字體（font-face）

語法：

<style> 
    @font-face
    {
     font-family: myFirstFont;
     src: url(sansation_light.woff);
    }
    div
    {
     font-family:myFirstFont;
    }
</style>
複製代碼

示例

<i class="iconfont">&#xe747;</i>
<i class="iconfont ">&#xe744;</i>
<i class="iconfont">&#xe738;</i>


  /*字體圖標 */
    @font-face {
        font-family: "iconfont";
        src: url('./iconfont.eot');
        src: url('./iconfont.eot') format('embedded-opentype'),
            /* IE6-IE8 */
            url('./iconfont.woff') format('woff'),
            /* chrome, firefox */
            url('./iconfont.ttf') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('./iconfont.svg') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 40px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #9c9c9c;
        margin: 0 5px;
    }

複製代碼

效果以下：

實用拓展：爲項目配置特殊字體引用iconfont字體圖標

10.媒體查詢

語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
} 

複製代碼

示例：背景色根據屏幕尺寸變化

@media screen and (max-width: 780px) {
        body {
            background-color: lightblue;
        }
    }

    @media screen and (min-width: 780px) and (max-width:1200px) {
        body {
            background-color: pink;
        }
    }

複製代碼

效果以下：