使用CSS3实现的一组不规则同心圆

悬停时有脉冲动画。

CSS3, circle, pulse

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.box {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: orange;
    color: orange;
    border-radius: 50%;
    border: 10px solid transparent;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 0 30px rgba(255, 255, 255, 0.4), inset 0 0 0 40px rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-transition: box-shadow 600ms ease, -webkit-transform 600ms ease;
    transition: box-shadow 600ms ease, -webkit-transform 600ms ease;
    transition: box-shadow 600ms ease, transform 600ms ease;
    transition: box-shadow 600ms ease, transform 600ms ease, -webkit-transform 600ms ease;
    cursor: pointer;
}
.box:hover {
    box-shadow: none;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
}
.box:nth-child(2n+1) {
    border-top-left-radius: 59%;
    background-color: red;
}
.box:nth-child(3n+2) {
    border-top-right-radius: 52%;
    background-color: green;
}
.box:nth-child(5n+3) {
    border-bottom-left-radius: 59%;
    background-color: purple;
}
.box:nth-child(7n+5) {
    border-bottom-right-radius: 56%;
    background-color: blue;
}
.box:nth-child(11n+7) {
    border-bottom-right-radius: 53%;
    background-color: pink;
}

HTML

悬停时有脉冲动画。

CSS3, circle, pulse

编辑器支持Emmet

快捷键

悬停时有脉冲动画。

CSS3, circle, pulse

使用CSS3线性渐变实现一个彩虹边框的按钮

使用CSS3矩阵变换（transform:matrix）实现的圆周运动

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：