CSS3 SHAPE-OUTSIDE属性动画

Animated Shape-Outside 使用shape-outside构造出的文本圆形环绕效果。

CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes anim-left {
    0% {
        shape-outside: circle(150px at 100% 50%);
    }
    30% {
        shape-outside: circle(175px at 100% 50%);
    }
    100% {
        shape-outside: circle(150px at 100% 50%);
    }
}
@-webkit-keyframes anim-right {
    0% {
        shape-outside: circle(150px at 0% 50%);
    }
    30% {
        shape-outside: circle(175px at 0% 50%);
    }
    100% {
        shape-outside: circle(150px at 0% 50%);
    }
}
@-webkit-keyframes anim-cat {
    0% {
        background-size: 300px;
    }
    30% {
        background-size: 350px;
    }
    100% {
        background-size: 300px;
    }
}
.shape {
    width: 100%;
    height: 100%;
    clear: both;
}
.one {
    float: right;
    -webkit-animation: anim-left 5s linear infinite;
}
.two {
    float: left;
    -webkit-animation: anim-right 5s linear infinite;
}
html,
body {
    width: 100%;
    height: 100%;
}
html {
    position: relative;
}
body {
    position: absolute;
    top: 50%;
}
.container {
    column-count: 2;
    width: 600px;
    height: 500px;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
    margin: -250px auto;
    overflow: hidden;
}
.cat {
    -webkit-animation: anim-cat 5s linear infinite;
    background-size: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
p {
    margin-before: 0;
}

HTML

<p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost:
            away went Alice like the wind, and was just in time to hear it say, as it turned a corner, "Oh my ears and whiskers, how late it's getting!" She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found
            herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.
</div>

Animated Shape-Outside 使用shape-outside构造出的文本圆形环绕效果。

CSS3

编辑器支持Emmet

快捷键

Animated Shape-Outside 使用shape-outside构造出的文本圆形环绕效果。

CSS3

CSS3 纯CSS做的INPUT RADIO按钮条

CSS3 类似调色卡的LOADING动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：