css3之水波效果

本文轉載自查看原文 2019-08-13 14:49 1034 css/ Css 部分

這些效果可謂多種多樣，當然用canvas、svg也都能實現奈何對這些有不熟悉（尷尬），不過咱們用css來寫貌似也沒想象中的那么難吧。

一懸浮球水波效果

效果圖

css

.container {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #e787e7;
            background: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 5px;

            overflow: hidden;
        }
        .wave {
            position: relative;
            width: 100px;
            height: 100px;
            background-image: linear-gradient(-180deg, #3b7bdb 13%, #4d6fdf 91%);
            border-radius: 50%;
        }
        .wave-mask {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 50%;
            border-radius: 40%;
            background-color: rgba(212, 24, 24, 0.9);
            transform: translate(-50%, -70%) rotate(0);
            animation: toRotate 10s linear -5s infinite;
            z-index: 20;

            background-color: rgba(255, 255, 255, 0.9);
        }
        @keyframes toRotate {
            50% {
                transform: translate(-50%, -70%) rotate(180deg);
            }
            100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }

View Code

樣式不多，加入了css3動畫

html

<body>
        <div class="container">
             <div class="wave"></div>
             <div class="wave-mask"></div>
        </div> 
</body>

dom元素只有3個div，內容不是很復雜，想必看一下都有所了解吧

拓展

這種效果也可作為一個動態的進度條，這樣是不是感覺很酷炫呢，下面就不放code了，補一個語言提示，我們發現在dom里蒙層節點

.wave-mask(div)的top值，可以嘗試一下動態的控制（top）值，在觀察一下水波球的變化，這一步不用寫代碼在控制台就可以實現，好了現在你也可以去嘗試了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3水波紋效果 css3水波紋效果 CSS3實現水波紋效果 css3動畫水波紋、波浪 css 滾動視差之水波紋效果 css實現水波紋效果 css3箭頭效果 CSS3 晃動效果 CSS3效果：多效果組合 css3 圓角效果

css3之水波效果

一 懸浮球水波效果

效果圖

css

html

拓展

免責聲明！

一懸浮球水波效果