css动画

依窗看落花；

已于 2023-08-24 16:50:27 修改

阅读量34

点赞数

文章标签： css 前端 javascript css3

于 2023-08-24 16:50:06 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_60487574/article/details/132478002

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sc-state {
            display: inline-block;
            background: red;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .sc-status-processing {
            position: relative;
        }

        .sc-status-processing:after {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            content: '';
            animation: warn 1.2s ease-in-out infinite;
        }

        @keyframes warn {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }

            30% {
                opacity: 0.7;
            }

            100% {
                transform: scale(2.5);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="sc-state sc-status-processing"></div>
</body>

</html>

依窗看落花；

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css动画

【代码】css动画。
复制链接

扫一扫

依窗看落花； CSDN认证博客专家 CSDN认证企业博客

码龄3年

8: 原创

200万+: 周排名

151万+: 总排名

884: 访问

: 等级

80: 积分

0: 粉丝

0: 获赞

5: 评论

0: 收藏

私信

关注

热门文章

最新评论

0-24小时折线图
CSDN-Ada助手: 恭喜您完成了第8篇博客！标题“0-24小时折线图”听起来非常有趣。您的持续创作让我感到钦佩，您的努力和坚持可见一斑。在未来的创作中，或许您可以考虑加入更多的数据分析和趋势预测，这将为读者提供更多有益的信息。希望您能继续保持谦虚的态度，不断努力提升自己的创作技巧。期待您的下一篇博客！
vue3中按需引入echarts
CSDN-Ada助手: 恭喜您写了第7篇博客！看到您探讨了在Vue3中按需引入echarts的主题，我觉得您的内容非常有价值。对于前端开发者来说，了解如何按需引入echarts是非常实用的技能。我希望能够看到更多关于Vue3的博客，比如如何在Vue3中优化性能或者如何使用新的Composition API等等。但是，这只是个人建议，希望能够帮助到您。继续加油，期待您的下一篇作品！
vue搜索关键字高亮
CSDN-Ada助手: 恭喜您写了第6篇博客！标题为“vue搜索关键字高亮”，这个主题非常实用和有趣。在现代化的网页应用中，搜索功能的重要性不言而喻，而通过vue实现关键字高亮功能，无疑能够提升用户体验和搜索效果。我非常期待能够阅读您的博客，并从中学到更多关于vue搜索功能的知识。在下一步的创作中，我建议您可以进一步探索如何在vue中实现其它搜索相关的功能，比如搜索过滤、自动完成等。这些功能在现代化的网页应用中也非常重要，而且会给读者带来更多实用价值。希望您能够继续保持创作的热情，并分享更多有关vue搜索功能的技巧和经验。期待您的下一篇博客！
模拟平行四边形案例
CSDN-Ada助手: 恭喜您写了第四篇博客，标题为“模拟平行四边形案例”！您的创作热情令人钦佩。通过分享这个案例，您不仅向读者展示了平行四边形的概念，还给出了模拟平行四边形的实际应用。这种实践性的博文对于读者来说无疑是非常有价值的。在下一步的创作中，我建议您可以进一步拓展这个主题，比如探讨不同类型的平行四边形案例，或者分享一些与平行四边形相关的问题解决方法。此外，您还可以考虑添加一些图表或示意图来更加生动地展示您的观点。希望这些建议对您有所帮助，期待您未来更多博客的分享！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
css动画
CSDN-Ada助手: 恭喜你写了第5篇博客！标题为“css动画”，这是一个很有趣的主题。你对CSS动画的探索真的令人印象深刻。我非常欣赏你对持续创作的热情，每篇博客都带给读者新的知识和灵感。对于下一步的创作，我想谦虚地提个建议，不妨考虑添加一些实际案例或者示例代码，这样读者可以更好地理解和运用你所分享的CSS动画技巧。期待你的下一篇作品！

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。