前端html+css筆記（下）

斜切的導(dǎo)航

圖示
    <style>
        * {margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 430px;margin: 30px auto;overflow: hidden;}
        /* li容器傾斜30deg */
        ul li{float: left;width: 100px;height: 30px;background: red;color: white;line-height: 30px;text-align: center;margin: 0 5px;transform: skewX(-30deg);}

        /* ul li.active{background: blue;} */
        /* 包括文字的span再傾斜回來 */
        ul li span{transform: skewX(30deg);display: block;}
        /* 左側(cè)和右側(cè)都做成直角 */
        /* 把容器變大一點(diǎn),斜角就被擠出去了 */
        ul li:first-child{padding-left: 10px;margin-left: -10px;}
        ul li:last-child{padding-right: 10px;margin-right: -10px;}
    </style>

<body>
    <div>
        <ul>
            <li><span>首頁</span></li>
            <li><span>關(guān)于我們</span></li>
            <li><span>聯(lián)系方式</span></li>
            <li><span>招聘信息</span></li>
        </ul>
    </div>
</body>

變形的列表


    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        .list{width: 250px;}
        .list li{height: 97px;border-bottom: 1px #d0d6d9 dashed;overflow: hidden;}
        .list li:last-child{border-bottom: none;}
        .list .list_photo{float: left;width: 112px;height: 77px;margin: 10px 9px 0 5px;position: relative;}
        .list .list_photo .list_photo_box{width: 92px;height: 57px;border: 1px white solid;position: absolute;left: 9px;top: 9px;transform: translate(0,-60px) rotate(-90deg);transition: 1s;transform-origin: 0 0;}
        .list .list_photo .list_photo_text{width: 100%; position: relative;color: white;text-align: center;bottom: 15px;font-size: 14px;transform: translate(0,100px);transition: 1s;}

        .list .list_photo .img{width: 100%;}
        .list .list_text{float: left;width: 114px;font-size: 12px;line-height: 21px;margin-top :10px ;}

        .list li:hover .list_photo_box{transform: translate(0,0) rotate(0);}
        .list li:hover .list_photo_text{transform: translate(0,0) rotate(0);}
    </style>

<body>
    <ul class="list">
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
    </ul>
</body>

animation動畫(上)

  1. animation-name：設(shè)置動畫的名字（自定義的）
  2. animation-duration：動畫的持續(xù)時間
  3. animation-delay：動畫的延遲時間
  4. animation-iteration-count：動畫的重復(fù)次數(shù)，默認(rèn)值就是1，infinite無限次數(shù)
  5. animation-timing-function：動畫的運(yùn)動形式

注：

  1. 運(yùn)動結(jié)束后，默認(rèn)情況下會停留在起始位置.
  2. @keyframes：from——0，to——100%
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        /* .box2{width: 100px;height: 100px;background: red;animation-name: myBox;animation-duration: 4s;animation-delay: 2s;animation-iteration-count: 3;animation-timing-function: linear;} */
        
        .box2{width: 100px;height: 100px;background: red;animation: myBox 4s 2s infinite linear;}

        /* @keyframes myBox{
            from{transform: translate(0,0);}
            to{transform:translate(200px,0);}
        } */
        @keyframes myBox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform:translate(0,0);}
        }
    </style>

<body>
    <div class="box1">  
        <div class="box2">

        </div>
    </div>
</body>

劃入劃出的小圖標(biāo)

    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 150px;margin: 30px auto;}
        ul li{float: left;width: 50px;height: 50px;}
        ul li img{position: absolute;left: 50%;top: 50%;margin: -10px 0 0 --11px;}
        ul li:hover img{animation: move .5s ;}

        @keyframes move{
            0%{transform: translate(0,0);opacity:1 ;}
            60%{transform: translate(0,-50px);opacity: 0;}
            61%{transform: translate(0,30px);}
            100%{transform:translate(0,0) ;opacity: 1;}
        }
    </style>
<body>
    <ul>
        <li>
            <img src="./img/1.png" alt="">
        </li>
        <li>
            <img src="./img/2.png" alt="">
        </li>
        <li>
            <img src="./img/3.png" alt="">
        </li>
    </ul>
</body>

