2019/9/03，day08，web前端

菜鸟小笔记5

2019年9月3日周二 22:25 重庆
以下内容来自老师授课时所跟打代码或自己作业时百度搜索后进行大概结合，
菜鸟目前无法自己完全敲出代码，如有冒犯，接受私信~

题外话

最近陆续的作业，前两天时间就为做一个框，因为一直做不出来要求的效果

近日内容

day08:animate和font-awesome

day07:CSS变换属性、定位、过渡效果

应该做成的样子：

/*基础样式*/
        *{margin: 0;padding: 0;box-sizing: border-box}
        ul,ol{list-style: none}
        .clear :after{
            content: "";
            display: block;
            clear: both;
        }
        .listImg{
            width: 320px;
            height: 302px;
            margin: 0 auto;
            border: 1px solid red;
        }
        /*图片效果*/
        .listImg>li{
            position: relative;
        }
        img{
            width: 100%;
            height: 100%;
        }
        div{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
        }
        div>span{
            display: block;
            background: #ffffff;
            position: absolute;
            transition: all ease 0.7s;
        }
        div>span:nth-child(1){
            top:0;
        }
        div>span:nth-child(3){
            bottom:0;
        }
        /*top和bottom效果*/
        div>span:nth-child(1),div>span:nth-child(3){
            width: 100%;
            height: 4px;
            transform: scaleX(0);
        }
        div:hover>span:nth-child(1),div:hover>span:nth-child(3){
            transform: scaleX(1);
        }


        div>span:nth-child(2){
            right:0;/*右边为0表示贴着右边*/
        }
        div>span:nth-child(4){
            left:0; /*左边为0表示贴着左边*/
        }
/*left和right效果*/
        div>span:nth-child(2),div>span:nth-child(4){
            width: 4px;
            height: 100%;
            transform: scaleY(0);
        }
        div:hover>span:nth-child(2),div:hover>span:nth-child(4){
            transform: scaleY(1);
        }


        div>h3{
            font-weight: normal;
            color: white;
            text-align: center;
            margin-top: 68px;/*算的*/
            transform: translateY(100px);
            opacity: 0;
            transition: all ease .7s;
        }
        div:hover>h3{
            transform: translateY(0);
            opacity: 1;
        }
        div>a{
            display: block;/*独占一行*/
            width: 80px;
            text-align: center;
            margin: 0 auto;
            text-decoration: none;
            color: white;
            padding: 10px 0;
            transform: translateY(100px);
            opacity: 0;
            transition: all ease .7s ;/*把下面的 transition: all ease .7s .3s;移到这里*/
        }
        div:hover>a{
            transform: translateY(0);
            opacity: 1;
            transition: all ease .7s .3s;
        }
        ···
        <ul class="listImg clear">
    <li>
        <img src="2.jpg" alt="">
        <div>
            <span></span><!--            上横线-->
            <span></span><!--            右横线-->
            <span></span><!--            下横线-->
            <span></span><!--            左横线-->
            <h3>WBC冠军团队</h3>
            <a href="#">了解更多</a>
        </div>
    </li>
</ul>

过渡作业

/*样式设置*/
        .box{
            width: 300px;
            height: 250px;
            margin: 100px auto;
            border: 3px solid #fff;
            background: url("img07.jpg") no-repeat -300px -200px;
        }
        .box01{
            width: 150px;
            height: 125px;
            position: relative;
            margin: 50px auto;
        }
        .leftLine{
            left:0;
            height: 0;
            position: absolute;
            border-left: 3px solid #333333;
        }
        .topLine{
            top:0;
            width: 0;
            position: absolute;
            border-top: 3px solid #333333;
        }
        .rightLine{
            right:0;
            height: 0;
            position: absolute;
            border-right: 3px solid #333333;
        }
        .bottomLine{
            bottom:0;
            width: 0;
            position: absolute;
            border-bottom: 3px solid #333333;
        }
        #word01{
            border:3px solid #333333 ;
            color: orangered;
            width: 0;
            height: 0;
            font-size: 25px;
            /*上 右 下 左   上左右 下  上下 左右*/
            position: absolute;
            margin:250px 20px ;
            display: none;
        }
        #word02{
            width: 0;
            height: 0;
            position: absolute;
            margin:300px 20px ;
            font-size: 10px;
            border:3px solid #333333 ;

        }

        /*鼠标移入时*/
        .box:hover .leftLine{
            transform: scaleY(1);
            height: 125px;
        }
        .box:hover .rightLine{
            transform: scaleY(1);
            height: 125px;
        }
        .box:hover .topLine{
            width: 150px;
            transform: scaleX(1);
        }
        .box:hover .bottomLine{
            width: 150px;
            transform: scaleX(1);
        }
        .box:hover #word01{
            margin:20px 20px ;
            transition: all 0.5s ;
            transform: scaleX(1);
            width: 100px;
            height: 40px;

        }
        .box:hover #word02{
            position: absolute;
            border:3px solid #333333 ;
            margin-top: 60px;
            margin-left: 30px;
            transition: all 0.5s ;
            transform: scaleX(1);
            width: 90px;
            height: 30px;

        }

        /*过渡效果*/
        .animate{
            transition: all 0.5s ;
        }
        ···
        <div class="box">
        <div class="box01">
            <span class="leftLine animate"></span>
            <span class="topLine animate"></span>
            <span class="rightLine animate"></span>
            <span class="bottomLine animate"></span>
            <p id="word01">我尽力了</p>
            <p id="word02">你是个成熟的动画！</p>
        </div>
    </div>

