使用css實現水波紋效果

時間 2019-11-30

標籤使用 css 實現波紋效果欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css"> .water-waves{ margin:0 auto; overflow:hidden; position: relative; width:100px; height:100px; border-radius:50%; border:1px solid silver; text-align:center; line-height:50px; animation:water-waves linear infinite; } .water-wave1{ position: absolute; top:40%; left:-25%; background:#33cfff; opacity: 0.7; width:200%; height:200%; border-radius:40%; animation: inherit; animation-duration:5s; } .water-wave2{ position: absolute; top:45%; left:-35%; background:#0eaffe; opacity: 0.5; width:200%; height:200%; border-radius:35%; animation: inherit; animation-duration:7s; } .water-wave3{ position: absolute; top:50%; left:-35%; background:#0f7ae4; opacity: 0.3; width:200%; height:200%; border-radius:33%; animation: inherit; animation-duration:11s; } @keyframes water-waves{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style>
<body>
    <div class="water-waves">
        <div class="water-wave1"></div>
        <div class="water-wave2"></div>
        <div class="water-wave3"></div>
    </div>
</body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。