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>

web开发：动画及阴影的更多相关文章

超全的web开发工具和资源
首页新闻产品地图动态城市帮助论坛关于登录注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐! 平台信息培训互动 ...
移动Web开发调研
背景在移动互联网浪潮下,移动设备普及,对配置需要考虑移动端设备可访问性.Web作为最贴近用户的配置手段,面向从PC端传统页面,向移动端页面的转型. 概念 PC Web: 面向传统PC电脑的浏览器开发 ...
加速Web开发的9款知名HTML5框架
与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证.大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts.CSS3样式表则以改善多媒体特征的功能性和响 ...
移动Web开发小技巧
移动Web开发小技巧添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用 ...
移动端web开发技巧（转）
原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
web开发学习路线
第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMA ...
如何学习web开发环境搭建和脚手架
Web前端的学习路线第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...
干货100+ 最超全的web开发工具和资源大集合
干货100+ 最超全的web开发工具和资源大集合作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...
给 Web 开发人员推荐的通用独立 UI 组件（一）（按钮很不错）
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
Web 开发人员推荐的通用独立 UI 组件
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

随机推荐

Carthage - Could not find any available simulators for iOS
升级xcode版本后,用carthage编译第三方库有可能会报这个错误:[Could not find any available simulators for iOS] 两个解决方法: 1. 升级你 ...
【leetcode_easy】543. Diameter of Binary Tree
problem 543. Diameter of Binary Tree 题意: 转换一种角度来看,是不是其实就是根结点1的左右两个子树的深度之和呢.那么我们只要对每一个结点求出其左右子树深度之和,这 ...
iOS面试-关于秒退
1 为什么很多的 iOS app 都有秒退现象?有什么好方法避免它?有哪些好方法避免这种现象吗? 问题里的“秒退”如果我没理解错,应该是指程序显示完默认启动图片后,在初始化阶段就崩溃了(也可以叫“闪退 ...
中国行政区划表，包括34个省、直辖市的所有数据 mysql数据
中国行政区划表,包括34个省.直辖市的所有数据 sql文件地址 https://gitee.com/zwh_9527/ChinaProvince
Flutter 实现简单搜索功能
先建立一个主文件,继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个自定义的Widget,主要代码都在这个文件中. import 'package:flu ...
简单实现react中虚拟DOM渲染
/** * @method createElement * @param type {string} * @param props {Object} * @param children {string ...
Linux 基本权限管理
1.linux权限表示: -rw-r--r-- (一共10位): 第一位:表示文件类型: 常用的三种文件类型:- 表示一般文件,d 表示目录,l 表示软链接文件: 后九位:每三位为一组: rwx r- ...
centos7服务搭建常用服务配置之一：SSH
目录 1 SSH服务协议 1.1 ssh服务协议说明 1.2 ssh服务工作机制 1.3 ssh加密技术说明 1.3.1 ssh实现安全链接建立,利用要是和锁头 1.3.2 ssh加密算法 1.4 s ...
mysql导入数据报错：Incorrect datetime value
incorrect datetime value 报错信息如下图: 意思很明显是说,'0000-00-00 00:00:00'不是一个有效的日期类型的值解决办法: sql_mode 中删除 NO_Z ...
【AtCoder】AGC008
AGC008 A - Simple Calculator 如果符号相同,那么如果y比x大直接走,否则需要两次反号如果符号不同,需要绝对值的差加一次反号如果有一个是0,且y比x要小,那只需要一次反号 ...

web开发：动画及阴影

web开发：动画及阴影的更多相关文章

随机推荐

热门专题