Skip to content

Instantly share code, notes, and snippets.

.img {
width: 375px;
height: 812px;
background-color: #000;
}
@wangxianfa
wangxianfa / dabblet.css
Last active June 23, 2025 12:59
Untitled
.mask-layer {
width: 200px;
height: 200px;
mask-image: linear-gradient(to right, black, black);
mask-repeat: no-repeat;
overflow: hidden;
position: relative;
}
.mask-layer::before {
body {
background: #000;
}
.content {
width: 500px;
height: 500px;
mask-image: #fff;
mask-size: 100px 100px;
mask-position: 10px 20px;
@wangxianfa
wangxianfa / dabblet.css
Last active June 12, 2025 02:54
Untitled
body {
background: #000;
}
.turntable {
width: 285px;
height: 285px;
background: url('https://aimg.kwcdn.com/upload_aimg/sc/b48ad7cd-d282-4bff-8378-4ba8741b9e9b.png.slim.png') 0 0 / 100% 100% no-repeat;
transform-origin: center;
animation: turn 1s linear infinite both;
@wangxianfa
wangxianfa / dabblet.css
Last active June 11, 2025 12:49
Untitled
body {
background: #000;
}
.turntable {
width: 285px;
height: 285px;
background: url('https://aimg.kwcdn.com/upload_aimg/sc/b48ad7cd-d282-4bff-8378-4ba8741b9e9b.png.slim.png') 0 0 / 100% 100% no-repeat;
transform-origin: center;
animation: turn 1s linear infinite both;
@wangxianfa
wangxianfa / dabblet.css
Last active June 11, 2025 08:06
Untitled
body {
background: #000;
}
.turntable {
width: 285px;
height: 285px;
background: url('https://aimg.kwcdn.com/upload_aimg/sc/8c422333-0e53-4183-a638-f789bf0bcf05.png.slim.png') 0 0 / 100% 100% no-repeat;
transform-origin: center;
animation: turn 1s linear infinite both;
@wangxianfa
wangxianfa / dabblet.css
Last active May 5, 2025 14:23
Untitled
.item {
font-size: 50px;
font-weight: 800;
color: red;
animation: colorAni 2s linear 0s both;
}
@keyframes colorAni {
0% {
color: red;
@wangxianfa
wangxianfa / dabblet.css
Last active April 2, 2025 16:03
Untitled
.content {
width: 100px;
height: 100px;
background: red;
display: inline-block;
/*animation: ani 5s linear 0s backwards infinite;*/
animation: preCompose_o_ani 10s steps(1) 0s 1 normal both;
}
@wangxianfa
wangxianfa / dabblet.css
Last active December 6, 2024 12:52
background: conic-gradient(
.container {
position: relative;
/*overflow: hidden;*/
width: 124px;
height: 124px;
/*overflow: hidden;*/
margin: 40px auto;
border-radius: 50%;
}
@wangxianfa
wangxianfa / dabblet.css
Last active December 3, 2024 06:29
Untitled
.wrap3 {
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(#fff, transparent);
mask-size: 180px 180px;
mask-position: 10px 10px;
border: 10px solid #fff;
mask-repeat: no-repeat;
}