阅读 2621

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

今天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可好😂

文章分类
前端
文章标签