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

<!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. window上安装pymysql

    date: 2018-11-26   18:54:04 安装: cmd: pip install pymysql 验证: cmd: python >>import pymysql 不报错即 ...

  2. 使用shell数据处理数据实例①-------手把手教学版

    引子: 在工作过程中经常要处理各种小数据,同事间会用各种工具方法来处理,比如用java.python.Perl甚至用UE手工处理.但貌似不都方便. 今天举一例子使用shell来处理,来说明shell一 ...

  3. iOS - 友盟集成QQ分享的AppID转换16进制的方法

    设置xcode的url scheme格式为“QQ”+腾讯QQ互联应用appId转换成十六进制(不足8位前面补0),例如“QQ41EE2B54”.生成十六进制方法:echo 'ibase=10;obas ...

  4. hiredis安装及测试

      (1) redis环境搭建    (2) hiredis下载地址及C API  github   (3) hiredis安装 我是把libhiredis.so放到/usr/local/lib/中, ...

  5. python--pytest库

    pytest:是一个框架,使构建简单和可扩展的测试变得容易. 安装:pip install -U pytest 检查安装:pytest --version 官方文档:https://docs.pyte ...

  6. ubuntu16.04下安装sublime_text

    1 在终端输入: sudo add-apt-repository ppa:webupd8team/sublime-text-3 添加sublime text3的软件源: 2 sudo apt-get ...

  7. 【转】仅此一文让你明白ASP.NET MVC原理

    原文地址:http://www.cnblogs.com/DotCpp/p/3269043.html ASP.NET MVC由以下两个核心组成部分构成: 一个名为UrlRoutingModule的自定义 ...

  8. CSU 1803 - 2016 - [同余]

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1803 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1. ...

  9. HDU 3746 - Cyclic Nacklace　&　HDU 1358 - Period　-　[KMP求最小循环节]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3746 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  10. 软件工程-wordcount（C语言实现）

    Github项目地址:https://github.com/xiaobaot/wordcount-wc/tree/master WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数 ...