在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小damo，看着还有些魔性嘞。

html：

  1. <body>
  2.     <div class="color"></div>
  3.     <img class="change" src="img/dongtai.png"/>
  4. </body>

　原理是这样的：body相对定位，.change绝对定位到.color上面，大小和.color一样，第一次刷新先显示.color，然后.change的透明度逐渐改变，与此同时，他们两个的大小也同时在改变

CSS

  1.                         body{
  2. 				position: relative;
  3. 			}
  4. 			.color{width:308px;height: 174px;background-color: lightskyblue;}
  5. 			.change{
  6. 				position: absolute;
  7. 				top: 0;
  8. 				left: 0;
  9. 				animation-name: mychange;			/*动画的名字*/
  10. 				animation-duration: 1000ms;		/*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
  11. 				animation-iteration-count: infinite;		/*定义动画的播放次数，这里是无限播放*/
  12. 				animation-direction: alternate;			/*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
  13. 			}
  14. 			.color{
  15. 				animation-name: mycolor;
  16. 				animation-duration: 1000ms;
  17. 				animation-iteration-count: infinite;
  18. 				animation-direction: alternate;
  19. 			}
  20. 			@keyframes mychange{　　　　/*mychange是动画的名字上面有用到*/
  21. 				0% {
  22. 					opacity: .2;
  23. 					width: 308px;
  24. 					height: 174px;
  25. 				}
  26. 				100% {
  27. 					opacity: 1;
  28. 					width: 358px;
  29. 					height: 202px;
  30. 				}
  31. 			}
  32. 			@keyframes mycolor{
  33. 				0% {
  34. 					width: 308px;
  35. 					height: 174px;
  36. 				}
  37. 				100% {
  38. 					width: 358px;
  39. 					height: 202px;
  40. 				}
  41. 			}

　　.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. Visdom可视化

    Visdom是基于Pytorch的可视化工具 安装方式: pip install visdom 因为Visdom本质上是一个Web服务器,把数据渲染到网页上,因此首先需要运行这个 服务器,如下: py ...

  2. 【Qt开发】状态栏设置

    1.在Qt 里面,状态栏显示的信息有三种类型:临时信息.一般信息和永久信息.  其中,临时信息指临时显示的信息,比如QAction 的提示等,也可以设置自己的  临时信息,比如程序启动之后显示Read ...

  3. dbvisualizer安装

    1. 下载DbVisualizer安装包. 2.解压. 无论是哪个版本的dbvisualizer破解版, 都可以找到安装程序(例dbvis_windows-x64_10_0_10.exe), dbvi ...

  4. 第二周JAVA总结

    学海无涯,在学习这件事情上得用点心了

  5. sql limit order by and where

    1 sql limit limit size,返回前size行. limit offset , size,返回offset开始的size行,offset从0行开始. 2 sql limit with ...

  6. linux的进程间通信概述

    一 进程间通信 1.1. linux内核提供多种进程间通信机制 a. 无名管道和有名管道 b. SystemV IPC:信号量.消息队列.共享内存 c. Socket域套接字 d. 信号 1.2. 无 ...

  7. 数塔 Easy

    在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少?  已经告诉你了,这是个DP的题 ...

  8. 小a的轰炸游戏（差分，前缀和）

    题目传送门 题意: 给出一个n*m的矩形,然后有两个操作. 1操作,对一个给出的菱形,对菱形范围内的东西进行+1. 2操作,对一个上半菱形的区域,进行+1操作. 最后求矩形内各个数的异或和. 思路: ...

  9. vue data数据变化 页面数据不更新问题

    问题: <template> <div class="container"> <div v-for="(item, index) in ar ...

  10. iOS之Run Loop详解

    转自标哥的技术博客(www.henishuo.com) 前言 做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一 ...