添加一个颜色灰渐变的动画效果。

<!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效果的更多相关文章

  1. 动画---图形图像与动画(三)Animation效果的XML实现

    使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...

  2. 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: ...

  3. Animation

    Animation 效果 用法 1.非常简单,导入两个文件(UIView+SetRect) (UIView+ImageEffects) 源码 github源码:https://github.com/m ...

  4. Android实现左右滑动效果

    本示例演示在Android中实现图片左右滑动效果.   关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...

  5. Android 实现左右滑动效果ViewFlipper终结【转】

    本示例演示在Android中实现图片左右滑动效果.   关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...

  6. CSS3+HTML5特效7 - 特殊的 Loading 效果

    效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...

  7. css3动画：transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  8. 背景图片移动插件MyFloatingBg(浮动背景图效果，可让背景随着页面的滚动而滚动)

    MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...

  9. android开发之Animation（五）

    android开发之Animation的使用(五) 本博文主要讲述的是Animation中的AnimationLisenter的用法,以及此类的一些生命周期函数的调用,代码实比例如以下: MainAc ...

随机推荐

  1. sql中的group by 和 having 用法解析

    转载博客:http://www.cnblogs.com/wang-123/archive/2012/01/05/2312676.html --sql中的group by 用法解析:-- Group B ...

  2. 关于卸载vmware后如何删除VMware Network Adapter VMnet1虚拟网卡

    默认情况下.我们在windows下安装了vmware虚拟机后,都会产生VMware Network Adapter VMnet1虚拟网卡 对于vmware虚拟网卡的管理,我们可以在vmware虚拟机软 ...

  3. Java 制作证书（Windows 和Linux）

    一.Windows数字证书 1. 生成数字证书 1.1 进入[%JAVA_HOME%]路径下 cd D:\Program Files\Java\jdk1.8.0_131 1.2 生成证书.一些命令中红 ...

  4. QrenCode : 命令行下生成二维码图片

    对于二维码大家应该并不陌生,英文名为 2-dimensional bar code 或 QR Code,是一种用图形记载信息的技术,最常见的是应用在手机应用上.用户通过手机摄像头扫描二维码或输入二维码 ...

  5. java字符串的替换

    split也是用到了正则表达式 replace 是没有用正则表达式,全部替换 replaceAll 和replaceFirst是用了正则表达式 replaceAll替换所有,replaceFirst是 ...

  6. 南阳理工大学oj 题目15 括号匹配（二）

    括号匹配(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:6   描述 给你一个字符串,里面只包含"(",")","[&qu ...

  7. Git 使用篇二：小组协作开发

    上一片搭建了git远程服务器,那么小组成员在使用git开发的时候都有什么要注意的. 第一步: 首先每个小组成员,在自己本地建立一个目录,作为工作空间,再去git clone 这个远程仓库: git c ...

  8. ONLYstore_name+AdWord

    情景描述ONLYstore_name+AdWord 基础表数据表 BASE_TABLEAdWord food drink1w1    1f1    1d12w2    2f_    2d_3w1    ...

  9. echarts 数据统计报表

    官网   http://echarts.baidu.com/index.html 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以 ...

  10. 食物链--poj1182（并查集含有关系）

    http://poj.org/problem?id=1182   题意应该就不用说了  再次回到食物链这道题,自己写了一遍,一直wa...原因竟然是不能用多实例,我也是醉了,但是我真的彻底的理解了,那 ...