CSS3 方圆转换动画

CSS3 Circle Squares Transform

css3, circle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
.square {
    background: #262626;
    overflow: hidden;
}
.square {
    width: 220px;
    height: 220px;
    float: left;
}
.circle {
    float: left;
    color: #dcdcd2;
    border-width: 50px;
    border-style: solid;
    border-radius: 50%;
    margin: 5px;
    transform: rotate(-45deg);
    animation: squarey 2.3s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
}
.circle:nth-child(1) {
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation-direction: alternate-reverse;
}
.circle:nth-child(2) {
    border-right-color: transparent;
    border-left-color: transparent;
}
.circle:nth-child(3) {
    border-left-color: transparent;
    border-right-color: transparent;
}
.circle:nth-child(4) {
    border-bottom-color: transparent;
    border-top-color: transparent;
    animation-direction: alternate-reverse;
}
@keyframes squarey {
    25% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(135deg);
    }
    75% {
        transform: rotate(225deg);
    }
    100% {
        transform: rotate(315deg);
    }
}
.corner-info {
    position: fixed;
    right: 0;
    bottom: 0;
    background: #262626;
    display: block;
    z-index: 1;
    padding: 0.3em;
    margin: 0;
}
.corner-info,
.corner-info a {
    color: #dcdcd2;
}

HTML

<p class="corner-info">Inspired by <a href="https://gif.flrn.nl/post/112156287609">https://gif.flrn.nl/post/112156287609</a>
</p>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="square">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

CSS3 Circle Squares Transform

css3, circle

编辑器支持Emmet

快捷键

CSS3 Circle Squares Transform

css3, circle

CSS3 有趣的圆和方组成的动画

CSS3 外发光圆圈错觉式旋转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：