学习web前端历程（十六）

最新推荐文章于 2024-09-01 00:22:26 发布

l123zmj

最新推荐文章于 2024-09-01 00:22:26 发布

阅读量114

点赞数 1

文章标签：过渡、隐藏过渡动画绘制图形响应式布局（媒体查询）

本文链接：https://blog.csdn.net/l123zmj/article/details/99084448

版权

过渡、过渡隐藏、动画、绘制图形、响应式布局（媒体查询）

一、过渡 Transition （主要知识点）

使用CSS属性值在一段时间平滑的过渡
例如:鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色

1、过渡的四要素：

（1）过渡的属性（transition-property）
可以过渡的属性： 颜色、取值为数值、阴影、转换、背景渐变（display不可以）

transition: transform 1s,box-shadow 1s,border-radius 1s;
（用逗号隔开）

Transition简写：

 transition: all 2s ease-in 1s;（空格隔开）

（2）过渡时间（Transition-ransition-duration:）
完成时间（m 、ms）

（3）速度变换类型（ transition-timing-function: ）

ease             先加速再减速（默认值）
ease-in          加速
ease-out         减速
ease-in-out      先加速再减速
linear           匀速

（4）延迟（transition-delay:）

过渡完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .lei{
            width: 200px;
            height: 300px;
            background-color: red;
            margin-top: 100px;
            margin-left: 100px;
            /*transition: transform 1s,box-shadow 1s,border-radius 1s;*/
            transition: all 2s ease-in 1s;
           /* transition-property: color;
            transition-duration: ;
            transition-timing-function: ease-in;
            transition-delay: ;*/
        }
        .lei:hover{
            transform: translate(10px);
            box-shadow: 0 15px 20px rgba(222,232,255,.5);
            border-radius: 50%;
            border: 5px solid red;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="lei"></div>
</body>
</html>

（作业）过渡隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡隐藏</title>
    <style>
        .box,.hidden,img{
            width: 400px;
            height: 350px;

        }
        .box{
            position: relative;
            overflow: hidden;
        }
    .hidden{
        background: rgba(0,0,0,.5);
        position: absolute;
        top: 0;
        left: 100%;
        transition: all 1s;
    }
        .box:hover .hidden{
            left: 0;
            transform: scale(1.1);
            box-shadow: 0 15px 30px rgba(0,0,0,.5);
        }
        .box>img{
            transition: all 1s;
        }
        .box:hover img{
            transform: scale(1.1);
        }

        .color{
            color: #9f9f9f;
        }
        .lei{
            text-align: center;
            color: #f4f4f4;
        }
        .color2{
            text-align:center;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/1.jpeg">
    <div class="hidden">
   <h2 class="lei">leikuan</h2><hr class="color"/>
        <p class="color2">hahahahhahha</p>
    </div>
</div>
</body>
</html>

二、动画（animation）主要知识点

1、作用：用于声明动画，指定关键帧，用于分解动画动作，每一帧代表一个时间点，定义每帧上的动作

语法：

@-webkit-keyframes name{
       from| 0%{  
              CSS样式
            }
            25%{
              CSS样式
            }
            50%{
         CSS样式
            }
            75%{
          CSS样式
            }
    to | 100%{
         CSS样式
            }
        }

注意：如有不适合的浏览器，请加上前缀

2、animation 属性
其属性用来控制动画，设置动画属性，如时间、次数等
animation的属性有简写属性：

animation ： name、duration、timing-function、delay、iteration-count、direction

属性值	描述
name	调用动画，名称与keyframes一样
duration	完成一个周期用的时间（s 、ms）
iteration-count	要轮播几次（数值、infinite无限次播放）
direction	方向 normal 、altermate（正常播放、轮流奇数：正常
偶数：向后播）
timing-function	动画速度变化的类型
delay	播放动画前延迟的时间
fill-mode：forward	动画停留在最后一帧
play-state：paused 、running	规定暂停还是运行

动画完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box{
            width: 100%;
            height:400px ;
            background-image: url("images/11.jpeg");
            background-size: 400px;
            -webkit-animation: picture 10s ease-in 1s 3 alternate forwards;
        }
        @-webkit-keyframes picture{
            0%{
                background-image: url("images/11.jpeg");
            }
            25%{
                background-image: url("images/22.jpg");
            }
            50%{
                background-image: url("images/33.jpeg");
            }
            75%{
                background-image: url("images/44.jpeg");
            }
            100%{
                background-image: url("images/55.jpeg");
            }

        }
       /* .box:hover{
            -webkit-animation: picture 10s ease-in 1s;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

三、绘制图形

绘制特殊图形（三角形、梯形、圆形）

（1）以CSS绘制三角形

是用border来填充三角形（width、height为0）
步骤：
①一个div容器
②制作三角形属性border
③border-top、border-left、border-right、border-bottom
④当为上三角形时，把下边的去掉，左右两边的颜色变透明（transparent）

（2）绘制梯形
在绘制三角形的基础上给高度（上下）、宽度（左右）

绘制图形完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制图形</title>
    <style>
        .box{
            width: 10px;
            height: 0px;
            /*上三角形*/
            /*border-top: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            /*border-bottom: 50px solid powderblue;*/
            /*下三角形*/
            /*border-top: 50px solid red;*/
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid powderblue;


            margin: 0px auto;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

四、CSS3媒体查询

响应式布局：写一次代码适用多个终端（实现PC端、ipad端、移动端）
1、响应式布局----媒体查询

大尺寸：导航在顶部，图片只有一行（PC端）
中等尺寸：导航在左边，图片成三列（ipad端）
小尺寸：导航在顶部，图片成3列（移动端）

媒体查询实例：
语法：

所有单词符号都空格
@media screen and (min-width:992px){    //PC端
        }
 @media screen and (max-width: 768px){   //移动端
        }
 @media screen and (min-width: 769px) and (max-width: 991px){  //ipad端
        }

注意：
①相同的样式放外边
②当为移动端时，需要在头部加上

<meta name="viewport" content="initial-scale=1.0" width=devise-width>

name=“viewport” : 说明此meta标签定义视口属性
content=“initial-scale=2.0” ：意思是页面放大2倍
width=devise-width ：告诉浏览器页面宽度等于设备宽度

响应式布局轮廓代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style>
       body{
           color: #cc0000;
       }
        @media screen and (min-width:992px){
            body{
                background-color: #cc0000;
            }
        }
        @media screen and (max-width: 768px){
            body{
                background-color: palevioletred;
            }
        }
        @media screen and (min-width: 769px) and (max-width: 991px){
            body{
                background-color: powderblue;
            }
        }
    </style>
</head>
<body>
leikuan
</body>
</html>

响应式布局练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style>
      .box{
          margin: 0 auto;
      }
      .box>div{
          width: 229px;
          height: 274px;
          background-color: peachpuff;
          float: left;
          margin-right:10px;
      }
        /*pc端*/
        @media screen and (min-width: 992px) {
            .box{
                width: 946px;
            }
            .box>div:last-child{
                margin-right: 0;
            }
        }

    /*ipad端*/
        @media screen  and (min-width:511px ) and (max-width:991px ){
      .box {
          width: 468px;
      }  
            .box>div:last-child,.box>div:nth-child(2){
                margin-right: 0;
            }
        .box>div{
            margin-bottom: 10px;
        }
        }

    /* 移动端*/
        @media screen and (max-width: 510px){
           .box{
               width: 307px;
           }
            .box>div{
                width: 307px;
                height: 256px;
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>