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

<!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. shell脚本技巧记录

    2014/4/9 shell脚本变量处理: ${varible##*string} //从左向右截取最后一个string后的字符串 ${varible#*string} //从左向右截取第一个stri ...

  2. 《代码大全》阅读笔记-33-个人性格(personal character)

    很多好的编程做法都能减轻你的大脑灰质细胞(指脑力)的负担. 将系统"分解",是为了使之易于理解("设计的层次"). 进行审查.评审和测试正是为了减少人为失误.如 ...

  3. maven用变量的方法统一管理jar包版本

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. 微信小游戏 交互接口的使用 wx.showToast wx.showLoading

    在小游戏中,会有如下图的提示窗口,这些可以使用微信提供的交互接口实现. 使用loading等待的接口.mask=true表示遮罩,防止等待时点击其他按钮触发其他操作导致异常. wx.showLoadi ...

  5. Unity性能优化之Draw Call（转）

    Unity(或者说基本所有图形引擎)生成一帧画面的处理过程大致可以这样简化描述:引擎首先经过简单的可见性测试,确定摄像机可以看到的物体,然后把这些物体的顶点(包括本地位置.法线.UV等),索引(顶点如 ...

  6. iOS - 开发一套代码多个app展示不同图标和名称

    引言 公司项目重构之后,有了相对比较完善的开发体系,首先git分支分为日常.预发.生产三个主要分支,开发阶段都在日常(daily)分支下开相应功能的feature分支,开发完再合并. 我的iOS工程需 ...

  7. iOS - Block产生Memory Leaks循环引用导致的内存泄漏以及解决方案

    在ARC(自动引用技术)前,Objective-c都是手动来分配释放 释放 计数内存,其过程非常复杂. ARC技术推出后,貌似世界和平了很多,但是其实ARC并不等同于Java或者C#中的垃圾回收,AR ...

  8. linux文件归档脚本

    #!/bin/bash range= dir="/app/xx/logs" bak_dir="/app/xx/logs_archive" cd $dir $ra ...

  9. OpenCV Cut Image via ROI 根据兴趣区域剪裁图片

    我们在使用OpenCV时,有时候需要对现有图片剪裁,比如只需要一个小窗口中的内容,那么我们可以通过OpenCV的兴趣区域 Region of Interest (ROI) 来很轻易的实现,操作也很简单 ...

  10. Pandas的index属性

    我们在统计数据的长度或者个数,不用统计去专门获取数值,而是用index这个数据获取即可,DataFrame的index直接就是最前面的索引号,如果要统计列的个数,使用DataFrame.colums获 ...