loading加載動畫效果

    <style>
        .loading{width: 40px;height: 40px;margin: 30px auto;position: relative;}
        .loading .box1,.loading .box2{width: 100%;height: 100%; position:absolute;}
        .loading .box2{transform: rotate(45deg);}
        .loading .box1 div,.loading .box2 div{width: 10px;height: 10px;background: blue;border-radius: 50%; position:absolute;animation: loadingMove 1.5s infinite linear;}
        .loading .box1 div:nth-child(1),.loading .box2 div:nth-child(1){left:0;top: 0;}
        .loading .box1 div:nth-child(2),.loading .box2 div:nth-child(2){right:0;top: 0;}
        .loading .box1 div:nth-child(3),.loading .box2 div:nth-child(3){right:0;bottom: 0;}
        .loading .box1 div:nth-child(4),.loading .box2 div:nth-child(4){left:0;bottom: 0;}

        @keyframes loadingMove{
            0%{transform: scale(1);}
            50%{transform: scale(0);}
            100%{transform: scale(1);}
        }

        .loading .box1 div:nth-child(1){animation-delay: -0;}
        .loading .box2 div:nth-child(1){animation-delay: -0.2s;}
        .loading .box1 div:nth-child(2){animation-delay: -0.4s;}
        .loading .box2 div:nth-child(2){animation-delay: -0.6s;}
        .loading .box1 div:nth-child(3){animation-delay: -0.8s;}
        .loading .box2 div:nth-child(3){animation-delay: -1s;}
        .loading .box1 div:nth-child(4){animation-delay: -1.2s;}
        .loading .box2 div:nth-child(4){animation-delay: -1.4s;}

    </style>

<body>
    <div class="loading">
        <div class="box1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

animation動畫(下)

animation-fill-mode：規(guī)定動畫之前或之后，其動畫效果是否可見。

  1. none（默認(rèn)值）：在運(yùn)動結(jié)束之后回到初始位置，在延遲的情況下，讓0%在延遲后生效
  2. backwards：在延遲的情況下，讓0%在延遲前生效
  3. forwards：在運(yùn)動結(jié)束之后，停到結(jié)束位置
  4. both：backwards和forwards同時生效
    <style>
        .box1,.box2,.box3,.box4{width: 100px;height: 100px;background: red;margin: 5px;}
        .box1{animation: 2s move 2s;}
        .box2{animation: 2s move 2s;animation-fill-mode: backwards;}
        .box3{animation: 2s move 2s;animation-fill-mode: forwards;}
        .box4{animation: 2s move 2s;animation-fill-mode: both;}

        @keyframes move{
            0%{transform: translate(0,0);background: blue;}
            100%{transform: translate(300px,0);}
        }
    </style>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</body>

animatiom-direction：屬性定義是否應(yīng)該輪流反向播放動畫。

  1. alternate：一次正向（0%100%），一次反向（100%0%）
  2. reverse永遠(yuǎn)都是反向，從100%~0%
  3. normal（默認(rèn)值）：永遠(yuǎn)都是正向，從0%~100%

_animate.css動畫庫

一款強(qiáng)大的預(yù)設(shè)CSS3動畫庫

基本使用：

animated:基類（基礎(chǔ)的樣式，每個動畫效果都需要加）
infinite：動畫的無限次數(shù)

transform3D相關(guān)屬性

transform:

  1. rotateX():正值向上翻轉(zhuǎn)
  2. rotateY():正值向右翻轉(zhuǎn)
  3. translateZ():正值向前、負(fù)值向后
  4. scaleZ():立體元素的厚度

3d寫法：

  1. scale3d：三個值 x y z
  2. translate3d：三個值 x y z
  3. rotate3d：四個值 0|1（x軸是否添加旋轉(zhuǎn)角度） 0|1

perspective(景深)：離屏幕多遠(yuǎn)的距離去觀察元素，值越大幅度越小。
perspective-origin：景深-基點(diǎn)位置，觀察元素的角度。(center center -50px),Z軸只能寫數(shù)值，不能寫單詞
transform-origin：x y z
transform-style：3D空間（默認(rèn)值2d：flat；3d：preserve-3d）
backface-visibility：背面隱藏（hidden；visiable（默認(rèn)值））

實(shí)現(xiàn)3d立方體

    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        .box{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;perspective: 200px;}
        .box ul{width: 100px;height: 100px;margin: 100px;position: relative;transform-style: preserve-3d;transition: 2s;transform-origin: center center -50px;}
        .box ul li {width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;color: white;font-size: 26px;}

        .box ul li:nth-child(1){background: red;left: 0;top: 0;}
        .box ul li:nth-child(2){background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}
        .box ul li:nth-child(3){background: yellow;left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg);}
        .box ul li:nth-child(4){background: green;left:0;top: -100px;transform-origin: bottom;transform: rotateX(90deg);}
        .box ul li:nth-child(5){background: pink;left: 0;top: 100px;transform-origin: top;transform: rotateX(-90deg);}
        .box ul li:nth-child(6){background: grey;left: 0;top: 0px;transform :translateZ(-100px)rotateY(180deg);}


        .box:hover ul{transform: rotateY(180deg);}
    </style>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>

