1.过度的基本介绍及写法

 .div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
/*简写:transition:属性名称 过度时间 时间函数 延迟*/
/*transition: left 2s linear 0s;*/
/*多个样式添加*/
/*transition: left 2s linear 0s,background-color 2s linear 0s;*/
/*为多个样式同时添加过度样式 all:所有样式
效率低下,避免用
steps(4):可以让过度效果分为制定的几次来完成
*/
transition: all 2s steps(4);
-moz-transition: all 2s steps(4);
-webkit-transition: all 2s steps(4);
-o-animation: all 2s steps(4);
}

2.过度小案例:伸缩菜单项

2.1.html代码

 <div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
</ul>
</div>
</div>
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
</ul>
</div>
</div>
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
</ul>
</div>
</div> <div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
<li>深圳超市枪杀案</li>
</ul>
</div>
</div>
</div>

2.2.css代码

     <style>
.menu{
width: 200px;
height: auto;
margin: 100px auto;
}
.item{
width: 100%;
height: auto;
}
.item>h3{
height: 40px;
line-height: 40px;
background-color: #85b7ff;
color: orange;
border-bottom: 2px solid #ccc;
padding-left: 10px;
}
.item > .itemBox{
width: 100%;
height:;
overflow: hidden;
transition-property: height;
transition-duration: 1s;
}
.item > .itemBox > ul{
list-style: none;
background-color: #efffc7;
padding: 10px;
}
.item:hover > .itemBox{
height: 130px;
} </style>

h5-过度的更多相关文章

  1. APP中的 H5和原生页面如何分辨、何时使用

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅. H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 ...

  2. APP中的 H5和原生页面如何分辨?

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...

  3. H5架构和原生架构的区别

    1.App的3种开发方式 表面上看,手机App都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样.按照开发技术,App可以分成三大类.原生应用(简称nativeApp), ...

  4. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  5. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  6. H5 App设计者需要注意的21条禁忌

    我们通常在做H5 APP设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的APP心生怨念.现在WeX5君呕血为大家整理出H5 APP设计的21条 ...

  7. 腾讯云H5语音通信QoE优化

    本文首发在云+社区,未经许可,不得转载. 云+导语:4月21日,腾讯云+社区在京举办"'音'你而来,'视'而可见--音视频技术开发实战沙龙",腾讯音视频实验室高级工程师张轲围绕网络 ...

  8. h5 canvas与SVG的比较

    画布 什么是canvas? HTML5的canvas标签使用JavaScript可以在网页上绘制图像,画布为一个矩形. 画布本身没有绘制能力,只能通过脚本来绘制. 画布例子: <canvas i ...

  9. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

  10. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

随机推荐

  1. uni-app实现弹窗遮罩

    <template> <view> <view class="systemboxItem" @click="showSystemDialog ...

  2. 英语学习 - 进行时态的被动 ( be being done )

    be being done  例: The story book was being read by him .

  3. Java语言学习总结 扩展篇 包装类的概念及其使用

    包装类 包装类的概述 Java提供了两个类型系统,基本类型与引用类型,使用基本类型在于效率,然而很多情况,会创建对象使用,因为对象可以做更多的功能,如果想要我们的基本类型像对象一样操作,就可以使用基本 ...

  4. 留学英文论文写作Abstract三种类型

    所谓Abstract,就是对所写论文主要内容的精炼概括.Abstract是美国人的说法,英国的科技期刊喜欢称之为Summary.在英文中,有资料是这么对其定义的:Abstract is a sketc ...

  5. 吴裕雄--天生自然C++语言学习笔记:C++ 重载运算符和重载函数

    C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它们的参数列表和定义(实现)不 ...

  6. 吴裕雄--天生自然C++语言学习笔记:C++ 日期 & 时间

    C++ 标准库没有提供所谓的日期类型.C++ 继承了 C 语言用于日期和时间操作的结构和函数.为了使用日期和时间相关的函数和结构,需要在 C++ 程序中引用 <ctime> 头文件. 有四 ...

  7. MongoDB Limit

    版权所有,未经许可,禁止转载 章节 MongoDB 入门 MongoDB 优势 MongoDB 安装 MongoDB 数据建模 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB ...

  8. Day 15:缓冲输入输出常用方法和小练习

    以拷贝图片为例子,演示异常处理的代码: 拷贝一张图片 import java.io.File;import java.io.FileInputStream;import java.io.FileOut ...

  9. 【剑指Offer】面试题10- II. 青蛙跳台阶问题

    题目 一只青蛙一次可以跳上1级台阶,也可以跳上2级台阶.求该青蛙跳上一个 n 级的台阶总共有多少种跳法. 答案需要取模 1e9+7(1000000007),如计算初始结果为:1000000008,请返 ...

  10. UVA - 11105 Semi-prime H-numbers(H-半素数)

    题意:所有形如4n+1(n为非负整数)的数叫H数.定义1是唯一的单位H数,H素数是指本身不是1,且不能写成两个不是1的H数的乘积.H-半素数是指能写成两个H素数的乘积的H数(这两个数可以相同也可以不同 ...