用纯CSS3制作的鱼缸 - 踏得网

图案中的鱼、水泡、石头、水草以及动画效果都是用纯CSS3绘制出来的。

fish

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1951
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<link rel="stylesheet" href="/uploads/141102/fishtank.css" type="text/css">

<div id="wrap">
    <div class="window">
        <div class="fishtank_wrap">
            <div class="fishtank">

<div class="bubble_wrap">
                    <div class="bubbles b0"></div>
                    <div class="bubbles b1"></div>
                    <div class="bubbles b2"></div>
                    <div class="bubbles b3"></div>
                    <div class="bubbles b4"></div>
                    <div class="bubbles b5"></div>
                </div>
                <div class="bubble_wrap bw2">
                    <div class="bubbles b6"></div>
                    <div class="bubbles b7"></div>
                    <div class="bubbles b8"></div>
                </div>
                <div class="water"></div>
                <div class="fish_wrap">
                    <div class="fred">
                        <div class="top_fin"></div>
                        <div class="tail_fin"></div>
                        <div class="fish_body">
                            <div class="eye"></div>
                            <div class="scale_1"></div>
                            <div class="scale_2"></div>
                            <div class="scale_3"></div>
                            <div class="scale_4"></div>
                        </div>

</div>
                </div>

<div class="ground"></div>
                <div class="rock_1"></div>
                <div class="rock_2"></div>
                <div class="rock_3"></div>
                <div class="rock_4"></div>
                <div class="rock_5"></div>
                
                <div class="plant_1_wrap">
                    <div class="plant_1"></div>
                    <div class="plant_2"></div>
                    <div class="plant_3"></div>
                </div>
                <div class="plant_2_wrap">
                    <div class="plant_4"></div>
                    <div class="plant_5"></div>
                </div>
                <div class="long_plant">
                    <div class="l_plant_1"></div>
                    <div class="l_plant_2"></div>
                    <div class="l_plant_3"></div>
                </div>
                <div class="long_plant2">

<div class="l_plant_2"></div>
                    <div class="l_plant_3"></div>
                </div>
                <div class="water"></div>

</div>
            
        </div>
        
    </div>
    
</div>
<div class="table"></div>