[CSS]用CSS animation实现圆圈向外扩展的动画效果

最新推荐文章于 2024-07-14 13:35:37 发布

change66

最新推荐文章于 2024-07-14 13:35:37 发布

阅读量3.1k

点赞数 1

分类专栏： HTML&CSS&JS

本文链接：https://blog.csdn.net/change66/article/details/118959563

版权

HTML&CSS&JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用CSS3的动画关键帧@keyframes创建一个向外扩散的圆圈动画效果。代码示例中，一个红色的圆圈在中心，周围有两个白色的圆圈进行周期性的放大和缩小，形成涟漪般的视觉效果。动画通过调整透明度和缩放比例，实现了从中心向外的动态扩散。此技术可用于网页交互元素，增加用户体验。

摘要由CSDN通过智能技术生成

圆圈实现向外扩展的动画效果，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <title> CSS3实现涟漪呼吸扩散动画效果 </title>
    
</head>
<style>
body{
    background: #ccc;
}
.live{
    border: 1px solid red;
   position: relative;
   width: 100px;
   height: 100px;
   margin:50px auto;
}
.live .span1{
   border:1px solid blue;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   z-index: 0;
   margin-top: 0px;
}
@keyframes animate {
    0%{
        transform: scale(1);
        opacity: 0.5;  
    }
    50%{
        transform: scale(1.5);  
        opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
    }
    100%{
        transform: scale(1);
        opacity: 0.5;
    }
}
.live span{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    bottom: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-animation: animate 3s linear infinite;
    z-index: -1;
}
.live span:nth-child(2){
    -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
}
</style>
<body>
    <div class="live">
         <!-- 这里的p标签可以换成一个img标签，用一个圆形的图片放在中间，周围实现扩散的效果图-->
         <!-- <img src="" alt=""> -->
         <p class="span1"></p>
         <span></span>
         <span></span>
     </div>
 <script type="text/javascript">
 </script>
</body>
</html>

change66

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
[CSS]用CSS animation实现圆圈向外扩展的动画效果

圆圈实现向外扩展的动画效果，代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/
复制链接

扫一扫