web开发：动画及阴影

本文目录：

一、小米拼接

将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米拼接1</title>
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/topbar.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    
</head>
<body>
    <!-- topbar -->
    <div class="topbar">
        <div class="topbar-container">
            <div class="topbar-nav">
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a class="topbar-download" href="">
                    下载app
                    <div class="topbar-app"></div>
                </a>
                <span>|</span>
                <a href="">Select Region</a>

            </div>
            <div class="topbar-car"></div>
            <div class="topbar-info">
                <a href="">登录</a>
                <span>|</span>
                <a href="">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </div>

    <!-- header -->
    <div class="header">
        <div class="header-container">
            <h1 class="header-logo">
                <a href="" title="小米官网">mi</a>
            </h1>
            <ul class="header-nav">
                <li class="header-li">
                    <a href="">小米手机</a>
                </li>
                <li class="header-li">
                    <a href="">红米</a>
                </li>
                <li class="header-li">
                    <a href="">电视</a>
                </li>
                <!-- 待完成 -->
                <div class="header-nav-pic">
                    <ul>
                        <li><a href="">
                            <p>新品</p>
                            <div></div>
                            <p>小米mix3</p>
                            <p>3299元起</p>
                        </a></li>
                        <li><a href="">
                            <p>新品</p>
                            <div></div>
                            <p>小米mix3</p>
                            <p>3299元起</p>
                        </a></li>
                    </ul>
                </div>
            </ul>
            <form class="header-search">
                <input class="header-ctx" type="text">
                <button class="header-btn fa fa-search" type="button"></button>
                <div class="header-search-txt">
                    <span>小米8</span>
                    <span>小米mix 2s</span>
                </div>
                <!-- 待完成 -->
                <ul class="header-search-ads">
                    <li></li>
                </ul>
            </form>
        </div>
    </div>

    <!-- home -->
    <div class="home">
        <div class="home-container">
            <ul class="home-nav">
                <li class="home-nav-title"><a href="">
                    <span>手机 电话卡<i class="fa fa-chevron-right"></i></span>
                </a></li>
                <li class="home-nav-title"><a href="">
                    <span>电视 盒子<i class="fa fa-chevron-right"></i></span>
                </a></li>
                <!-- 展开的详情 -->
                <ul class="home-nav-detail">
                    <!-- 4列 -->
                    <li>
                        <ul>
                            <!-- 每列6个小行 -->
                            <li><a href="">
                                小米MIX 3
                            </a></li>
                            <li><a href="">
                                小米MIX 3
                            </a></li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <!-- 每列6个小行 -->
                            <li><a href="">
                                小米MIX 3
                            </a></li>
                            <li><a href="">
                                小米MIX 3
                            </a></li>
                        </ul>
                    </li>
                </ul>
            </ul>
            <!-- 待做:轮播图 -->
            <div class="home-slider"></div>
        </div>
    </div>
</body>
</html>

二、过渡动画

```
transition属性

transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())

过渡属性具体设置给初始状态还是第二状态根据具体需求
```

```css
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
```

```css
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /*通过过渡完成动画*/
            /*transition: 1s;*/
            
            /*过渡的持续时间*/
            transition-duration: 2s;
            /*延迟时间*/
            transition-delay: 50ms;
            /*过渡属性*/
            /*单一属性 | 属性1, ..., 属性n | all*/
            transition-property: all;
            /*过渡曲线*/
            /*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
            transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
        }
        .box:hover {
            width: 800px;
            height: 400px;
            background-color: orange;
        }
    </style>
    <style type="text/css">
        .sup {
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 0 auto;
        }
        .sub {
            width: 50px;
            height: 50px;
            background-color: orange;
            /*整体设置: 注意点 第一个时间为过渡时间, 第二个为延迟时间,可以省略, 运动曲线和运动属性可以省略,位置也不做要求*/
            /*transition: .1s 1s all ease;*/
            transition: .7s ease-in-out;
            /*display: none;*/
            /*opacity: 0;*/
        }
        .sup:hover .sub {
            /*margin-left: auto;*/
            /*display: block;*/
            /*opacity: 1;*/
            margin-left: calc(100% - 50px);
        }
        /*结论:*/
        /*1.尽量悬浮静止的盒子, 控制运动的盒子*/
        /*2.不能确定区间范围的属性值, 不会产生动画效果*/
        /*display 不能做动画  | opacity可以做动画*/
    </style>
</head>
<body>
    <!-- 案例 -->
    <div class="sup">
        <div class="sub"></div>
    </div>

    <!-- 动画: 从一种状态渐变(非瞬变)到另一种状态 -->
    <!-- HTML5如何实现动画: transition(过渡) | animation(动画) -->
    <div class="box"></div>
    
</body>
</html>

三、过度案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过渡案例</title>
    <style type="text/css">
        .wrapper {
            position: relative;
            width: 300px;
            height: 300px;
            /*background-color: orange;*/
            margin: 50px auto;
            border-bottom: 2px solid #ccc;
        }
        .box {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: orange;
            transition: .5s;
            /*top: 240px;*/
            bottom: 10px;
            /*采用定位布局情况下,固定top,动画会往下延伸,反之固定bottom,动画会往上延伸,左右同理*/
            left: 120px;
        }
        .box:hover {
            height: 300px;
        }
        .up, .down {
            width: 60px;
            height: 30px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
        }
        /*做动画时,相当于谁是静止的*/
        .up {
            top: -15px;
        }
        .down {
            bottom: -15px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="up"></div>
            <div class="down"></div>
        </div>
    </div>
</body>
</html>

四、盒子阴影

```css
/*x轴偏移量 y轴偏移量虚化程度阴影宽度阴影颜色*/
box-shadow: 0 0 10px 10px black;

/*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*屏幕正中央*/
            margin-top: calc(50vh - 100px);
            margin-left: calc(50vw - 100px)
        }
        .box {
            /*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
            /*box-shadow: 0 0 10px 10px black;*/

            /*一个盒子可以设置多个阴影*/
            box-shadow: -250px 0 10px 0 red, 250px -50px 0 10px blue, 100px -225px 10px 10px yellow, 0 10px 10px -5px #333;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

五、伪类设计边框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类设计边框</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 50px auto;
            position: relative;
        }
        
        /*:before | :after*/
        .box:before {
            content: "";
            /*display: block;*/
            /*会拉动盒子*/
            /*margin-top: 100px;*/
            /*正常*/
            /*margin-left: 10px;*/

            position: absolute;
            width: 180px;
            height: 1px;
            background-color: black;
            left: 10px;
            top: 199px;
        }
        .box:after {
            content: "";
            position: absolute;
            width: 1px;
            height: 180px;
            background-color: black;
            top: 10px;
            left: 199px;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
</body>
</html>

相关阅读:
os模块
 函数练习
 集合去重
 作业二：购物车程序
 作业一: 三级菜单
 字典练习
 字典
 切片
 冒泡练习
 判断整型数据奇偶数
原文地址：https://www.cnblogs.com/wuzhengzheng/p/10273536.html