通过CSS3属性值的变化实现动画效果+触发这些动画产生交互
css3过渡
transition
兼容性：IE10+
transition: none | all | property
默认为none
all 表示所有属性过渡
property 指定属性值，如color opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
.box{
width:700px;
height:700px;
margin:0 auto;
background:url(source/pic.png) center no-repeat;
cursor: pointer;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition-property:transform;
-moz-transition-property:transform;
-ms-transition-property:transform;
-o-transition-property:transform;
transition-property:transform;
}
.box:hover{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition-duration 动画持续时间
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
.box{
width:700px;
height:700px;
margin:0 auto;
background:url(source/pic.png) center no-repeat;
cursor: pointer;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition-property:transform;
-moz-transition-property:transform;
-ms-transition-property:transform;
-o-transition-property:transform;
transition-property:transform;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-ms-transition-duration:2s;
-o-transition-duration:2s;
transition-duration:2s;
-webkit-transition-timing-function:linear;/*线性*/
-moz-transition-timing-function:linear;
-ms-transition-timing-function:linear;
-o-transition-timing-function:linear;
transition-timing-function:linear;
-webkit-transition-timing-function:ease;/*平滑*/
-moz-transition-timing-function:ease;
-ms-transition-timing-function:ease;
-o-transition-timing-function:ease;
transition-timing-function:ease;
-webkit-transition-timing-function:ease-in;/*缓入*/
-moz-transition-timing-function:ease-in;
-ms-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
transition-timing-function:ease-in;
-webkit-transition-timing-function:ease-out;/*缓出*/
-moz-transition-timing-function:ease-out;
-ms-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
transition-timing-function:ease-out;
-webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
-moz-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.box:hover{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition-delay 过渡延迟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
.box{
width:700px;
height:700px;
margin:0 auto;
background:url(source/pic.png) center no-repeat;
cursor: pointer;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition-property:transform;
-moz-transition-property:transform;
-ms-transition-property:transform;
-o-transition-property:transform;
transition-property:transform;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-ms-transition-duration:2s;
-o-transition-duration:2s;
transition-duration:2s;
-webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
-moz-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-delay:1s;
-moz-transition-delay:1s;
-ms-transition-delay:1s;
-o-transition-delay:1s;
transition-delay:1s;
}
.box:hover{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transtion简写
transition: property duration timing-function delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
.box{
width:700px;
height:700px;
margin:0 auto;
background:url(source/pic.png) center no-repeat;
cursor: pointer;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:transform 2s ease-in-out 1s;
-moz-transition:transform 2s ease-in-out 1s;
-ms-transition:transform 2s ease-in-out 1s;
-o-transition:transform 2s ease-in-out 1s;
transition:transform 2s ease-in-out 1s;
}
.box:hover{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
-webkit-transition:transform 2s ease-in-out 1s;
-moz-transition:transform 2s ease-in-out 1s;
-ms-transition:transform 2s ease-in-out 1s;
-o-transition:transform 2s ease-in-out 1s;
transition:transform 2s ease-in-out 1s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
通过CSS3属性值的变化实现动画效果+触发这些动画产生交互的更多相关文章
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
- 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标
1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 根据Expander的IsExpanded属性值的变化动态设计Control的size
简要说明: 当Expander 的IsExpanded属性为“True” 时给控件设个尺寸(此处为高度),当为“False”时给控件设另外一个值. 知识点:数据绑定.Style和Trigger < ...
- CSS3属性值之box-shadow
语法: box-shadow:inset x-offset y-offset blur-radius spread-radius color 也就是: 对象选择器 {box-shadow:投影 ...
- Vue中如何监控某个属性值的变化？
比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...
随机推荐
- Web 开发工具类(2): HttpClientUtils
HttpClientUtils 整合了一些 web开发中常用的httpClient操作: package com.evan.common.utils; import java.io.IOExcepti ...
- Dubbo Cluster集群那点你不知道的事。
这是why技术的第33篇原创文章 本周是在家办公的一周,上面的图就是我在家的工位. 工欲善其事,必先利其器.在家办公,我是认真的. 在家里开发的时候有需求是这样的:一个如果接口调用失败,需要自动进行重 ...
- 最小生成树(一)kruskal
今天写一篇关于最小生成树的番外篇,以前写最小生成树总是用的prim,关于kruskal只是知道一些原理,一直也没有时间去学,今天偶然看了一些并查集,才想起了这个算法 会想起刚刚(预)学过的数据结构,来 ...
- HDU_5602_概率dp
http://acm.hdu.edu.cn/showproblem.php?pid=5602 dp[1][i][j]表示轮到第二个人操作时,第一人总和i,第二人总和j,第一人胜的最小概率(因为每个人都 ...
- BZOJ 1009 [HNOI2008]GT考试(矩阵快速幂优化DP+KMP)
题意: 求长度为n的不含长为m的指定子串的字符串的个数 1s, n<=1e9, m<=50 思路: 长见识了.. 设那个指定子串为s f[i][j]表示长度为i的字符串(其中后j个字符与s ...
- 微信小程序开发技巧总结 （一）-- 数据传递和存储
结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在ap ...
- MySQL关系型数据库基础操作
MySQL基础 一.MySQL常用数据类型 1.常用数值类型(INT,DOUBLE,FLOAT) ① int 或者 integer 类型: 大小(字节):4字节: 范围: (有符号: -2147483 ...
- 轻松搞懂Python递归函数的原理与应用
递归: 在函数的定义中,函数内部的语句调用函数本身. 1.递归的原理 学习任何计算机语言过程中,“递归”一直是所有人心中的疼.不知你是否听过这个冷笑话:“一个面包,走着走着饿了,于是就把自己吃了”. ...
- 基于 Serverless Component 全栈解决方案 Ⅱ
虽然之前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js ...
- Java8尽管很香，你想过升级到Java11吗？会踩那些坑？
目前最新JDK 11,Oracle会一直维护到2026年. Java11的新特性 1.更新支持到Unicode 10编码 Unicode 10(version 10.0 of the Unicode ...