CSS3 呼吸的莲花动画图标

Watch OS3 Breathe App Animation

CSS3, lotus

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    height: 100vh;
    flex-flow: column;
}
.breath {
    width: 100px;
    height: 100px;
    position: relative;
}
p {
    width: inherit;
    height: inherit;
    border-radius: 50%;
    position: absolute;
    mix-blend-mode: screen;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform-origin: 50% 50%;
    animation: run 5s cubic-bezier(0.76, 0.02, 0.52, 0.98) infinite alternate-reverse;
}
p:nth-of-type(1) {
    background: rgba(89, 220, 213, 0.7);
    transform: rotate(180deg) translate(0px, -50px);
}
p:nth-of-type(2) {
    background: rgba(89, 220, 219, 0.7);
    transform: rotate(180deg) translate(35px, -36px);
}
p:nth-of-type(3) {
    background: rgba(89, 215, 220, 0.7);
    transform: rotate(180deg) translate(50px, 0px);
}
p:nth-of-type(4) {
    background: rgba(89, 208, 220, 0.7);
    transform: rotate(180deg) translate(35px, 35px);
}
p:nth-of-type(5) {
    background: rgba(89, 202, 220, 0.7);
    transform: rotate(180deg) translate(0px, 50px);
}
p:nth-of-type(6) {
    background: rgba(89, 195, 220, 0.7);
    transform: rotate(180deg) translate(-36px, 35px);
}
p:nth-of-type(7) {
    background: rgba(89, 189, 220, 0.7);
    transform: rotate(180deg) translate(-50px, 0px);
}
p:nth-of-type(8) {
    background: rgba(89, 182, 220, 0.7);
    transform: rotate(180deg) translate(-36px, -36px);
}
.info {
    text-align: center;
    color: #fff;
    margin-top: 70px;
}
@keyframes run {
    to {
        transform: none;
    }
}

HTML

Watch OS3 Breathe App Animation

CSS3, lotus

编辑器支持Emmet

快捷键

Watch OS3 Breathe App Animation

CSS3, lotus

CSS3单元素实现一个常用的鼠标滚动提示动画图标

使用CSS3 clip-path实现的标题文本水纹波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：