CSS3 各种随机形状垒成的墙

Cicada Principle 鼠标悬停时，呈现为会变形的石头。

CSS3, stone

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    font-size: 0;
}
ul li {
    display: inline-block;
    width: 100px;
    padding-bottom: 100px;
    border: 2px solid black;
    background-color: #cecece;
    box-sizing: border-box;
    border-radius: 70% 56% 38% 62%;
    -webkit-transition: .3s;
    transition: .3s;
}
ul li:nth-child(2n+1) {
    background-color: red;
    border-radius: 60% 20% 50% 18%;
}
ul li:nth-child(3n+2) {
    background-color: green;
    border-radius: 80% 26% 43% 60%;
}
ul li:nth-child(5n+3) {
    background-color: blue;
    border-radius: 60% 20% 50% 18%;
}
ul li:nth-child(7n+5) {
    background-color: orange;
    border-radius: 20% 80% 30% 50% / 30% 80% 12% 20%;
}
ul li:nth-child(11n+7) {
    background-color: purple;
    border-radius: 60% 20% 50% 18% / 80% 26% 43% 60%;
}
ul li:nth-child(13n+11) {
    background-color: skyblue;
    border-radius: 30% 80% 12% 20% / 60% 20% 50% 18%;
}
ul li:nth-child(17n+13) {
    background-color: pink;
    border-radius: 60% 20% 50% 18% / 20% 80% 30% 50%;
}
ul li:nth-child(19n+17) {
    background-color: violet;
    border-radius: 80% 26% 43% 60% / 60% 20% 50% 18%;
}
ul li:hover {
    border-radius: 50%;
}

HTML

Cicada Principle 鼠标悬停时，呈现为会变形的石头。

CSS3, stone

编辑器支持Emmet

快捷键

Cicada Principle 鼠标悬停时，呈现为会变形的石头。

CSS3, stone

CSS3 收音机（音响）和水滴形状的开关按钮

CSS3 各种月亮形态的演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：