animation效果
添加一个颜色灰渐变的动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
div.dd {
background: green;
width: 200px;
height: 200px;
-webkit-transition:background 1s ease-in, width 1s ease-in 1s;
}
@-webkit-keyframes mycolor {
0%{
background: red;
}
30% {
background: blue;
}
70%{
background: yellow;
}
100% {
background: white;
}
}
div.dd:hover {
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count:1;
}
</style>
</head>
<body>
<div class="dd"></div>
</body>
</html>
animation效果的更多相关文章
- 动画---图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...
- Swift 4.0.2 按下tab bar item时, item会有内缩的animation效果(如同Twitter的tab bar 效果一样)
先上效果图: 假设 tab bar items 有5个.tag为0,1,2,3,4.storyboard中tab bar controller继承的class叫做xxxVC. class xxxVC: ...
- Animation
Animation 效果 用法 1.非常简单,导入两个文件(UIView+SetRect) (UIView+ImageEffects) 源码 github源码:https://github.com/m ...
- Android实现左右滑动效果
本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...
- Android 实现左右滑动效果ViewFlipper终结【转】
本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...
- css3动画:transition和animation
概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...
- 背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)
MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...
- android开发之Animation(五)
android开发之Animation的使用(五) 本博文主要讲述的是Animation中的AnimationLisenter的用法,以及此类的一些生命周期函数的调用,代码实比例如以下: MainAc ...
随机推荐
- Maven属性(properties)标签的使用
在命令行使用属性时,是-D,比如:mvn -D input=test Properties 属性是了解POM基础知识的最后一个要素.Maven属性是值占位符,如Ant中的属性.它们的值可以通过使用符号 ...
- Android ScrollView嵌套ScrollView滚动的问题解决办法
引用:http://mengsina.iteye.com/blog/1707464 http://fenglog.com/article.asp?id=449 Android ScrollView嵌套 ...
- Shell if else
语句1if [ expression ]then ...fi 语句2if [ expression ]then ...else ...fi 语句3if [ expression 1 ]then ... ...
- Spark2 jar包运行完成,退出spark,释放资源
import org.apache.spark.sql.SparkSession import org.apache.spark.sql.Dataset import org.apache.spark ...
- Git 使用篇一:初步使用GitHub,下载安装git,并上传项目
首先在MAC上怎么操作. 在gitHub创立一个账户,在创立一个项目,这就不用我说了对吧. 创建完之后是这样的: 接下来,我们打开https://brew.sh 这是下载homebrew的网站,hom ...
- 《机器学习实战》中的splitDataSet函数
splitDataSet这个函数困扰了我好一阵子,为什么以某一特征值为标准进行划分数据集以后,变成了局部?例如,如果以第1个特征为0为标准进行划分,那么返回的结果集就是不含有此特征的结果集,如下图红框 ...
- codeforces 894B - Ralph And His Magic Field - [数学题]
题目链接:https://cn.vjudge.net/problem/CodeForces-894B Ralph has a magic field which is divided into n × ...
- POJ 1273 - Drainage Ditches - [最大流模板题] - [EK算法模板][Dinic算法模板 - 邻接表型]
题目链接:http://poj.org/problem?id=1273 Time Limit: 1000MS Memory Limit: 10000K Description Every time i ...
- 2018/04/02 PHP 中的浮点数计算问题
首先抛出一个问题 var_dump((0.1 + 0.2) == 0.3); 这个判断是否正确呢? 它的输出是 false 是否和你想的一样呢? -- 浮点精度运算可以说是每个语言都必有的问题.因为这 ...
- mysql "order by" "distinct" "group by" "having"
本文用到的表结构 create table stu( stu_id int auto_increment primary key, name ) not null, age smallint, cls ...