CSS如何实现div闪烁

醉折花枝作酒筹
Lepaskan: 2023-01-04 09:35:53
asal
6701 orang telah melayarinya

在css中,可以使用“@keyframes”规则和animation属性来实现div闪烁效果;只需要先使用“@keyframes”创建具有闪烁效果的动画;然后使用animation属性设置动画所需时间,速度以及次数等。

CSS如何实现div闪烁

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

效果图如下

这里写图片描述

代码如下

@keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .headerBox { color: #fff; padding: 10px; font-size: 15px; height: 60px; animation: fade 600ms infinite; -webkit-animation: fade 600ms infinite; }
Salin selepas log masuk

给div设置headerBox 样式即可

推荐学习:css视频教程

Atas ialah kandungan terperinci CSS如何实现div闪烁. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!