CSS实现简单动态渐变闪烁效果

最新推荐文章于 2024-10-02 23:33:51 发布

原创最新推荐文章于 2024-10-02 23:33:51 发布 · 1.8w 阅读

6 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一组CSS样式的练习案例，包括了基本的选择器应用、背景颜色设置、动画效果实现等。通过这些实例，读者可以更好地理解CSS的布局、动画及过渡效果的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS练习用例：


.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@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; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}


<div id="deviceready" class="blink">
     <p class="event received">Device is Ready</p>
</div>