給我三行程式碼，還你一個海洋-致敬中國第四屆CSS大會

yitalalww發表於2019-02-13
行程CSS

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

相關文章