CSS3水中抛圈游戏

SCSS randomized water ring toss game. 模拟水中薄片的漂浮和下沉（带阻力）动画效果。

css3, game

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.toy-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50vh;
    height: 80vh;
    transform: translate3d(-50%, -50%, 0);
    perspective: 50vh;
}
.lid {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5%;
    border-radius: 0.5vh;
    border-top-left-radius: 4vh 1vh;
    border-top-right-radius: 4vh 1vh;
    background-color: #8c1414;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 1%, rgba(255, 255, 255, 0.05) 3%, rgba(255, 255, 255, 0.2) 6%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.3) 13%, transparent 30%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.8) 97%, rgba(0, 0, 0, 0.6) 100%);
    box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
}
.lid:before {
    content: '';
    position: absolute;
    top: -2vh;
    left: 4vh;
    width: 10vh;
    height: 2vh;
    background-color: #ccc;
    border-radius: 1vh 1vh 1vh 0;
    border-top-left-radius: 2vh 1vh;
    box-shadow: inset -1.2vh -0.3vh 1vh rgba(0, 0, 0, 0.6);
}
.game {
    position: absolute;
    top: 3%;
    left: 2%;
    right: 2%;
    bottom: 20%;
    transform: rotateX(-5deg);
    transform-origin: 50% 0%;
}
.hills {
    position: absolute;
    left: 1vh;
    right: 1vh;
    bottom: 6vh;
    height: 10vh;
    overflow: hidden;
}
.hills:before {
    content: '';
    position: absolute;
    top: 5vh;
    left: -4vh;
    width: 18vh;
    height: 13vh;
    border-radius: 0.5vh;
    box-shadow: inset 0 1vh 0.2vh rgba(255, 255, 255, 0.3), 1vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
    background-color: transparent;
    transform: rotate(35deg);
}
.hills:after {
    content: '';
    position: absolute;
    top: 7vh;
    left: 18vh;
    width: 26vh;
    height: 13vh;
    border-radius: 1.5vh;
    box-shadow: inset -0.5vh 1vh 0.2vh rgba(255, 255, 255, 0.3), 0.5vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
    background-color: transparent;
    transform: rotate(-14deg);
}
.pegs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15vh;
    height: 30vh;
}
.peg {
    position: absolute;
    width: 1.5vh;
    height: 10vh;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
    border-radius: 0.5vh;
    border-top-left-radius: 0.75vh 5vh;
    border-top-right-radius: 0.75vh 5vh;
    box-shadow: inset 0.1vh 0 0.1vh rgba(0, 0, 0, 0.3), inset -0.2vh 0 0.2vh rgba(255, 255, 255, 0.2);
}
.peg:nth-child(1) {
    left: 20vh;
    bottom: 8vh;
}
.peg:nth-child(2) {
    right: 10vh;
    bottom: 15vh;
}
.peg:before {
    content: '';
    position: absolute;
    bottom: -2vh;
    left: 50%;
    width: 4vh;
    height: 4vh;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0.4vh 0.4vh 0.1vh rgba(255, 255, 255, 0.05), inset -0.3vh -0.3vh 0.2vh rgba(255, 255, 255, 0.1), inset -0.5vh -0.5vh 0.3vh rgba(0, 0, 0, 0.2);
}
.rings {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.ring {
    position: absolute;
    bottom: 4vh;
    left: 15vh;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    background-image: radial-gradient(circle 2.5vh at 50% 50%, rgba(0, 0, 0, 0) 50%, #ff0000 65%, #ff0000 80%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
    mask-image: radial-gradient(ellipse 0.8vh 2vh at 50% 1vh, rgba(0, 0, 0, 0) 90%, #000000), linear-gradient(0deg, #000, #000);
    mask-position: 0 -3vh, 0 0;
    mask-repeat: no-repeat;
}
.ring:nth-child(1) {
    animation-delay: 832.43045ms;
    animation-name: ring-1;
}
.ring:nth-child(2) {
    animation-delay: 1251.74643ms;
    animation-name: ring-2;
}
.ring:nth-child(3) {
    animation-delay: 785.60875ms;
    animation-name: ring-3;
}
.ring:nth-child(4) {
    animation-delay: 1342.29048ms;
    animation-name: ring-4;
}
.ring:nth-child(5) {
    animation-delay: 1154.18614ms;
    animation-name: ring-5;
}
.ring:nth-child(6) {
    animation-delay: 1214.55779ms;
    animation-name: ring-6;
}
.ring:nth-child(7) {
    animation-delay: 1462.49064ms;
    animation-name: ring-7;
}
.ring:nth-child(8) {
    animation-delay: 1079.02202ms;
    animation-name: ring-8;
}
.ring:nth-child(9) {
    animation-delay: 1111.7967ms;
    animation-name: ring-9;
}
.ring:nth-child(10) {
    animation-delay: 1325.37012ms;
    animation-name: ring-10;
}
@keyframes ring-1 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 49.75159vh;
        left: 17.862vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 45.59957vh;
        left: 31.44452vh;
        transform: rotateX(149.46013deg);
    }
    60% {
        bottom: 30vh;
        left: 26.66623vh;
        transform: rotateX(208.97242deg);
    }
    90% {
        bottom: 8vh;
        left: 8.27029vh;
        transform: rotateX(85.27922deg);
    }
    100% {
        bottom: 5vh;
        left: 14.16233vh;
        transform: rotateX(73.28645deg);
    }
}
@keyframes ring-2 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 51.22053vh;
        left: 8.21702vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 47.28665vh;
        left: 22.65741vh;
        transform: rotateX(142.39383deg);
    }
    60% {
        bottom: 30vh;
        left: 24.91757vh;
        transform: rotateX(224.97872deg);
    }
    90% {
        bottom: 8vh;
        left: 22.92265vh;
        transform: rotateX(64.04882deg);
    }
    100% {
        bottom: 5vh;
        left: 15.72733vh;
        transform: rotateX(75.16026deg);
    }
}
@keyframes ring-3 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 58.34034vh;
        left: 17.80191vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 45.85115vh;
        left: 14.5122vh;
        transform: rotateX(129.29488deg);
    }
    60% {
        bottom: 30vh;
        left: 7.66373vh;
        transform: rotateX(263.47391deg);
    }
    90% {
        bottom: 8vh;
        left: 2.76377vh;
        transform: rotateX(87.565deg);
    }
    100% {
        bottom: 5vh;
        left: 14.19272vh;
        transform: rotateX(72.17657deg);
    }
}
@keyframes ring-4 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 53.08412vh;
        left: 22.81198vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 45.80933vh;
        left: 17.89675vh;
        transform: rotateX(130.89432deg);
    }
    60% {
        bottom: 30vh;
        left: 13.24952vh;
        transform: rotateX(280.11117deg);
    }
    90% {
        bottom: 8vh;
        left: 33.95352vh;
        transform: rotateX(76.45522deg);
    }
    100% {
        bottom: 5vh;
        left: 16.96308vh;
        transform: rotateX(72.57927deg);
    }
}
@keyframes ring-5 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 52.91049vh;
        left: 6.09146vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 47.32632vh;
        left: 37.17893vh;
        transform: rotateX(149.01409deg);
    }
    60% {
        bottom: 30vh;
        left: 36.54273vh;
        transform: rotateX(235.12243deg);
    }
    90% {
        bottom: 8vh;
        left: 7.55079vh;
        transform: rotateX(97.45877deg);
    }
    100% {
        bottom: 5vh;
        left: 17.00533vh;
        transform: rotateX(68.36751deg);
    }
}
@keyframes ring-6 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 48.04123vh;
        left: 20.09903vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 49.18698vh;
        left: 25.59647vh;
        transform: rotateX(71.30343deg);
    }
    60% {
        bottom: 30vh;
        left: 18.8208vh;
        transform: rotateX(115.42664deg);
    }
    90% {
        bottom: 8vh;
        left: 27.20519vh;
        transform: rotateX(65.41739deg);
    }
    100% {
        bottom: 5vh;
        left: 12.94267vh;
        transform: rotateX(83.95955deg);
    }
}
@keyframes ring-7 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 56.33068vh;
        left: 9.33964vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 49.63387vh;
        left: 28.64107vh;
        transform: rotateX(62.25692deg);
    }
    60% {
        bottom: 30vh;
        left: 31.83815vh;
        transform: rotateX(268.24506deg);
    }
    90% {
        bottom: 8vh;
        left: 9.26966vh;
        transform: rotateX(57.22298deg);
    }
    100% {
        bottom: 5vh;
        left: 15.08788vh;
        transform: rotateX(70.81097deg);
    }
}
@keyframes ring-8 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 56.85037vh;
        left: 19.39141vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 47.71973vh;
        left: 25.38577vh;
        transform: rotateX(145.00906deg);
    }
    60% {
        bottom: 30vh;
        left: 26.07068vh;
        transform: rotateX(254.90278deg);
    }
    90% {
        bottom: 8vh;
        left: 5.74756vh;
        transform: rotateX(61.88936deg);
    }
    100% {
        bottom: 5vh;
        left: 18.6033vh;
        transform: rotateX(77.63892deg);
    }
}
@keyframes ring-9 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 55.96622vh;
        left: 23.35862vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 49.91907vh;
        left: 11.93596vh;
        transform: rotateX(119.4289deg);
    }
    60% {
        bottom: 30vh;
        left: 14.95165vh;
        transform: rotateX(232.46338deg);
    }
    90% {
        bottom: 8vh;
        left: 22.685vh;
        transform: rotateX(88.49604deg);
    }
    100% {
        bottom: 5vh;
        left: 12.93543vh;
        transform: rotateX(66.4013deg);
    }
}
@keyframes ring-10 {
    0% {
        bottom: 4vh;
        left: 15vh;
        transform: rotateX(-80deg);
    }
    20% {
        bottom: 58.62913vh;
        left: 23.71671vh;
        transform: rotateX(470deg);
    }
    35% {
        bottom: 47.89738vh;
        left: 16.03324vh;
        transform: rotateX(119.27339deg);
    }
    60% {
        bottom: 30vh;
        left: 16.1203vh;
        transform: rotateX(246.39494deg);
    }
    90% {
        bottom: 8vh;
        left: 21.66075vh;
        transform: rotateX(51.36333deg);
    }
    100% {
        bottom: 5vh;
        left: 12.442vh;
        transform: rotateX(77.19332deg);
    }
}
.glass {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(100, 100, 255, 0.05);
    box-shadow: inset 0.25vh -2vh 4vh rgba(255, 255, 255, 0.5), inset 0 0 0.5vh rgba(255, 255, 255, 0.5);
}
.base {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22vh;
    border-radius: 0.5vh;
    background-color: #8c1414;
    background-image: radial-gradient(ellipse 30vh 3vh at -2vh 50%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.5), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 -0.2vh 3vh rgba(0, 0, 0, 0.25);
    transform: rotateX(5deg);
    transform-origin: 50% 0%;
}
.base:before {
    content: '';
    position: absolute;
    top: -3vh;
    left: 2vh;
    right: 2vh;
    height: 3vh;
    background-color: #8c1414;
    border-top-left-radius: 0.5vh;
    border-top-right-radius: 0.5vh;
    background-color: #8c1414;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 5%, rgba(255, 255, 255, 0.1) 11%, transparent 30%, rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0.6) 97%, rgba(0, 0, 0, 0.4) 100%);
    box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
}
.base:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4vh;
    background-color: #8c1414;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
    box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.25);
}
.label {
    position: absolute;
    top: 3vh;
    left: 3vh;
    width: 24vh;
    height: 7vh;
    background-color: #999;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 80%);
    border-radius: 0.5vh;
    box-shadow: 0.1vh 0.1vh 0.2vh rgba(0, 0, 0, 0.3);
}
.label:before {
    content: '';
    position: absolute;
    top: 0.8vh;
    right: 0.8vh;
    bottom: 0.8vh;
    left: 0.8vh;
    border: 1vh solid #020202;
    border-radius: 0.5vh;
}
.button {
    position: absolute;
    right: 4vh;
    top: 2vh;
    width: 14vh;
    height: 14vh;
    background-color: #8c1414;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1));
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.5);
}
.button:before {
    content: '';
    position: absolute;
    top: 3.5vh;
    left: 3.5vh;
    width: 7vh;
    height: 7vh;
    background-color: #999;
    border-radius: 50%;
    box-shadow: inset 0.1vh 0.5vh 0 rgba(255, 255, 255, 0.5), inset 0vh -0.5vh 0 rgba(0, 0, 0, 0.5), inset 1vh 0.5vh 2vh rgba(0, 0, 0, 0.25);
}
body {
    background-color: #222;
}

HTML

SCSS randomized water ring toss game. 模拟水中薄片的漂浮和下沉（带阻力）动画效果。

css3, game

编辑器支持Emmet

快捷键

SCSS randomized water ring toss game. 模拟水中薄片的漂浮和下沉（带阻力）动画效果。

css3, game

CSS3 口袋妖怪游戏中的红白双色球图案

CSS3 Game Boy 游戏机原型图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：