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

<!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. 2527: [Poi2011]Meteors[整体二分]

    2527: [Poi2011]Meteors Time Limit: 60 Sec  Memory Limit: 128 MB Submit: 1528  Solved: 556 [Submit][S ...

  2. Spark版本发布历史，及其各版本特性

      2016年11月5日 We are proud to announce that Apache Spark won the 2016 CloudSort Benchmark (both Dayto ...

  3. POJ-2777 Count Color（线段树，区间染色问题）

    Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 40510 Accepted: 12215 Descrip ...

  4. The Unique MST POJ - 1679 最小生成树判重

    题意:求一个无向图的最小生成树,如果有多个最优解,输出"Not Unique!" 题解: 考虑kruskal碰到权值相同的边: 假设点3通过边(1,3)连入当前所维护的并查集s. ...

  5. 如何快速创建提交一个项目到Github

    1.https://github.com创建一个repository 2.本地创建一个文件夹A 3.命令行转到新文件夹A,执行git init使其能被git管理,并生成.git隐藏文件 4.如内容,应 ...

  6. 源码 <oss2.models.PutObjectResult object at 0x7f7928d0b240>

    <oss2.models.PutObjectResult object at 0x7f7928d0b240> # -*- coding: utf-8 -*- import oss2 oss ...

  7. php之setcookie

    注意在任何发送请求头之前不能有输出,不然会获取不到header头 setcookie(key,value, expires, 'path', domain); 在发送cookie时,会自动把cooki ...

  8. python的几个注意事项

    ,==============坑======= 1.可变类型的值不要作为函数参数默认值,应该是不可变的对象,如None,True,False,数字或字符串 2.小心+= a = range(10) b ...

  9. sklearn学习总结（超全面）

    https://blog.csdn.net/fuqiuai/article/details/79495865 前言sklearn想必不用我多介绍了,一句话,她是机器学习领域中最知名的python模块之 ...

  10. 影响SEO 搜索引擎优化的网页制作细节

    1.将css与javascript全部用下边的方法分离到外部文件中去. [html]<link rel=”stylesheet” type=”text/css” href=”css/style. ...