Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS如何实现div闪烁

醉折花枝作酒筹
Freigeben: 2023-01-04 09:35:53
Original
6655 人浏览过

在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;
}
Nach dem Login kopieren

给div设置headerBox 样式即可

推荐学习:css视频教程

以上是CSS如何实现div闪烁的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!