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

    yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...

  2. Quartz-第三篇 quartz-misfire 错失，补偿执行

    1.问题:使用pauseJob()后,再使用resumeJob(). Job如果中间时间足够短,默认会将之前错失的次数执行回来.这个问题的原因是执行调度策略的问题,quartz框架默认会将错失的执行次 ...

  3. C#WebApi自动生成文档

    1.效果图 2.在webApi项目,打开Nuget,搜索WebApiTestClient,安装WebApiTestClient,注意是给HelpPage的 3.打开引入WebApiTestClient ...

  4. PHP 堆 栈 数据段 代码段 存储的理解

    对象在PHP里面和整型.浮点型一样,也是一种数据类,都是存储不同类型数据用的, 在运行的时候都要加载到内存中去用,那么对象在内存里面是怎么体现的呢? 内存从逻辑上说大体上是分为4段,栈空间段.堆空间段 ...

  5. docker下部署kafka集群(多个broker+多个zookeeper)

    网上关于kafka集群的搭建,基本是单个broker和单个zookeeper,测试研究的意义不大.于是折腾了下,终于把正宗的Kafka集群搭建出来了,在折腾中遇到了很多坑,后续有时间再专门整理份搭建问 ...

  6. django项目学习之异步框架celery

    最近用django一个网上商城项目的时候用两个扩展,感觉还不错,所以在此记录一下. 首先来说下celery,celery是一个处理异步任务的框架,需要下载celery包,一般在项目需要进行耗时操作的时 ...

  7. python中虚拟环境virtualenvwrapper的安装和使用

    虚拟环境为什么需要虚拟环境:       到目前为止,我们所有的第三方包安装都是直接通过 pip install xx 的方式进行安装的,这样安装会将那个包安装到你的系统级的 Python 环境中.但 ...

  8. SpringMVC源码解析

    一:springmvc运行过程: 1. dispatcherServlet 通过 HandlerMapping 找到controller2. controller经过后台逻辑处理得到结果集modela ...

  9. go & log

    更多日志库 https://github.com/golang/glog github.com/astaxie/beego/logs ... 这里有一个讨论 Golang的log包哪个好用? 参考 G ...

  10. java语法糖：（1）可变长度参数以及foreach循环原理

    语法糖 语法糖:是一种几乎每种语言或多或少都提供过的一些方便程序员开发代码的语法,它只是编译器实现的一些小把戏罢了,编译期间以特定的字节码或者特定的方式对这些语法做一些处理,开发者就可以直接方便地使用 ...