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 ...
随机推荐
- 【基础篇】EditText的一些属性设置
设置EditText的背景颜色 private test_editText=null; test_editText= (EditText) findViewById(R.id.EditTextInp ...
- CMDB学习之三数据采集
判断系统因为是公用的方法,所有要写基类方法使用,首先在插件中创建一个基类 将插件文件继承基类 思路是创建基类使用handler.cmd ,命令去获取系统信息,然后进行判断,然后去执行 磁盘 ,cpu, ...
- 【Material Design视觉设计语言】应用样式设计
作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...
- 给指定的用户无需密码执行 sudo 的权限
给指定的用户无需密码执行 sudo 的权限 cat /etc/passwd 可以查看所有用户的列表 w 可以查看当前活跃的用户列表 cat /etc/group 查看用户组 cat /etc/pass ...
- 虚拟机上的企业网络管理系统(cisco works 2000安装配置)
虚拟机上的企业网络管理系统 北京 李晨光 相关文章 Cisco Works 2000 网络管理软件安装.配置全过程 http://you.video.sina.com.cn/b/18168631-14 ...
- Docker+Mongodb
原文:Docker+Mongodb docker search mongodb docker run -d -p 2701:27017 -v /usr/mongodb/data:/data/db - ...
- Light OJ 1373 Strongly Connected Chemicals 二分匹配最大独立集
m种阳离子 n种阴离子 然后一个m*n的矩阵 第i行第j列为1代表第i种阴离子和第j种阴离子相互吸引 0表示排斥 求在阳离子和阴离子都至少有一种的情况下 最多存在多少种离子能够共存 阴阳离子都至少须要 ...
- 数值溢出（arithmetic overflow）问题与解决方案
0. 典型场景 两数相加(乘法).两数相减.一个数的阶乘,一个数的幂,这些统统可能造成数值的溢出: 避免数值溢出的方法: 当把一个计算出的很大的数赋值给一个 int(2^31-1)类型变量存储时,一般 ...
- 90.#define高级用法
define把参数变成字符串 #define f(x) printf("%s",#x); define连接两个字符串 #define a(x) a##x define把参数变成字符 ...
- PythonNET网络编程4
本地套接字 Linux 文件 b(块设备文件) c(字符设备文件) d(目录) -(普通文件) l(链接) s(套接字) p(管道) 作用:用于本地不同的程序间进行通信 创建流程 创建本地套接字 so ...