Home >Web Front-end >CSS Tutorial >CSS3 animation @keyframes picture becomes larger, smaller and color changes
CSS3 animation @keyframes picture becomes larger, smaller and color changes
- 青灯夜游forward
- 2018-10-10 16:45:143435browse
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>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;
}
}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
##div/css graphic tutorialcss3 special effects code collectionThe 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!