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 ...
随机推荐
- 微信小程序文字超过行后隐藏并且显示省略号
在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...
- Arduino基础入门—3.连接 IIC 1602 LCD显示文字
1. IIC转接板介绍 Arduino Uno R3开发板的外部IO口是非常有限的.在驱动LCD1602时,尽管我们的数据线使用了4线,相对于8线方式减少一半,但是在需要外接多种传感器的应用中,4线驱 ...
- Navicate 许可证
参考: https://blog.csdn.net/weixin_42129270/article/details/81182261
- 洛谷 题解 P2502 【[HAOI2006]旅行】
由于此题边数比较小,所以可以先给边排个序,然后跑m遍最小生成树,每跑一次删除一条边,找最优解. 防TLE技巧 把边按从小到大的顺序排好,那么只要当前无法联通,那么后面也无法联通 最优解找法 doubl ...
- 洛谷 题解 CF910C 【Minimum Sum】
当时看到这题一脸懵逼,莫名想到了复杂度为O(10000000000*n)的算法,然而肯定会超时(废话) 算法楼上楼下都说的很清楚了 很明显这题是要用每个字母的权值进行排序.然后依次进行赋值. \(\c ...
- poj3977（折半枚举+二分查找）
题目链接:https://vjudge.net/problem/POJ-3977 题意:给一个大小<=35的集合,找一个非空子集合,使得子集合元素和的绝对值最小,如果有多个这样的集合,找元素个数 ...
- Python 命名规范总结
Python推荐命名规范: 模块名和包名采用小写字母并且以下划线分隔单词的形式: 如:browser_driver 类名或异常名采用每个单词首字母大写的方式: 如:BasePage, Keyboard ...
- 在linux下进行数据备份
一.完全备份 完全备份是指把所有需要备份的数据全部备份.当然,完全备份可以备份整块硬盘.整个分区或某个具体的目录.完全备份的好处是数据恢复方便,因为所有的数据都在同一个备份中,所以只要恢复完全备份,所 ...
- MQ解决消息重发--做到幂等性
一.MQ消息发送 1.发送端MQ-client(消息生产者:Producer)将消息发送给MQ-server: 2.MQ-server将消息落地: 3.MQ-server回ACK给MQ-client( ...
- spring入门一：框架整体简介
1:spring的基本框架主要包含六大模块:DAO.ORM.AOP.JEE.WEB.CORE DAO:(Data Access Object) 数据访问对象,是一个面向对象的数据库接口. ORM:(O ...