前端html+css笔记（下）

斜切的导航

图示
    <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;}
        /* 左侧和右侧都做成直角 */
        /* 把容器变大一点,斜角就被挤出去了 */
        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>关于我们</span></li>
            <li><span>联系方式</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：设置动画的名字（自定义的）
  2. animation-duration：动画的持续时间
  3. animation-delay：动画的延迟时间
  4. animation-iteration-count：动画的重复次数，默认值就是1，infinite无限次数
  5. animation-timing-function：动画的运动形式

注：

  1. 运动结束后，默认情况下会停留在起始位置.
  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>

划入划出的小图标

    <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：规定动画之前或之后，其动画效果是否可见。

  1. none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
  2. backwards：在延迟的情况下，让0%在延迟前生效
  3. forwards：在运动结束之后，停到结束位置
  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：属性定义是否应该轮流反向播放动画。

  1. alternate：一次正向（0%100%），一次反向（100%0%）
  2. reverse永远都是反向，从100%~0%
  3. normal（默认值）：永远都是正向，从0%~100%

_animate.css动画库

一款强大的预设CSS3动画库

基本使用：

animated:基类（基础的样式，每个动画效果都需要加）
infinite：动画的无限次数

transform3D相关属性

transform:

  1. rotateX():正值向上翻转
  2. rotateY():正值向右翻转
  3. translateZ():正值向前、负值向后
  4. scaleZ():立体元素的厚度

3d写法：

  1. scale3d：三个值 x y z
  2. translate3d：三个值 x y z
  3. rotate3d：四个值 0|1（x轴是否添加旋转角度） 0|1

perspective(景深)：离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin：景深-基点位置，观察元素的角度。(center center -50px),Z轴只能写数值，不能写单词
transform-origin：x y z
transform-style：3D空间（默认值2d：flat；3d：preserve-3d）
backface-visibility：背面隐藏（hidden；visiable（默认值））

实现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>

立方体扩展

    <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效果之旋转木马

    <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效果之翻转图片

    <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（默认）
    2. border-box
    3. content-box
  3. background-clip：背景图的裁切方式
    1. padding-box
    2. border-box（默认）
    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度是在页面的最下边，正值会按照顺时针旋转，负值按照逆时针旋转。

  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>

渐变的加载进度条

    <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>

字体图标

阿里巴巴矢量图标库

font-face是CSS3中的一个模块，主要是把自己定义的web字体嵌入到网页中。

好处：

  1. 可以非常方便地改变大小和颜色（font-size ；color）
  2. 放大后不会失真
  3. 减少请求次数和提高加载速度
  4. 简化网页布局
  5. 减少设计师和前端工程师的工作量
  6. 可使用计算机没有提供的字体

使用：

@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>


<!-- 伪类的方式，不用重复造轮子 -->
    <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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容