animation效果
添加一个颜色灰渐变的动画效果。
<!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效果的更多相关文章
- 动画---图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...
- 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: ...
- Animation
Animation 效果 用法 1.非常简单,导入两个文件(UIView+SetRect) (UIView+ImageEffects) 源码 github源码:https://github.com/m ...
- Android实现左右滑动效果
本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...
- Android 实现左右滑动效果ViewFlipper终结【转】
本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来 ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...
- css3动画:transition和animation
概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...
- 背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)
MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...
- android开发之Animation(五)
android开发之Animation的使用(五) 本博文主要讲述的是Animation中的AnimationLisenter的用法,以及此类的一些生命周期函数的调用,代码实比例如以下: MainAc ...
随机推荐
- 熟悉使用ConfigParser库读写配置文件
Python的配置文件 配置文件 setting.ini文件是一个纯文本 [DataBase1] username = admin passwors = root [DataBase2] hostna ...
- 记住密码, 不需要默认填写的input框中设置 autocomplete="new-password"
- stopImmediatePropagation和stopPropagation (事件、防止侦听)
参考: ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始 actionscript宝典 一.事件模型 egret中的事件模型和flash是一样的,但 ...
- [工具] TreeSizeFree 查看每个文件夹的大小
下载 URL :http://www.jam-software.com/treesize_free/ TreeSize Free这个软件可以非常简单方便的查看到每个文件夹的大小,而目录树的查看方式则让 ...
- Mac下使用Fiddler(转载园友小坦克)
Fiddler是用C#开发的. 所以Fiddler不能在Mac系统中运行. 没办法直接用Fiddler来截获MAC系统中的HTTP/HTTPS, Mac 用户怎么办呢? Fiddler可以允 ...
- 洛谷P1117 优秀的拆分【Hash】【字符串】【二分】【好难不会】
题目描述 如果一个字符串可以被拆分为AABBAABB的形式,其中 A和 B是任意非空字符串,则我们称该字符串的这种拆分是优秀的. 例如,对于字符串aabaabaaaabaabaa,如果令 A=aabA ...
- HDU 1789 - Doing Homework again - [贪心+优先队列]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1789 Time Limit: 1000/1000 MS (Java/Others) Memory Li ...
- grafana,graphite,influxdb with docker
++++++++++++++++++++++++ sudo docker pull tutum/influxdb sudo docker run -d -p 8083:8083 -p8086:8086 ...
- TcMalloc的介绍以及Windows下安装使用
本文由博主(SunboyL)原创,转载请注明出处:http://www.cnblogs.com/xsln/p/Introduction_TcMalloc.html 介绍: TcMalloc(Threa ...
- you
抑制幽门螺旋杆菌: 1.西兰花 鲜嫩的西兰花蔬菜,含有一种物质叫异硫氰酸酯,这种物质就是幽门螺杆菌的 " 天敌 ",可达到百分百抑制的作用,甚至还有医生给了它一个最强天然抗生素的称 ...