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-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);
```
/*结论:*/
/*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>
四、盒子阴影
/*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 ...
随机推荐
- js 基本类型与引用类型的存储
js的变量类型分为基本数据类型和引用数据类型 7种基本数据类型:null, undefined, number, boolean, string(大多数语言中string属于引用数据类型,而在js中它 ...
- 解决Python-OpenCV中cv2.rectangle报错
在PyTorch中测试DataLoader读取后的图像,对图像画框cv2.rectangle时报错: TypeError: Layout of the output array img is inco ...
- 【leetcode】509. Fibonacci Number
problem 509. Fibonacci Number solution1: 递归调用 class Solution { public: int fib(int N) { ) return N; ...
- Hadoop 部署之 HBase (四)
目录 一.HBase是什么 HBase 和 HDFS HBase的存储机制 二.HBase 集群部署 1.下载安装 2.配置 HBase 环境变量 三.HBase 配置(namenode01) 1.配 ...
- Red And Green
#include <stdio.h> #include <string.h> #define LENGTH 50 /* * 1.字符序列中有一个字符肯定是分界点,它的左边全为红 ...
- linux下jenkins的安装
构建伟大,无所不能 Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化, 满足任何项目的需要. 参考博客:https://www.cnblogs.com ...
- 将raspberry 3B+的apt替换为国内源
前段时间买了一块树莓派,想着自己拿来玩一下下(没什么钱烧更好的硬件,只能玩这个了,好在还够玩).于是就折腾起来,装了raspberry的系统. 这时候,因为默认apt是国外的源,在GFW这种神奇东西的 ...
- [转帖]Asp.net MVC 与 Asp.net Web API 区别
Asp.net MVC 与 Asp.net Web API 区别 https://www.cnblogs.com/viktor988/ https://www.cnblogs.com/terry283 ...
- ros 配置udev
显示已经链接设备 lsusb 显示挂载点 ls /dev/ttyACM* /dev/ttyUSB* 可以看到 ttyUSB0 和 ttyUSB1 对应哪一个设备不确定,因此,我们就需要一种方法来保证每 ...
- Pots(POJ-3414)【BFS】
题意:有两个有着固定容量的茶壶,初始时都为空,要求用FILL,POUR,DROP三种操作来准确地得到C值,输出最少次数及操作方案. 思路:比赛的时候真是脑子不好使,根本没想到是搜索,看了别人的题解用搜 ...