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

<!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. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十八：SDRAM模块① — 单字读写

    实验十八:SDRAM模块① — 单字读写 笔者与SDRAM有段不短的孽缘,它作为冤魂日夜不断纠缠笔者.笔者尝试过许多方法将其退散,不过屡试屡败的笔者,最终心情像橘子一样橙.<整合篇>之际, ...

  2. Git - 忽略Xcode工程中UserInterfaceState.xcuserstate文件的问题

    一.在同 .Git目录下创建.gitignore文件.在文件中加入如下内容: *.xcuserstate project.xcworkspace xcuserdata UserInterfaceSta ...

  3. Zabbix监控虚拟主机告警Lack of free swap space on Zabbix server解决办法

    Zabbix监控虚拟机的时候有时候会报一下告警 是因为Zabbix监控没有考虑虚拟主机的交换空间情况 解决办法修改配置

  4. ASP.NET MVC中ViewBag和ViewData的区别

    在MVC3.0以上我们会用到ViewBag或者ViewData进行页面传值,对比一下二者的差距: ViewData ViewBag 基于key/value的字典集合 dynamic类型对象 从ASP. ...

  5. Asp.net中的web.config配置

    目录 Asp.net中的web.config配置... 1 一. 配置文件保存位置... 2 二. 配置文件加载顺序... 2 三. 配置文件节点介绍... 3 1. . 3 2. . 5 3. . ...

  6. MySQL在linux上的source code安装方法(configure)

    1.建立操作系统用户和组 [root@faspdev ~]# groupadd mysql [root@faspdev ~]# useradd -g mysql mysql 2.解压安装文件,进入解压 ...

  7. router-link传参 query方式

    router.js内的路由配置 { path: '/CreateProgress', name: 'CreateProgress', component:CreateProgress }   传参(q ...

  8. 洛谷P4436 游戏 [HNOI/AHOI2018]

    正解:拓扑排序 解题报告: 传送门! 首先不难想到可以把麻油锁的一段先直接缩成一个点,然后预处理每个点能到达的最左和最右节点,然后就能O(1)地查询辣 所以难点在于预处理 可以想到,对于它给定的关于锁 ...

  9. C++三大特性之继承

    原文地址:https://qunxinghu.github.io/2016/09/12/C++%20%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7%E4%B9%8B%E7%B ...

  10. Scala安装配置

    注:下载地址:http://downloads.typesafe.com/scala/2.11.6/scala-2.11.6.tgz?_ga=1.41078626.1125902863.1429259 ...