CSS3动画@keyframes图片变大变小颜色变化

来源：懂视网责编：小采时间：2020-11-02 22:08:45

CSS3动画@keyframes图片变大变小颜色变化

CSS3动画@keyframes图片变大变小颜色变化:在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小damo，看着还有些魔性嘞。html：<body> <p class="color&

推荐度：

点击下载本文 文档为doc格式

导读CSS3动画@keyframes图片变大变小颜色变化:在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小damo，看着还有些魔性嘞。html：<body> <p class="color&

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

html：

<body>
 <p class="color"></p>
 <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图片变大变小颜色变化

推荐度：

点击下载本文 文档为doc格式

标签：图片变大动画

热门焦点

CSS3动画@keyframes图片变大变小颜色变化

CSS3动画@keyframes图片变大变小颜色变化

CSS3动画@keyframes图片变大变小颜色变化

最新推荐

猜你喜欢

热门推荐