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。

 好啦,记录完了,

转载于:https://www.cnblogs.com/eyed/p/7885982.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值