CSS3 animation @keyframes picture becomes larger, smaller and color changes-CSS Tutorial-php.cn

CSS3 animation @keyframes picture becomes larger, smaller and color changes

青灯夜游

Release： 2018-10-10 16:45:14

forward

3420 people have browsed it

When I was working on the company’s official website, I would also help write some static pages for the game. Today’s product required that in order to highlight a button, it should have color changes and become larger and smaller. Then I searched on the Internet. For the breathing lamp and other cases, I wrote a small damo, which looks a bit magical.

html:

<body>
    <p class="color"></p>
    <img class="change" src="img/dongtai.png"/>
</body>

Copy after login

The principle is this: body is positioned relatively, .change is positioned absolutely above .color, the size is the same as .color, the first refresh displays .color first, and then. The transparency of change gradually changes, and at the same time, the sizes of both of them are also changing at the same time

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;
	}
}

Copy after login

The sizes of .color and .change are from width: 308px, height 202px - ->Change to width 358px, height 174px.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS3 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##CSS3 Online Manual

##div/css graphic tutorial

css3 special effects code collection

The above is the detailed content of CSS3 animation @keyframes picture becomes larger, smaller and color changes. For more information, please follow other related articles on the PHP Chinese website!