用CSS3实现水波动画

最新推荐文章于 2022-08-07 12:57:10 发布

joyouscola

最新推荐文章于 2022-08-07 12:57:10 发布

阅读量805

点赞数 2

分类专栏： CSS3 文章标签：前端

本文链接：https://blog.csdn.net/joyouscola/article/details/111938550

版权

本文介绍了如何使用CSS3创建一个看似复杂的水波动画效果。通过一个大div包含两个不规则形状的小div，并利用overflow: hidden及动画效果，简单几步就能实现百事可乐logo类似的视觉效果。

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

先看效果图

在这里插入图片描述

这个看上去就是一个百事可乐的一个logo，看上去挺难的，其实做起来蛮简单的，就是一个大的div里面套着两个div

<body>
    <div id="box">
        <div id="son1"></div>
        <div id="son2"></div>
    </div>
</body>

1、先制作一个蓝色的背景的盒子

#box{
   
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #1050F5;
            position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 150px);
        }

2、制作两个小div背景颜色为红色和白色

 #son1{
   
            width: 600px;
            height: 600px;
            background-color: white;
            position: absolute;
            top: calc(50% - 540px);
            left: calc(

最低0.47元/天解锁文章

joyouscola

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用CSS3实现水波动画

先看效果图这个看上去就是一个百事可乐的一个logo，看上去挺难的，其实做起来蛮简单的，就是一个大的div里面套着两个div<body> <div id="box"> <div id="son1"></div> <div id="son2"></div> </div></body>1、先制作一个蓝色的背景的盒子#box{ widt
复制链接

扫一扫

专栏目录