在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小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图片变大变小颜色变化的更多相关文章

  1. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  2. Swift基础之两指拉动图片变大变小

    我们在使用APP的时候,有时会发现有些图片可以通过两指进行放大.缩小,今天就实现这样的一种效果,比较简单,不喜勿喷.... var imageVi:UIImageView! = nil    var ...

  3. 【技术贴】xp任务栏字体变大变小

    今天远程到服务器上,发现任务栏字体变小了,百度了很久,发现百度就是个渣渣,什么答案都搜不到.就自己摸索了一下. 方法一: 桌面右击属性-外观-字体大小, 下拉匡 方法二 :桌面右击[属性]-[外观]- ...

  4. CSS 居中 可随着浏览器变大变小而居中

    关键代码: 外部DIV使用: text-align:center; 内部DIV使用: margin-left:auto;margin-right:auto 例: <div style=" ...

  5. UIlabel文字大小自适应label宽度变大变小

    label.adjustsFontSizeToFitWidth = YES;   //默认no

  6. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  7. CSS3 动画 @keyframes

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 以及 JavaScript. 如下动画,常用于手机端,提示用户往下拖动的渐隐渐出效果. Demo 关键CSS代码 1. 给 ...

  8. Less 创建css3动画@keyframes函数

    封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @ ...

  9. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

随机推荐

  1. 【windows】windows安全基础

    windows安全基础 安全主体 security principal 是可以进行身份验证的实体. 哪个安全主体在要求访问?这个维度可以是用户,计算机和进程.一旦确认以后,系统就会发放SID. 例子: ...

  2. 7.安装pycharm----导入Nmap模块----netcat反向shell----metasploitable靶机环境

    安装pycharm www.jetbrains.com/pycharm/ tar -zxvf p补全 ls cd p补全 ls cd bin ls ./pycharm.sh 新建项目 pythonRo ...

  3. Charles抓包过滤的四种方式

    日常测试中,经常要抓包看请求的request,response是不是传的对,返回的字段值对不对,众多的请求中如何找到自己想要的请求,就需要过滤请求,Charles有4种过滤方式,用那一种都可以,看个人 ...

  4. 【监控实践】【4.2】perfmon监控性能计数器（基于typeperf命令）

    关键词:typeperf typeperf 命令 使用示例: 案例1:#使用typeperf收集windows cpu.内存.硬盘性能 #使用typeperf收集windows cpu.内存.硬盘性能 ...

  5. P1141零一迷宫

    这是一道对于除了我之外其他人都十分简单的搜索题,我终于在这个夜里搞会了. 首先其问可以到达多少个点,并不是走一次可以最多经过几个点,这就解释了为什么不需要回溯,并且递归边界则是让其全部走完即可.于是便 ...

  6. 卸载yum-mysql

    注意事项:1. 卸载yum MYSQLsystemctl status mysqlsystemctl stop mysqlsystemctl disable mysqld rpm -qa | grep ...

  7. kotlin学习（8）泛型

    泛型的声明 与Java不同的是,Kotlin要求类型实参要么被显示的说明,要么能被编译器推导出来.因为Java在1.5版本才引入泛型,所以为了兼容过去的版本,可以不直接声明List类型的变量,而不说明 ...

  8. 通过编写串口助手工具学习MFC过程——（二）通过“打开串口”按钮了解基本操作

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  9. PCIe基础篇（二）、协议详解

    一个完整的PCIe协议体系结构包括应用层.事务层(Transaction Layer).数据链路层(Data Link Layer)和物理层(Physical Layer).其中,应用层由用户需要自行 ...

  10. Paper Reading

    Paper Reading_SysML Paper Reading_Computer Architecture Paper Reading_Database Paper Reading_Distrib ...