应该做成的样子：（注意红色部分过渡后的缩放效果，老师只是做样子，没注意搭配）

*{margin: 0;padding: 0;box-sizing: border-box}
        .imgBox{
            width: 320px;
            height: 302px;
            position: relative;
            margin: 30px auto;
            overflow: hidden;/*则只有在imgBox里时，下面内容才会上移，可删除试试*/
        }
        .imgBox>img{
            display: block;/*等下会让它填充满*/
            width: 100%;
            height: 100%;
            transform: scale(1) translateY(0);/*scale(1)为原本大小，translateY(0)为原本位置*/
            transition: all ease .7s ;
        }
        .imgBox:hover>img{
            transform: scale(0.4) translateY(-226px);/*scale(0.4)为原本大小，translateY(-226)为原本位置*/
        }
        .imgBox>div{
            /*opacity: 0;*/
            transform: translateY(0);
            transition: all ease .7s ;
        }
        .imgBox:hover>div{
            opacity: 1;
            transform: translateY(-180px);
        }
        .imgBox>div>h1{
            font-weight: normal;
            text-align: center;
            margin: 10px 0 5px;
            font-size: 24px;
        }
        .imgBox>div>p{
            text-align: center;
            line-height: 18px;
            font-size: 14px;
        }
        .imgBox>div>a{
            display: block;
            width: 100px;
            height: 30px;
            border: 1px solid blue;
            /*以下两个为文字居中*/
            text-align: center;
            line-height: 30px;/*行高为上方height的高度即垂直高度*/

            font-size: 13px;
            position: relative;
            text-decoration: none;
            color: #0000ff;
            margin: 10px auto 0;
            overflow: hidden;/*溢出a标签则隐藏*/
        }
        .imgBox>div>a>span{
            display: block;
            width: 50px;
            height: 30px;
            background: red;
            position: absolute;
            top: 0;
            transition: all ease .7s ;/*在原来的元素位置上加transition*/
        }
        .imgBox>div>a>span:nth-child(1){left:-50px}
        .imgBox>div>a:hover>span:nth-child(1){left:0}
        .imgBox>div>a>span:nth-child(2){right: -50px}
        .imgBox>div>a:hover>span:nth-child(2){right: 0}
        .imgBox>div>a>span:nth-child(3){
            width: 100px;
            background: transparent;
        }
        .imgBox>div>a:hover>span:nth-child(3){
            color: white;
        }
        .imgBox>div>a>span{}
        .imgBox>div>a>span{}
        .imgBox>div>a>span{}
        ···
        <div class="imgBox">
    <img src="3.jpg" alt="">
    <div>
        <h1>咖啡现磨</h1>
        <p>luckin coffee（瑞幸咖啡），全球领先的咖啡新鲜式：优选上等阿拉比卡豆，由WBC（世界咖啡师大赛）
            冠军团队精心拼配，新鲜烘焙，新鲜现磨....</p>
        <a href="#">
            <span></span>
            <span></span>
            <span>了解更多</span>
        </a>
    </div>
</div>

过渡作业2：（只做更多详情那个效果）

