给我三行代码，还你一个海洋-致敬中国第四届CSS大会

最新推荐文章于 2021-06-03 19:46:05 发布

weixin_33753003

最新推荐文章于 2021-06-03 19:46:05 发布

阅读量130

点赞数

原文链接：https://juejin.im/post/5abf90236fb9a028c368ea49

版权

今天CSS大会上腾讯王乐带来的分享：用css实现的一个海浪，我会后觉得有意思，自己实现了一边，效果如下：

代码很简单，只有几行代码。会上我只理解了思想，代码没记住，于是我写了模拟代码，海浪步骤没有原味的协调，请看原版（目前貌似还没地方看）；

HTML

<html>
<body>
<div class="title">致敬第四届中国CSS大会</div>
<div class="container">
    <div class="wp">
        <img class="boat" src="./146267.svg" alt="">
        <div class="circle"></div>
    </div>
</div>
</body>
</html>
复制代码

漂洋过海的船是我加的 svg的地址

CSS代码

<style type="text/css">

        html,body{
            margin: 0;
            padding: 0;
            background-color: #000;
        }

        .title{
            color: #fff;
            text-align: center;
            font-size: 28px;
            margin-top: 50px;
        }

        .wp{
            content: '';
            display: block;
            width: 240px;
            height: 240px;
            overflow: hidden;
            background-color: #4ac4f0;
            border-radius: 50%;
        }

        .circle{
            width: 400px;
            margin-top: -220px;
            margin-left: -80px;
            height: 400px;
            transform-origin: 49% 47%;
            border-radius: 50%;
            background-color: #fff;
            animation: 3s rotate linear infinite;
        }

        .circle::after{
            content: '';
            display: block;
            width: 400px;
            height: 400px;
            transform-origin: 49% 47%;
            border-radius: 50%;
            background-color: #fff;
            animation: 3s rotate linear infinite;
            margin-left: 10px;
            opacity: 0.7;
        }

        .boat{
            position: absolute;
            height: 80px;
            width: 80px;
            left: 88px;
            z-index: 1;
            top: 113px;
            animation: 3s float linear infinite;
        }

        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            } to {
                  transform: rotate(360deg);
              }
        }

        @keyframes float {
            0% {
                top: 110px;
                transform: rotate(-10deg);
            }
            50% {
                top:80px;
                transform: rotate(10deg);
            }
            100%{
                top:110px;
                transform: rotate(-10deg);

            }
        }

    </style>
复制代码

看我辛苦的份上给我github一个star可好?

weixin_33753003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给我三行代码，还你一个海洋-致敬中国第四届CSS大会

今天CSS大会上腾讯王乐带来的分享：用css实现的一个海浪，我会后觉得有意思，自己实现了一边，效果如下：代码很简单，只有几行代码。会上我只理解了思想，代码没记住，于是我写了模拟代码，海浪步骤没有原味的协调，请看原版（目前貌似还没地方看）；HTML&lt;html&gt;&lt;body&gt;&lt;div class="title"&gt;致敬第四届中国CSS大会&lt;/div&...
复制链接

扫一扫