更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div class="main"><div class="emoji"><div class="emoji__eyes abs"><div class="emoji__eye"></div><div class="emoji__eye"></div></div><div class="emoji__shadows abs"><div class="emoji__shadow"></div><div class="emoji__shadow"></div></div><div class="emoji__mouth abs"></div></div><div class="poop">&#128169;</div><div class="floor abs"></div><div class="bubble-e"></div><div class="bubble-p"></div><h1 class="pop">POP!</h1>
</div>

CSS

:root{--bg: #f7f6e6;--yellow-1: #FFEE19;--yellow-2: #FFA630;--red-1: #FF0027;--red-2: #CB000E;--shadow-1: #e3c262;--shadow-2: #FF5875;--floor: #C5C5C4;
}
*,
*::before,
*::after{margin: 0;padding: 0;box-sizing: border-box;
}
body{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;font-family: 'Montserrat', sans-serif;font-size: 90px;background: var(--bg);color: var(--shadow-2);user-select: none;
}
h1{position: absolute;top: 0%;z-index: -1;animation: title 10s linear infinite;
}
.main{position: relative;width: 800px;height: 600px;display: flex;justify-content: center;align-items: center;
}.abs{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.emoji{position: absolute;width: 300px;height: 300px;bottom: 250px;left: calc(50% - 150px);border-radius: 50%;border: 10px solid black;background-color: var(--yellow-1);box-shadow:inset 5px -5px 0 var(--yellow-2),inset -5px 5px 0 white,-5px 5px 0 var(--yellow-2);animation:emoji 10s linear infinite,emoji-scale 10s linear infinite,emoji-color 10s linear infinite,emoji-shake 10s ease-in-out infinite;
}.emoji__eyes,.emoji__shadows,.emoji__mouth{display: flex;justify-content: space-between;width: 50%;height: 20px;}.emoji__eye,.emoji__shadow{width: 20px;height: 20px;border-radius: 50%;background-color: black;}.emoji__eyes{ z-index: 2000; }.emoji__eye{ animation: emoji-eye 10s infinite; }.emoji__shadows{width: 62.5%;transform: translate(-50%, 20%);animation: shadow-shake .2s infinite;}.emoji__shadow{width: 25px;height: 25px;border-radius: 50%;background-color: var(--shadow-1);animation: shadow-color 10s infinite;}.emoji__mouth{width: 50px;height: 50px;border-radius: 50%;border-top: 10px solid black;border-right: 10px solid black;border-bottom: 10px solid transparent;border-left: 10px solid transparent;transform: translate(-50%, -20%) rotateZ(135deg);animation: emoji-mouth 10s infinite;}
.poop{position: absolute;font-size: 40px;z-index: -1;animation: poop 10s infinite;
}
.floor{width: 300px;height: 10px;border-radius: 10px;transform: translate(-50%, 170px) ;background-color: var(--floor);z-index: -2;animation: floor 10s linear infinite;
}.bubble-p,
.bubble-e{position: absolute;left: 50%;bottom: 80px;background-image:radial-gradient(circle at 25% 20%, var(--red-1) 4px ,transparent 4px),radial-gradient(circle at 50% 25%, var(--red-1) 3px , transparent 3px),radial-gradient(circle at 10% 40%, var(--red-1) 3px , transparent 3px),radial-gradient(circle at 90% 30%, var(--red-1) 4px , transparent 4px);border-radius: 50%;animation: bubble-p 10s infinite;
}
.bubble-e{background-image:radial-gradient(circle at 25% 20%, var(--yellow-1) 4px ,transparent 4px),radial-gradient(circle at 50% 25%, var(--yellow-2) 3px , transparent 3px),radial-gradient(circle at 10% 40%, var(--yellow-2) 3px , transparent 3px),radial-gradient(circle at 90% 30%, var(--yellow-1) 4px , transparent 4px),radial-gradient(circle at 80% 40%, var(--yellow-2) 3px , transparent 3px),radial-gradient(circle at 80% 20%, var(--yellow-2) 5px , transparent 5px);animation: bubble-e 10s infinite;
}/**/@keyframes emoji {0%, 70%, 100%{ bottom: 250px; }30%, 35%{ bottom: 130px; }
}
@keyframes emoji-shake {0%, 70%,71%,72%,73%,74%,75%,76%,77%,78%,79%,80%,100%{ left: calc(50% - 150px); }70.5%,71.5%,72.5%,73.5%,74.5%,75.5%,76.5%,77.5%,78.5%,79.5%{ left: calc(50% - 145px); }
}
@keyframes emoji-scale {0%, 25%, 60%, 100%{ transform: scaleY(1) scaleX(1);}38%, 45%{transform: scaleY(1.07) scaleX(.95);transform-origin: bottom center;}30%, 32%{ transform: scaleY(.965) scaleX(1.051);}
}
@keyframes emoji-color {0%, 65%{background-color: var(--yellow-1);box-shadow:inset 5px -5px 0 var(--yellow-2),inset -5px 5px 0 white,-5px 5px 0 var(--yellow-2);}70%, 95%{background-color: var(--red-1);box-shadow:inset 5px -5px 0 var(--red-2),inset -5px 5px 0 white,-5px 5px 0 var(--red-2);}
}
@keyframes emoji-mouth {0%, 65%, 100%{ width: 50px; height: 50px; }70%, 95%{ width: 20px; height: 20px; }
}@keyframes emoji-eye {0%, 65%{width: 20px;height: 20px;}70%, 95% {width: 22px;height: 22px;}
}
@keyframes shadow-color {0%, 65%{ background-color: var(--shadow-1);}70%, 95% {background-color: var(--shadow-2); }
}
@keyframes shadow-shake {0%{ transform: translate(-49.5%, 20%);}100%{ transform: translate(-50.5%, 30%); }
}
@keyframes floor {0%, 70%, 100%{ width: 200px; }30%, 35% { width: 300px; }
}
@keyframes poop {0%, 80%{bottom: 50%;opacity: 0;}85%, 98% {bottom: 128px;opacity: 1;}100%{ opacity: 0;}
}
@keyframes title {0%, 80%{top: 20%;opacity: 0;transform: scaleZ(0);}81%, 100% {top: calc(0% - 50px);opacity: 1;transform: scaleZ(1);left: 20%;}
}
@keyframes bubble-e {0%, 40%{left: calc(50% - 10px);width: 20px;height: 80px;opacity: 0;}42%{ opacity: 1; }100%{left: calc(50% - 250px);width: 500px;height: 200px;opacity: 0;}
}
@keyframes bubble-p {0%, 83%{left: calc(50% - 10px);width: 20px;height: 80px;opacity: 0;}85%{ opacity: 1; }95%, 100%{left: calc(50% - 200px);width: 400px;height: 200px;opacity: 0;}
}

JS

/*
Designed by: [盈嘉小红砖](https://xhz.bos.xyz/)
Original image: https://dribbble.com/shots/3031517-MBE-Style-Emoji-Poop
*/