不是很正确示范：过渡后效果是往左边缩的，应该是从中间往两边才对

        /*基础样式*/
        *{margin: 0;padding: 0;box-sizing: border-box}
        ul,ol{list-style: none}
        .clear :after{
            content: "";
            display: block;
            clear: both;
        }
        .listImg{   /*三个图片总的*/
            width: 1060px;
            margin: 0 auto;
        }
        .listImg>li{
            width: 320px;
            height: 302px;
            background: #ffffff;
            float: left;  /*将三个图片并排*/
        }
        .listImg>li:nth-child(2){margin: 0 50px}  
        /*第三张图片效果有个BUG：过渡后效果无法按原位返回！！！*/
        .listImg>li:nth-child(3):hover>img{
            transform: scale(0.4) translateY(-226px);   /*缩放scale和移动translate*/
        }
        .luckin{
            transform: translateY(0);
            transition: all ease 0.7s;
            text-align: center;
        }
        .luckin>p{     /*luckin coffee。。。字体样式*/
            font-size: 14px;
        }
        .listImg>li:nth-child(3):hover>.luckin{
            transform: translateY(-180px);
            height: 100px;
        }
        /*文字div*/
        .more{
            position: absolute;
            display: inline-block;/*为和下面的.cover01能重叠在一起*/
            top: -10px;
            left: 26px;
            padding-top: 17px;
        }
        .more>a{text-decoration: none;}/*只能单独设置*/

        .cover01{/*包裹left、right和更多详情的大box*/
            width: 121px;
            height: 40px;
            position: relative;/*因为上方.more根据这个定位*/
            border: 1px solid blue;
            top: 10px;
            left: 100px;
        }
        .cover01>span{/*设置left和right两个单线*/
            display: block;
            background: blue;
            position: absolute;
            transition: all ease 1s;
            height: 40px;/*高度为.cover01的高度*/
            width: 0;/*长度为0 才看不见*/
        }
        .cover01:hover>.left{
            left: 0;/*紧挨左边*/
            width: 120px;/*宽度缩放到120px*/
            height: 40px;/*高度缩放到40px*/
            transform: scaleY(1);/*缩放倍数*/
        }
        .cover01:hover>.right{
            right: 0;
            width: 120px;
            height: 40px;
            transform: scaleY(1);
        }
        .cover01:hover>.more>a{/*设置hover后的“更多详情”样式*/
            color: #ffffff;
            text-decoration: none;
        }
        ···
        <ul class="listImg clear">
    <li>
        <img src="1.jpg" alt="">
        <div>
            <p>beautiful</p>
        </div>
    </li>

    <li>
        <img src="2.jpg" alt="">
        <div>
            <span></span><!--            上横线-->
            <span></span><!--            右横线-->
            <span></span><!--            下横线-->
            <span></span><!--            左横线-->
            <h3>WBC冠军团队</h3>
            <a href="#">了解更多</a>
        </div>
    </li>
    <li>
        <img src="3.JPG" alt="">
        <div class="luckin">
            <h1>咖啡现磨</h1>
            <p>luckin coffee（瑞幸咖啡），全球领先的咖啡新鲜式：优选上等阿拉比卡豆，由WBC（世界咖啡师大赛）
                冠军团队精心拼配，新鲜烘焙，新鲜现磨....</p>
<!--            按钮 高：60 宽：140 边框一像素实线-->
            <div class="cover01">
                <span class="left"></span><!--左-->
                <span class="right"></span><!--右-->
                <div class="more"><a href="#">更多详情</a></div>
            </div>
        </div>
    </li>
</ul>

有多出来的代码，因为老师带着我们敲了前两个和第三个的大部分，我只是在原有基础上进行作业，所以无法割舍掉。

近日收获

1、font-awesome中文网：图标库，用于搜索各种图标对应的代码，其中<span>并无实际用处
2、webstorm分屏：在页面的标题栏右键，有个“split vertically”
3、子代选择器只能一层层地找选择器 ，暂例：#yourSelf>li是错误的，正确：#yourSelf>>ul>li

4、文档流：一行一行的显示，一行一行往下面走
5、脱离文档流：如div脱离了原来的位置，后面的div1、div2会依次往上补，div则可在页面的任意位置
6、绝对定位：重叠覆盖，如对div绝对定位，则div会覆盖div1
7、相对定位：如 div位置进行微调，但div原有位置不动（好像div有两个脚，其中一只随便动，另一只脚在原有位置上待着）
即后面div1、div2不会往上补
作为绝对定位的移动区间范围：即相对定位决定了一个圈，则绝对定位不可跑出这个圈
8、倾斜更像扭曲（负值往上走，正值往下走）
9、 transform: rotateZ(30deg); = 用笔尖对向电脑，则div围绕笔尖那个点旋转

补充