html5--6-52 动画效果-过渡
html5--6-52 动画效果-过渡
实例
@charset="UTF-8";
div{
width: 300px;
height: 150px;
margin: 30px;
font-size: 28px; } /*因为有了hover效果，有了变化（瞬间），所以可以产生过度动画*/
#div1{
background: red;
/* 多少个属性，现在是颜色和宽都可以变化，这里也可以指定width*/
transition-property: all;
/* 持续时间*/
transition-duration: 1s;
/* 动画先快后慢这些东西*/
transition-timing-function: ease;
/* 动画开始的延迟时间*/
transition-delay:1s;
}
#div1:hover{
background: green;
width: 150px;
} #div2{
background: orange;
transition-property: width;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.2,0.4,0.5,1);
transition-delay:1s;
}
#div2:hover{
background: green;
width: 150px;
} #div3{
background: blue;
transition: all 2s ease-in-out 0s;
}
#div3:hover{
background: green;
width: 150px;
} #div4{
background: rgba(120,60,30,0.8);
transition: width 1s ease ,
background 2s linear;
}
#div4:hover{
background: green;
width: 150px;
} #div5{
background: rgba(20,60,130,0.8);
transition: all 1s ease 0.5s; }
#div5:hover{
background: green;
width: 150px;
transform: rotate(360deg);
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>6-52课堂演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1">过渡动画1</div>
<div id="div2">过渡动画2</div>
<div id="div3">过渡动画3</div>
<div id="div4">过渡动画4</div>
<div id="div5">过渡动画5</div>
</body>
</html>
学习要点
- 掌握过渡动画的实现和应用
过渡动画：
- 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
- CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个 CSS 属性上/规定效果的时长
过渡动画的属性：
- transition 简写属性，用于在一个属性中设置四个过渡属性。
- transition-property 规定应用过渡的 CSS 属性的名称。
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- 属性名称
- transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
- transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- transition-delay 规定过渡效果何时开始。默认是 0。
html5--6-52 动画效果-过渡的更多相关文章
- HTML5 动画效果的多种实现方式
HTML5 动画效果的多种实现方式 1. CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- HTML5夜空烟花绽放动画效果
模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- html5+css3第一屏滚屏动画效果
详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...
随机推荐
- 启动第一个 KVM 虚机
本节演示如何使用 virt-manager 启动 KVM 虚机. 首先通过命令 virt-manager 启动图形界面 1 # virt-manager 点上面的图标创建虚机 给虚机命名为 kvm1, ...
- saltstack 开发相关命令记录
SALT API开发相关命令记录. 查看当前的salt key信息salt-key -L 测试被控主机的连通性salt '*' test.ping 远程命令执行测试salt '*' cmd.run ' ...
- electron 编译成exe
前提:现在有一个electron项目,等待打包成exe. 一,运行”electron .“,看运行是否正常.不正常则继续调试,正常可进入到第二步. 二,运行“electron-packager . m ...
- Maven的相关问题（一）——settings.xml配置详解
工作中第一次正式接触maven,虽然之前在学习时有遇到过,但是对于maven的认识和理解确实太浅薄,仅仅局限于机械式的操,纸上得来终觉浅,绝知此事要躬行···古人诚不欺我也~ 下面先贴一个找到的一个非 ...
- 初学Java经典例子
我自己看的书的理解学习Java就是学习对象,就像谈恋爱,你对她多付出,收货就多(跑题了对象是啥??对象就是实体,通过类可以生成具有特定状态(或者叫属性)和行为或动作的实例,问题来了怎么创建? new一 ...
- Windows下Python安装pyecharts
都说pyechart用来可视化好,可是安装的时候各种坑 正常情况是 pip install pyecharts 然后各种报错,找到一种可行的方式 在https://pypi.org/project/p ...
- 用rsync命令删除大文件夹
删除大文件夹 rsync 命令做同步文件用的命令 我们可以借助其快速的运行 来对大文件夹删除:原来就是 新建一个空文件夹 然后把这个空文件夹同步到一个大文件夹下面: 这样会删除大文件夹下面的内容 是高 ...
- Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下？ SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor
Webservice WCF WebApi 注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...
- oracle user locke
1:管理员登录 sqlplus sys/pwd as sysdba sql->alter user jd account unlock; commit; SQL> password new ...
- Python 包的制作（__init__.py）
如何制作一个自己的包:首先,需要创建一个文件夹,将其作为顶层包,在此文件夹内我们可以定义各个不同的子文件夹与 .py 文件作为各个子包与模块注意:在每个包文件夹下都需要有一个 __init__.py ...