超酷的粒子往返运动动画

由多个粒子沿直线往返运动构成的粒子动画

CSS3, move

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

ul {
    position: relative;
    list-style: none;
    border-radius: 100%;
    width: 0px;
    height: 0px;
    margin: 100px auto;
}
ul > li {
    position: absolute;
    width: 1px;
    height: 100px;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
}
ul > li:after {
    position: absolute;
    width: 5px;
    height: 10px;
    content: "";
    background: #f90;
    border-radius: 50%;
    margin-left: -2.5px;
    animation: move 1s infinite ease-in-out alternate;
}
ul > li:nth-of-type(1):after {
    animation-delay: 0;
}
ul > li:nth-of-type(2):after {
    animation-delay: -0.25s;
}
ul > li:nth-of-type(3):after {
    animation-delay: -0.5s;
}
ul > li:nth-of-type(4):after {
    animation-delay: -0.75s;
}
ul > li:nth-of-type(5):after {
    animation-delay: -1s;
}
ul > li:nth-of-type(6):after {
    animation-delay: -1.25s;
}
ul > li:nth-of-type(7):after {
    animation-delay: -1.5s;
}
ul > li:nth-of-type(8):after {
    animation-delay: -1.75s;
}
ul > li:nth-of-type(9):after {
    animation-delay: -2s;
}
ul > li:nth-of-type(10):after {
    animation-delay: -2.25s;
}
ul > li:nth-of-type(11):after {
    animation-delay: -2.5s;
}
ul > li:nth-of-type(12):after {
    animation-delay: -2.75s;
}
ul > li:nth-of-type(1) {
    top: 0;
    left: 0;
    transform-origin: center;
    transform: rotate(0deg);
}
ul > li:nth-of-type(2) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(15deg);
}
ul > li:nth-of-type(3) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(30deg);
}
ul > li:nth-of-type(4) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(45deg);
}
ul > li:nth-of-type(5) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(60deg);
}
ul > li:nth-of-type(6) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(75deg);
}
ul > li:nth-of-type(7) {
    top: 0;
    left: 0;
    transform-origin: center;
    transform: rotate(90deg);
}
ul > li:nth-of-type(8) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(105deg);
}
ul > li:nth-of-type(9) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(120deg);
}
ul > li:nth-of-type(10) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(135deg);
}
ul > li:nth-of-type(11) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(150deg);
}
ul > li:nth-of-type(12) {
    top: 0;
    right: 0;
    transform-origin: center;
    transform: rotate(165deg);
}
@keyframes move {
    from {
        transform: translatey(-100px);
    }
    from {
        transform: translatey(100px);
    }
}

HTML

由多个粒子沿直线往返运动构成的粒子动画

CSS3, move

编辑器支持Emmet

快捷键

由多个粒子沿直线往返运动构成的粒子动画

CSS3, move

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

5个很棒的CSS3文本粒子动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：