在我做公司官网的时候也会帮着写一些游戏的静态页，今天产品要求为了突出一个按钮，他要有颜色的变化而且要变大变小，然后我就在网上搜了下呼吸灯和其他的案例，写了个小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视频教程！
相关推荐：
Atas ialah kandungan terperinci CSS3动画@keyframes图片变大变小颜色变化. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tutorial css3
Apakah sifat kecerunan css3?
win10 menyambung ke pencetak kongsi
Penjelasan terperinci tentang fail konfigurasi kuarza
Cara membuat blog
tahap pengasingan transaksi lalai mysql
Apakah pernyataan kawalan aliran java?
Fungsi utama unit aritmetik dalam mikrokomputer adalah untuk melaksanakan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
