CSS3动画@keyframes图片变大变小颜色变化
在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小damo，看着还有些魔性嘞。
html：
<body>
<div class="color"></div>
<img class="change" src="img/dongtai.png"/>
</body>
原理是这样的：body相对定位，.change绝对定位到.color上面，大小和.color一样，第一次刷新先显示.color，然后.change的透明度逐渐改变，与此同时，他们两个的大小也同时在改变
CSS
body{
position: relative;
}
.color{width:308px;height: 174px;background-color: lightskyblue;}
.change{
position: absolute;
top: 0;
left: 0;
animation-name: mychange; /*动画的名字*/
animation-duration: 1000ms; /*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
animation-iteration-count: infinite; /*定义动画的播放次数，这里是无限播放*/
animation-direction: alternate; /*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
}
.color{
animation-name: mycolor;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mychange{ /*mychange是动画的名字上面有用到*/
0% {
opacity: .2;
width: 308px;
height: 174px;
}
100% {
opacity: 1;
width: 358px;
height: 202px;
}
}
@keyframes mycolor{
0% {
width: 308px;
height: 174px;
}
100% {
width: 358px;
height: 202px;
}
}
.color和.change的大小都是从宽：308px，高202px -->变化到宽358px，高174px。
好啦，记录完了，
CSS3动画@keyframes图片变大变小颜色变化的更多相关文章
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- Swift基础之两指拉动图片变大变小
我们在使用APP的时候,有时会发现有些图片可以通过两指进行放大.缩小,今天就实现这样的一种效果,比较简单,不喜勿喷.... var imageVi:UIImageView! = nil var ...
- 【技术贴】xp任务栏字体变大变小
今天远程到服务器上,发现任务栏字体变小了,百度了很久,发现百度就是个渣渣,什么答案都搜不到.就自己摸索了一下. 方法一: 桌面右击属性-外观-字体大小, 下拉匡 方法二 :桌面右击[属性]-[外观]- ...
- CSS 居中 可随着浏览器变大变小而居中
关键代码: 外部DIV使用: text-align:center; 内部DIV使用: margin-left:auto;margin-right:auto 例: <div style=" ...
- UIlabel文字大小自适应label宽度变大变小
label.adjustsFontSizeToFitWidth = YES; //默认no
- Css3动画-@keyframes与animation
一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...
- CSS3 动画 @keyframes
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 以及 JavaScript. 如下动画,常用于手机端,提示用户往下拖动的渐隐渐出效果. Demo 关键CSS代码 1. 给 ...
- Less 创建css3动画@keyframes函数
封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @ ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
随机推荐
- 【Qt开发】 V4L2_CAP_VIDEO_OVERLAY与V4L2_CAP_VIDEO_CAPTURE的区别
原文地址http://www.cnblogs.com/tlm1992/archive/2012/06/12/2545772.html 这部分spec的内容没有全看懂,但是根据FSL的代码能知道这其中的 ...
- PHPFPM模式三种运行模式
1.static模式 static模式始终会保持一个固定数量的子进程,这个数量由pm.max_children定义. 2.dynamic模式 子进程的数量是动态变化的,启动时,会生成固定数量的子进 ...
- 获取kafka最新offset-scala
无论是在spark streaming消费kafka,或是监控kafka的数据时,我们经常会需要知道offset最新情况 kafka数据的topic基于分区,并且通过每个partition的主分区可以 ...
- Android的Monkey和MonkeyRunner
本文部分解释性语段摘自网络百科或其它BLOG,语句内容网络随处可见,也不知道谁是初始原创,便不再署名出处,如有雷同,还请见谅. Monkey 什么是Monkey Monkey是Android中的一个命 ...
- Comet OJ C1076 [Contest #4]求和
题目 首先我们可以通过经典容斥转化为计算\([1,x]\)的答案. 现在我们考虑一个数的个位对答案的贡献. 每做一次操作都会让个位加上十位然后取模,直到只有个位为止. 我们发现这个过程中,个位数前的系 ...
- 请写出一段Python代码实现删除一个list里面的重复元素？
方法1:使用set函数 s=set(list),然后再list(s) 方法2:append def delList(L): L1 = [] for i in L: if i not in L1 ...
- 区块链开源实现hyperledger fabric架构详解
hyperledger fabric是区块链中联盟链的优秀实现,主要代码由IBM.Intel.各大银行等贡献,目前v1.1版的kafka共识方式可达到1000/s次的吞吐量.本文中我们依次讨论:区块链 ...
- Redis---Redis与Memcached
4.Redis与Memcached 两者都是非关系型内存键值,主要有以下不同: 数据类型 Memcached仅支持字符串类型,而Redis支持五种不同的数据类型,可以更灵活地解决问题. 数据持 ...
- Xdex（百度版）脱壳工具基本原理
[原创]Xdex(百度版)脱壳工具基本原理作 者: sherrydl时 间: 2015-12-13,10:52:45链 接: http://bbs.pediy.com/showthread.php?t ...
- vuex辅助函数和vuex5个属性
在上篇中,我们可以知道如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名.显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的. 1. ...