立方體擴(kuò)展

    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        .box{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;perspective: 200px;perspective-origin: top right;}
        .box ul{width: 100px;height: 100px;margin: 100px;position: relative;transform-style: preserve-3d;transition: 2s;transform-origin: center center -50px;
        /* transform: scaleZ(2); */
        /* transform: scale3d(1,1,1); */
        /* transform: translate3d(100px,100px,100px); */
        transform: rotate3d(1,1,1,30deg);
        }
        .box ul li {width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;color: white;font-size: 26px;opacity: 0.5;backface-visibility: hidden;}

        .box ul li:nth-child(1){background: red;left: 0;top: 0;}
        .box ul li:nth-child(2){background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}
        .box ul li:nth-child(3){background: yellow;left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg);}
        .box ul li:nth-child(4){background: green;left:0;top: -100px;transform-origin: bottom;transform: rotateX(90deg);}
        .box ul li:nth-child(5){background: pink;left: 0;top: 100px;transform-origin: top;transform: rotateX(-90deg);}
        .box ul li:nth-child(6){background: grey;left: 0;top: 0px;transform :translateZ(-100px)rotateY(180deg);}

        .box:hover ul{transform: rotateY(360deg);}
    </style>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>

3D效果之旋轉(zhuǎn)木馬

    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        .parent{width: 600px;height: 600px;border: 1px black solid;margin: 30px auto;}
        .parent ul{width: 500px; height: 500px; margin: 30px auto;position: relative;transform-style: preserve-3d;transition: 2s;}
        .parent ul li{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        .parent ul li:nth-child(1){transform: rotateY(0) translateZ(200px);}
        .parent ul li:nth-child(2){transform: rotateY(60deg) translateZ(200px);}
        .parent ul li:nth-child(3){transform: rotateY(120deg) translateZ(200px);}
        .parent ul li:nth-child(4){transform: rotateY(180deg) translateZ(200px);}
        .parent ul li:nth-child(5){transform: rotateY(240deg) translateZ(200px);}
        .parent ul li:nth-child(6){transform: rotateY(300deg) translateZ(200px);}

        .parent:hover ul{transform: rotateY(360deg);}

    </style>

<body>
    <div class="parent">
        <ul>
            <li>
                <img src="./img/1.png" alt="">
            </li>
            <li>
                <img src="./img/2.png" alt="">
            </li>
            <li>
                <img src="./img/3.jpg" alt="">
            </li>
            <li>
                <img src="./img/4.png" alt="">
            </li>
            <li>
                <img src="./img/5.png" alt="">
            </li>
            <li>
                <img src="img/6.png" alt="">
            </li>
        </ul>
    </div>
</body>

_3D效果之翻轉(zhuǎn)圖片

    <style>
        html{overflow: hidden;}
        *{margin: 0;padding: 0;}
        img{display: block;}
        .parent{width: 640px;height: 320px;margin: 30px auto;position: relative;perspective: 600px;}
        .parent div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;backface-visibility: hidden;transition: 0.5s;}

        .parent div:first-child{transform: rotateY(0);}
        .parent div:last-child{transform: rotateY(-180deg);}

        .parent:hover div:first-child{transform: rotateY(180deg);}
        .parent:hover div:last-child{transform: rotateY(0);}
    </style>
<body>
    <div class="parent">
        <div>
            <img src="../img/娜扎1.jpg" alt="">
        </div>
        <div>
            <img src="../img/娜扎2.jpg" alt="">
        </div>
    </div>
</body>

背景尺寸位置裁切等

  1. background-size:背景圖的尺寸大小
    1. cover：覆蓋
    2. cotain：包含
  2. background-origin：背景圖的填充位置
    1. padding-box（默認(rèn)）
    2. border-box
    3. content-box
  3. background-clip：背景圖的裁切方式
    1. padding-box
    2. border-box（默認(rèn)）
    3. content-box
    <style>
        .box{width: 600px;height: 600px;border: 1px black solid;background: url(../img/娜扎2.jpg) no-repeat;
        /* background-size: 50px 200px; */
        /* background-size: cover; */
        background-size: contain;
        }

        .box2{width: 1000px;height: 1000px;border: 40px solid rgba(0, 0, 0, .5);padding: 30px; background: url(../img/娜扎1.jpg) ;background-origin: content-box;background-clip: border-box;}
    </style>
