在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小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. 8.FTP后门命令执行----Samba命令执行----VMware安装kali----多终端显示

    FTP后门命令执行 再次声明,最近听闻不得教受工具使用等言论. 我敢打包票,网络空间安全一级学科的老师和学生是不会说这句话的.未知攻,焉知防. 有工具来检测自己和玩弄它,是幸运的. 犯罪者不会给你提供 ...

  2. 【Linux开发】【DSP开发】利用CCS6.1生成out文件的同时生成bin文件

    [Linux开发][DSP开发]利用CCS6.1生成out文件的同时生成bin文件 标签:[DSP开发] [Linux开发] 尝试在windows上安装的CCS6.1开发AM4378-Linux下的应 ...

  3. VS2017使用dotnet命令

    添加引用Microsoft.EntityFrameworkCore.Tools 添加引用后提示未找到命令“dotnet ef”向csprog文件添加如下节点 <ItemGroup> < ...

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

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

  5. realloc ------ 扩大malloc得到的内存空间

    char* p = malloc(1024);char* q = realloc(p,2048); 现在的问题是我们应该如何处理指针 p. 刚开始按照我最直观的理解,如果就是直接将 p = NULL; ...

  6. 《剑指offer》面试题23 从上往下打印二叉树 Java版

    注意层序遍历的时候对每一层的处理方式可能不同,这里把每一层的元素保存进一个List中了,那么就需要记录每一层的数量. public List<List<Integer>> se ...

  7. ubuntu14 teamviewer使用

    一. 软件安装 1.1. 下载.deb文件 下载13版本的,不要下载最新版本的 1.2. 环境配置 <1>. sudo dpkg --add-architecture i386 <2 ...

  8. [2019多校联考(Round 6 T3)]脱单计划 (费用流)

    [2019多校联考(Round 6 T3)]脱单计划 (费用流) 题面 你是一家相亲机构的策划总监,在一次相亲活动中,有 n 个小区的若干男士和 n个小区的若干女士报名了这次活动,你需要将这些参与者两 ...

  9. Redis集群,备份,哨兵机制

    原文:https://blog.csdn.net/zy345293721/article/details/87536144 1.集群        先来简单了解下redis中提供的集群策略, 虽然re ...

  10. 05: zabbix 监控配置

    目录:zabbix其他篇 01: 安装zabbix server 02:zabbix-agent安装配置 及 web界面管理 03: zabbix API接口 对 主机.主机组.模板.应用集.监控项. ...