CSS3 塔形动画 - 踏得网

Source: http://zachsaucier.com

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
    margin: 0;
}
.container {
    position: relative;
    max-width: 100vh;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    -webkit-animation: rotate 24s linear infinite;
    animation: rotate 24s linear infinite;
}
.container:before {
    content: "";
    display: block;
    margin-top: 100%;
}
.container > .square {
    width: 25%;
    height: 25%;
    overflow: hidden;
    -webkit-animation: none;
    animation: none;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
.container > .square:nth-of-type(1) {
    -webkit-transform: rotate(135deg) translate(10px, 10px);
    -ms-transform: rotate(135deg) translate(10px, 10px);
    transform: rotate(135deg) translate(10px, 10px);
}
.container > .square:nth-of-type(2) {
    -webkit-transform: rotate(225deg) translate(10px, 10px);
    -ms-transform: rotate(225deg) translate(10px, 10px);
    transform: rotate(225deg) translate(10px, 10px);
}
.container > .square:nth-of-type(3) {
    -webkit-transform: rotate(315deg) translate(10px, 10px);
    -ms-transform: rotate(315deg) translate(10px, 10px);
    transform: rotate(315deg) translate(10px, 10px);
}
.container > .square:nth-of-type(4) {
    -webkit-transform: rotate(405deg) translate(10px, 10px);
    -ms-transform: rotate(405deg) translate(10px, 10px);
    transform: rotate(405deg) translate(10px, 10px);
}
.square {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    outline: 1px solid black;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: move 6s ease-in-out infinite;
    animation: move 6s ease-in-out infinite;
}
@-webkit-keyframes move {
    0%, 33%, 66%, 100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    16.5% {
        -webkit-transform: translate(10px, 0px);
        transform: translate(10px, 0px);
    }
    49.5% {
        -webkit-transform: translate(0px, 10px);
        transform: translate(0px, 10px);
    }
    83.5% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
    }
}
@keyframes move {
    0%, 33%, 66%, 100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    16.5% {
        -webkit-transform: translate(10px, 0px);
        transform: translate(10px, 0px);
    }
    49.5% {
        -webkit-transform: translate(0px, 10px);
        transform: translate(0px, 10px);
    }
    83.5% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
    }
}
@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

<div class="container">
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square">
                            <div class="square">
                                <div class="square">
                                    <div class="square">
                                        <div class="square">
                                            <div class="square">
                                                <div class="square">
                                                    <div class="square">
                                                        <div class="square">
                                                            <div class="square">
                                                                <div class="square">
                                                                    <div class="square">
                                                                        <div class="square">
                                                                            <div class="square">
                                                                                <div class="square">
                                                                                    <div class="square">
                                                                                        <div class="square">
                                                                                            <div class="square">
                                                                                                <div class="square">
                                                                                                    <div class="square">
                                                                                                        <div class="square">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square">
                            <div class="square">
                                <div class="square">
                                    <div class="square">
                                        <div class="square">
                                            <div class="square">
                                                <div class="square">
                                                    <div class="square">
                                                        <div class="square">
                                                            <div class="square">
                                                                <div class="square">
                                                                    <div class="square">
                                                                        <div class="square">
                                                                            <div class="square">
                                                                                <div class="square">
                                                                                    <div class="square">
                                                                                        <div class="square">
                                                                                            <div class="square">
                                                                                                <div class="square">
                                                                                                    <div class="square">
                                                                                                        <div class="square">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square">
                            <div class="square">
                                <div class="square">
                                    <div class="square">
                                        <div class="square">
                                            <div class="square">
                                                <div class="square">
                                                    <div class="square">
                                                        <div class="square">
                                                            <div class="square">
                                                                <div class="square">
                                                                    <div class="square">
                                                                        <div class="square">
                                                                            <div class="square">
                                                                                <div class="square">
                                                                                    <div class="square">
                                                                                        <div class="square">
                                                                                            <div class="square">
                                                                                                <div class="square">
                                                                                                    <div class="square">
                                                                                                        <div class="square">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square">
                            <div class="square">
                                <div class="square">
                                    <div class="square">
                                        <div class="square">
                                            <div class="square">
                                                <div class="square">
                                                    <div class="square">
                                                        <div class="square">
                                                            <div class="square">
                                                                <div class="square">
                                                                    <div class="square">
                                                                        <div class="square">
                                                                            <div class="square">
                                                                                <div class="square">
                                                                                    <div class="square">
                                                                                        <div class="square">
                                                                                            <div class="square">
                                                                                                <div class="square">
                                                                                                    <div class="square">
                                                                                                        <div class="square">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Source: http://zachsaucier.com

编辑器支持Emmet

快捷键

Source: http://zachsaucier.com

CSS3 嵌套的正方形动画

CSS3 圆形LOADING动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：