2. 程式人生 > >使用css實現水球效果

使用css實現水球效果

阿新 • • 發佈：2018-12-29

通過在制定overflow：hidden的元素上新增非常大圓形，而且圓形設定圓角，並不斷滾動，數量多了就可以顯示出水波效果

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes roll {
    form {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.shuiqiu {
    width: 200px;
    height: 200px;
    border-
 
radius: 50%;
    border: 5px solid #607d8b;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.shuiqiucontent {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: relative;
    overflow: hidden;
    margin: 3px;
    border-radius: 50%;
}
.shui {
    position: absolute;
 

    width: 1000px;
    height: 1000px;
    top: 100px;
    left: 50%;
    margin-left: -500px;
}
.shuiqiu:hover .shui1 {
    animation: roll 5s linear infinite;
}
.shuiqiu:hover .shui2 {
    animation: roll 7s linear infinite;
}
.shuiqiu:hover .shui3 {
    animation: roll 6s linear infinite;
}
.shuiqiu:hover .
 
shui4 {
    animation: roll 10s linear infinite;
}
.shuiqiu:hover .shui5 {
    animation: roll 8s linear infinite;
}
.shuiqiu:hover .shui6 {
    animation: roll 9.5s linear infinite;
}
.shui1 {
    border-radius: 45%;
    background: #607d8bbe;
    animation: roll 10s linear infinite;
}
.shui2 {
    border-radius: 46%;
    background: #607d8b9a;
    animation: roll 14s linear infinite;
}
.shui3 {
    border-radius: 47%;
    background: #607d8bab;
    animation: roll 12s linear infinite;
}
.shui4 {
    border-radius: 48%;
    background: #607d8b44;
    animation: roll 20s linear infinite;
}
.shui5 {
    border-radius: 49%;
    background: #607d8b9f;
    animation: roll 16s linear infinite;
}
.shui6 {
    border-radius: 50%;
    background: #607d8b38;
    animation: roll 19s linear infinite;
}
</style>
</head>
<body>
 
<div class="shuiqiu">
    <div class="shuiqiucontent">
        <div class="shui shui1"></div>
        <div class="shui shui2"></div>
        <div class="shui shui3"></div>
        <div class="shui shui4"></div>
        <div class="shui shui5"></div>
        <div class="shui shui6"></div>
    </div>
</div>
 
</body>
</html>

實現效果

相關推薦

使用css實現水球效果

通過在制定overflow：hidden的元素上新增非常大圓形，而且圓形設定圓角，並不斷滾動，數量多了就可以顯示出水波效果 <!DOCTYPE html> <html> <head> <style> @keyframes roll {

css實現愛心效果

htm meta mage gin pan ext abs div 七夕節 ------------------------------------- 今天是七夕節，作為單身狗 的博主，今天給大家帶來個 愛心效果，希望大家早日 脫單（手動滑稽） ---------

使用純css實現波浪效果

波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。 首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分

css實現特殊效果

htm style relative ins -c opacity 翻轉效果 rotate orange 二級導航翻轉效果：/*html*/<ul> <li>111</li> <li>222</li>

純css實現打字效果

idt strong htm rap 混合 實現 有時 append com 概述 很早以前就在別人的博客上面看到打字動畫了，覺得非常炫酷，以為是用js做的，找了半天也沒找到js在哪裏。今天看《css揭秘》，碰巧看到書上打字動畫的實現了，而且是純css實現的！我參考這本書把

純css實現氣泡效果

先上程式碼： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; background-color: #ffdce0; border-color: #cea0a5; displa

CSS 實現對號效果

實現對號效果，一種思路是利用現成的符號，直接在網上搜索到 √，插入頁面。另一種思路是本文要介紹的用 CSS 實現，思路是： 給塊級元素設定寬度和高度 設定元素相鄰的兩個 border 旋轉元素 HTML <div class="chec

css實現箭頭效果

實現箭頭的方法有多種，可以直接讓UI給一個圖示，也可以直接用css樣式來實現，以下是直接用樣式寫的，這裡面寫的是絕對定位，如不想引起樣式錯亂則需要用一個div包住。 1. 使用css，用兩個三角形疊加實現 html code： <a href="javascript:

CSS實現鏤空效果

效果原理 主要利用css漸變實現一些不需要切圖的背景鏤空 優惠券樣式 .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { width: @width; height: @height;

CSS實現透明效果顏色的方法:RGBa

RGBa是一種在CSS中宣告包含透明效果的顏色的方法，它的語法是這樣的： 1 2 3 div { background: rgba(200, 54, 54, 0.5); } 它允許我們為元素新增透明色。或許我們習慣了使用”opacity“，它很簡單易用

css實現煙花效果

    <div class="bomb-rocket"></div> <div class="bomb-rocket"></div> <div class="bomb-rocket"></div> <

css實現“加號”效果

實現下圖的加號效果： 若想實現這個效果， 只需一個div元素即可搞定。 需要用到css的為了before和after， 以及border特性。 先設定一個div便籤 <div class="a

不用gif圖，用js+css實現loading效果

   要理解loading的原理，即在文件載入完成之前顯示loading效果，隱藏主文件內容，而在文件載入完成之後，隱藏loading效果，顯示主文件內容。 <!DOCTYPE html> <html lang="zh_CN"> <head&g

純 CSS 實現波浪效果！

    而使用純 CSS 的方式，實現貝塞爾曲線，額，暫時是沒有很好的方法。     當然，藉助其他力量（SVG、CANVAS），是可以很輕鬆的完成所謂的波浪效果的，先看看，非 CSS 方式實現的波浪效果。     使用 SVG 實現波浪效果     藉助 SVG ，是很容

一些用Css實現的效果

今天 light borde sharp div ans top arp css 今天寫一個筆試題，其中有一個是用css實現直角梯形的效果，我給出的答案是： <style> .wrap{ width: 100px

css實現3D盒子效果

origin fin courier ora 設置 blog select 5% solid -------------------------------------- 用css3的新屬性來設置3D盒 子效果（chrome瀏覽器）， 代碼如下： ---------

使用SVG + CSS實現動態霓虹燈文字效果

rdp orm ans cnblogs fill href 大神 case ima 效果圖： 原理：多個SVG描邊動畫使用不同的animation-delay即可！ 對於一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，並且

CSS實現輪播效果

ini html out mes 實現 discover body opacity屬性 blog 還沒有學習如何用JS實現輪播圖效果，所以就用CSS做了一個假的~ 氮素！目前只調出三個圖實現輪播，圖越多代碼就越復雜，後面就沒調了，才不是因為我懶_(:з」∠)_ 代碼如下↓↓

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

css實現幻燈片播放效果

key 改變 list css init ase mar box 如果 用css實現幻燈片播放是最基礎的，閑下來沒事就試著寫了一下，如果有不夠完善或者方法不好的地方還請指點。下面我就用兩種方法實現css花燈片效果。 方法1：定位。通過position屬性改變left值 ht