css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画
一、总结
一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1、哪些样式可以设置过渡动画？
transform加别的css
11 transition: width 2s, height 2s, transform 2s;
2、如何设置为hover里面的所有样式都执行过渡动画？
transition: all 1s ease 0s;
3、过渡动画如何实现？
首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1 div{
2 width:256px;
3 height:256px;
4 border:2px solid #999;
5 overflow:hidden;
6 transition:transform 2s;
7 }
8
9 div:hover{
10 transform:rotate(360deg);
11 }
二、transition+css或transform实现过渡动画
1、相关知识
不仅transform可以，其它css也可以
2、代码
div{
width:256px;
height:256px;
border:2px solid #999;
overflow:hidden;
transition:transform 2s;
}
div:hover{
transform:rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
11 transition: width 2s, height 2s, transform 2s;
} div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>
css3-12 transition+css或transform实现过渡动画的更多相关文章
- css3中什么时候用transition什么时候用animation实现动画
在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3特效之转化（transform）和过渡（transition）
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...
随机推荐
- C++ 补课（一）
1,在C语言中,全局变量必须声明在所有的函数之前,局部变量必须声明在所有可执行语句之前: C++ 允许在代码块的任何位置对局部变量进行声明 2,常量定义方面,C语言 #define 可能因计算的优先级 ...
- 互联网+时代IT管理者的转型
最近,大众创业万众创新的热潮真是一浪接着一浪,它实际上是一次政府和企事业的自我改革,利用互联网+的思维与技术对生产模式.流通模式与运营模式进行全新的变革,商业的本质是没有变的,仅仅是穿了个马甲来表演. ...
- Oracle Sqlplus中上下键出现^[[A乱码问题
安装rlwrap 下载:http://utopia.knoware.nl/~hlub/uck/rlwrap/ 或者 百度云盘:http://pan.baidu.com/s/1ntM8YXr 须要先安 ...
- Day6上午解题
预计分数:100+100+30=230 实际分数:90+25+10=125 T1少判了一种情况,T2的贪心是错的,T3被卡了... T1 模拟水题,注意20的可以用3个5块的找 #include< ...
- WebService 的Description 属性说明（转）
转自:http://exception.thinksaas.cn/0/173/173623.html 在WebMethod的description 中可使用超文本, 举例: 如上图中,红框类的WebS ...
- python ATM机 案例代码
利用目前学的流程控制写的 ''' ATM机 需求: 1.登陆 输入账号输入密码 每日只有3次登陆密码错误的机会,超过3次禁止登陆 2.查询余额 3.存款 4.取款 5.转帐 6.退出 ''' info ...
- Unity实现发送QQ邮件功能
闲来无聊,用Unity简单实现了一个发送邮件的功能,希望与大家互相交流互相进步,大神勿喷,测试的是QQ邮件用到的是MailMessage类和SmtpClient类首先如果发送方使用的是个人QQ邮箱账号 ...
- C# winform利用反射和自定义特性加载功能模块(插件式开发)
由于在实际的工作中, 碰见这样的一个问题: 一个软件, 销售给A客户 他需要所有功能, 但是销售给B客户, 他只需要其中的一部分, 1.如果我们在实际的开发过程中, 没有把一些功能模块区分开来的话, ...
- 大数据- Hive
构建在Hadoop之上的数据仓库,数据计算使用MR,数据存储使用HDFS 由于数据计算使用mapreduce.因此通经常使用于进行离线数据处理 Hive 定义了一种类 SQL 查询语言 ...
- zookeeper 配置文件说明（zoo.cfg）
clientPort # 客户端连接server的port,即对外服务port,一般设置为2181. dataDir # 存储快照文件snapshot的文件夹. 默认情况下.事 ...