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

随机推荐

【Web】利用jquery实现百度新闻导航菜单滑动动画
前言前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
ajax提交文件，django测试脚本环境书写，froms组件，钩子函数
1.在新版本中,添加app是直接在settings设置中,将INSTALLED_APPS里添加app名字, 但是他的完整写法是 'app01.apps.App01Config' 因为新版本做了优 ...
Impacket网络协议工具包介绍
转载自FreeBuf.COM Impacket是一个Python类库,用于对SMB1-3或IPv4 / IPv6 上的TCP.UDP.ICMP.IGMP,ARP,IPv4,IPv6,SMB,MSRPC ...
利用先电云iaas平台搭建apache官方大数据平台（ambari2.7+hdp3.0）
一.ambari架构解析二.基础环境配置以两台节点为例来组件Hadoop分布式集群,这里采用的系统版本为Centos7 1511,如下表所示: 主机名内存硬盘 IP地址角色 master 8 ...
rabbitmq启动方式
1.以应用方式启动 rabbitmq-server -detached 后台启动 Rabbitmq-server 直接启动,如果你关闭窗口或者需要在改窗口使用其他命令时应用就会停止关闭:rabbi ...
jquery（第一章）认识jquery
Jquery对象就是通过JQuery包装DOM对象后产生的对象,在JQuery对象中无法使用DOM对象的任何方法. 1.4.2 JQuery对象的和DOM对象的互相转换若获取的对象是JQuery对象 ...
Java编程思想（三）控制程序流程
3.1.10逗号运算符我们可以使用一系列由逗号分隔的语句,而且哪些语句均会独立执行. 3.1.15复习计算顺序
pytorch API中sgd.py的学习记录
参考:PyTorch与caffe中SGD算法实现的一点小区别其中公式(3)(4)的符号有问题变量对应表程序参考文章 buf v momentum μ d_p Δf(θ) lr ξ p θ
Problems to be upsolved
Donation 官方题解尚未看懂. comet oj contest15 双11特惠hard Mobitel Small Multiple 题解为什么可以如此缩点? Candy Retributi ...
微信小程序路由跳转异步请求存储数据，微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...

web开发：动画及阴影

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

随机推荐

热门专题