<body>
   <div class="box"></div>
   <div class="box2"></div>
</body>

線性漸變與徑向漸變

  1. 線性漸變->linear-gradient是值，需要添加到background-image屬性上。

    注：漸變的0度是在頁面的最下邊，正值會按照順時針旋轉(zhuǎn)，負(fù)值按照逆時針旋轉(zhuǎn)。

  2. 徑向漸變->radial-gradient

    <style>
        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient(red,blue,yellow,green);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( to right ,red,blue);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red,blue);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red 25%,blue 75%);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red 50%,blue 50%);} */

        .box{width: 300px;height: 300px;border: 1px black solid;background-image:radial-gradient(red 25%,blue 50%,yellow 75%)}
    </style>

<body>
    <div class="box"></div>
</body>

漸變的加載進(jìn)度條

    <style>
        .progress{width: 300px;height: 30px;border: 1px black solid;margin: 100px ;background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50% ,#999 50%,#999 75%,#080 75%);background-size: 30px;animation: move infinite 2s linear;}
        @keyframes move {
            0%{background-position:0 0 ;}
            100%{background-position: 300px 0;}
            
        }
    </style>
<body>
    <div class="progress"></div>
</body>

字體圖標(biāo)

阿里巴巴矢量圖標(biāo)庫

font-face是CSS3中的一個模塊，主要是把自己定義的web字體嵌入到網(wǎng)頁中。

好處：

  1. 可以非常方便地改變大小和顏色（font-size ；color）
  2. 放大后不會失真
  3. 減少請求次數(shù)和提高加載速度
  4. 簡化網(wǎng)頁布局
  5. 減少設(shè)計(jì)師和前端工程師的工作量
  6. 可使用計(jì)算機(jī)沒有提供的字體

使用：

@font-face語法

像.woff等文件都是做兼容平臺處理的，mac，unix

    <style>
        @font-face{font-family:footer-iconfont;
        src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot);src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot?#iefix) format('embedded-opentype'),url(https://at.alicdn.com/t/font_1433225452_0164654.woff) format('woff'),url(https://at.alicdn.com/t/font_1433225452_0164654.ttf) format('truetype'),url(https://at.alicdn.com/t/font_1433225452_0164654.svg#iconfont) format('svg')}

        div{
            font-family:footer-iconfont ;
        }

    </style>
<body>
    <div></div>
</body>


<!-- 偽類的方式，不用重復(fù)造輪子 -->
    <style>
        @font-face{font-family:footer-iconfont;
        src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot);src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot?#iefix) format('embedded-opentype'),url(https://at.alicdn.com/t/font_1433225452_0164654.woff) format('woff'),url(https://at.alicdn.com/t/font_1433225452_0164654.ttf) format('truetype'),url(https://at.alicdn.com/t/font_1433225452_0164654.svg#iconfont) format('svg')}

        div{
            font-family:footer-iconfont ;
         } 

        .taobaowang:after{content: "";}
    </style>

<body>
    <div class="taobaowang"></div>
</body>

_iconfont

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、CSS筆記： 點(diǎn)擊鏈接后退頁面： 回到上一個網(wǎng)頁 ——修改placeholder提示的樣式： 1.除IE外通用...
    倚劍闖天涯_閱讀 828評論 1贊 2
  • HTML是一種超文本標(biāo)記語言 一、選擇器 類選擇器：.class id選擇器：#id 通配選擇器：*（選擇所有元素...
    行走在路上的大熊閱讀 467評論 0贊 1
  • 1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素? 行內(nèi)元素：和有他元素都在一行上，高度、行高及外...
    極樂君閱讀 2,453評論 0贊 20
  • 一. 選擇器 1.屬性選擇器 2.偽類選擇器 3.偽元素選擇器 二. 邊框 1.邊框圓角 border-radiu...
    codingZero閱讀 341評論 0贊 2
  • iframe 框架有那些優(yōu)缺點(diǎn)？ 優(yōu)點(diǎn)iframe 能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來。如果有多個網(wǎng)頁引用 ifr...
    蛋蛋大少爺閱讀 737評論 0贊 1