代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: #1d1d1d;
display: flex;
justify-content: center;
align-items: center;
}
.notification {
width: 200px;
transform-origin: top center;
animation: bellring 2s ease infinite;
}
.ball {
display: none;
transform-origin: top center;
animation: ballring 2s ease infinite;
animation-delay: 0.1s;
}
@keyframes bellring {
0% {
transform: rotate(0);
}
10% {
transform: rotate(20deg);
}
20% {
transform: rotate(-20deg);
}
30% {
transform: rotate(15deg);
}
40% {
transform: rotate(-15deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(-10deg);
}
70% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
@keyframes ballring {
0% {
transform: rotate(0);
}
10% {
transform: rotate(-5deg);
}
20% {
transform: rotate(5deg);
}
30% {
transform: rotate(-4deg);
}
40% {
transform: rotate(4deg);
}
50% {
transform: rotate(-2deg);
}
60% {
transform: rotate(2deg);
}
70% {
transform: rotate(-1deg);
}
80% {
transform: rotate(1deg);
}
100% {
transform: rotate(0);
}
}
</style>
<style>
.frame {
position: absolute;
top: 50%;
left: 20%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
/* background: #dd3c54; */
}
.bell {
position: absolute;
top: 173px;
left: 175px;
fill: #fff;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: shake 2.5s ease infinite;
animation: shake 2.5s ease infinite;
}
.line {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
}
.line-1,
.line-2,
.line-3 {
position: absolute;
top: 170px;
left: 230px;
}
.line-4,
.line-5,
.line-6 {
position: absolute;
top: 170px;
right: 230px;
}
.line-1 {
-webkit-animation: line-1 2.5s ease-out infinite both;
animation: line-1 2.5s ease-out infinite both;
}
.line-2 {
-webkit-animation: line-2 2.5s ease-out infinite both;
animation: line-2 2.5s ease-out infinite both;
}
.line-3 {
-webkit-animation: line-3 2.5s ease-out infinite both;
animation: line-3 2.5s ease-out infinite both;
}
.line-4 {
-webkit-animation: line-4 2.5s ease-out infinite both;
animation: line-4 2.5s ease-out infinite both;
}
.line-5 {
-webkit-animation: line-5 2.5s ease-out infinite both;
animation: line-5 2.5s ease-out infinite both;
}
.line-6 {
-webkit-animation: line-6 2.5s ease-out infinite both;
animation: line-6 2.5s ease-out infinite both;
}
@-webkit-keyframes line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes line-2 {
0%,
19% {
opacity: 0;
}
20% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
70%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-2 {
0%,
19% {
opacity: 0;
}
20% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
70%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes line-3 {
0%,
39% {
opacity: 0;
}
40% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
90%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-3 {
0%,
39% {
opacity: 0;
}
40% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
90%,
100% {
-webkit-transform: translate3d(60px, 0, 0) scale(2);
transform: translate3d(60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes line-4 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-4 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes line-5 {
0%,
19% {
opacity: 0;
}
20% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
70%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-5 {
0%,
19% {
opacity: 0;
}
20% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
70%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes line-6 {
0%,
39% {
opacity: 0;
}
40% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
90%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@keyframes line-6 {
0%,
39% {
opacity: 0;
}
40% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
90%,
100% {
-webkit-transform: translate3d(-60px, 0, 0) scale(2);
transform: translate3d(-60px, 0, 0) scale(2);
opacity: 0;
}
}
@-webkit-keyframes shake {
0%,
50%,
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5%,
10%,
15%,
20%,
25%,
30%,
35%,
40% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
45% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
7.5%,
12.5%,
17.5%,
22.5%,
27.5%,
32.5%,
37.5%,
42.5% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
47.5% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
}
@keyframes shake {
0%,
50%,
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5%,
10%,
15%,
20%,
25%,
30%,
35%,
40% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
45% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
7.5%,
12.5%,
17.5%,
22.5%,
27.5%,
32.5%,
37.5%,
42.5% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
47.5% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
}
</style>
<body>
<div class="container">
<svg class="notification" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M39 8.99981C38.9986 10.0379 38.7663 11.0626 38.32 11.9998C37.8345 13.0256 37.1027 13.9154 36.19 14.5898H27.81C26.8972 13.9154 26.1655 13.0256 25.68 11.9998C25.2282 11.0511 24.9959 10.013 25.0001 8.96225C25.0043 7.91153 25.2449 6.87524 25.7043 5.93022C26.1636 4.98521 26.8297 4.15572 27.6534 3.50327C28.477 2.85083 29.4369 2.39216 30.462 2.1613C31.487 1.93043 32.5509 1.93328 33.5747 2.16965C34.5985 2.40601 35.5559 2.86982 36.376 3.52667C37.1961 4.18353 37.8578 5.01658 38.3121 5.96405C38.7663 6.91151 39.0014 7.94908 39 8.99981Z"
fill="#CCDBFD"
></path>
<path
d="M38.3201 12.0002C37.8345 13.026 37.1028 13.9157 36.1901 14.5902H27.8101C26.8973 13.9157 26.1656 13.026 25.6801 12.0002C26.2488 10.8058 27.1443 9.7971 28.2629 9.09085C29.3814 8.38461 30.6772 8.00977 32.0001 8.00977C33.3229 8.00977 34.6187 8.38461 35.7372 9.09085C36.8558 9.7971 37.7513 10.8058 38.3201 12.0002V12.0002Z"
fill="#E2EAFC"
></path>
<!-- class = "ball" for adding animation in the ball of notification bell-->
<path
class="ball"
d="M43.3099 54C42.7224 55.6911 41.7581 57.2264 40.4899 58.49C39.0563 59.9235 37.2827 60.9704 35.3349 61.533C33.3871 62.0956 31.3285 62.1555 29.3513 61.7071C27.3741 61.2587 25.5427 60.3167 24.0281 58.969C22.5135 57.6212 21.365 55.9117 20.6899 54H43.3099Z"
fill="#FFD6A5"
></path>
<path
class="ball"
d="M40.9999 54L40.5299 54.49C39.3751 55.6486 37.9956 56.5589 36.4761 57.1648C34.9567 57.7708 33.3294 58.0598 31.6942 58.0139C30.059 57.968 28.4504 57.5882 26.9673 56.898C25.4843 56.2077 24.158 55.2215 23.0699 54H40.9999Z"
fill="#FDFFB6"
></path>
<path
d="M62 54H2L6.85 50.12C10.0171 47.5859 12.5737 44.3719 14.3306 40.7161C16.0876 37.0603 16.9999 33.0561 17 29C17 25.0218 18.5804 21.2064 21.3934 18.3934C24.2064 15.5804 28.0218 14 32 14C35.9782 14 39.7936 15.5804 42.6066 18.3934C45.4196 21.2064 47 25.0218 47 29C46.9965 33.0567 47.9072 37.0621 49.6644 40.7185C51.4217 44.3749 53.9802 47.5883 57.15 50.12L62 54Z"
fill="#AC9EFF"
></path>
<path
d="M62 53.9998H21.14C25.558 49.0448 27.9996 42.6383 28 35.9998C28 32.0215 29.5804 28.2062 32.3934 25.3932C35.2065 22.5801 39.0218 20.9998 43 20.9998C43.5852 20.9959 44.1699 21.0327 44.75 21.1098C46.2256 23.4765 47.0053 26.2108 47 28.9998C46.9965 33.0565 47.9072 37.0619 49.6645 40.7183C51.4217 44.3747 53.9802 47.5881 57.15 50.1198L62 53.9998Z"
fill="#C1D3FE"
></path>
</svg>
</div>
<div>
<div class="frame">
<svg width="14px" height="60px" class="line line-1">
<path d="M2,58 C14,45 14,15 2,2"></path>
</svg>
<svg width="14px" height="60px" class="line line-2">
<path d="M2,58 C14,45 14,15 2,2"></path>
</svg>
<svg width="14px" height="60px" class="line line-3">
<path d="M2,58 C14,45 14,15 2,2"></path>
</svg>
<svg width="14px" height="60px" class="line line-4">
<path d="M12,58 C0,45 0,15 12,2"></path>
</svg>
<svg width="14px" height="60px" class="line line-5">
<path d="M12,58 C0,45 0,15 12,2"></path>
</svg>
<svg width="14px" height="60px" class="line line-6">
<path d="M12,58 C0,45 0,15 12,2"></path>
</svg>
<svg width="50px" height="54px" viewBox="0 0 50 54" class="bell">
<path
d="M1.13063517,45.0453694 C1.88439195,45.7991262 2.80138269,46.1760046 3.82399539,46.1760046 L17.2955975,46.1760046 C17.2955975,48.331653 18.0493543,50.110423 19.5592683,51.6179365 C21.0667819,53.1254501 22.8983629,53.8816074 25.0012002,53.8816074 C27.1544481,53.8816074 28.9332181,53.1254501 30.4431322,51.6179365 C31.9506457,50.110423 32.7044025,48.331653 32.7044025,46.1760046 L46.1760046,46.1760046 C47.1986173,46.1760046 48.115608,45.7991262 48.8693648,45.0453694 C49.6231216,44.2892122 50,43.3746219 50,42.3496087 C46.1760046,39.1185367 43.3194104,35.1313073 41.379807,30.3879207 C39.4402036,25.6469346 38.4704018,20.6370925 38.4704018,15.408805 C38.4704018,12.0697105 37.5006001,9.48197225 35.6138077,7.54236881 C33.6742042,5.54995439 31.033655,4.41931922 27.6945605,3.98722934 C27.8553939,3.66316194 27.9106054,3.28628355 27.9106054,2.90940516 C27.9106054,2.10043689 27.639349,1.40189159 27.0488262,0.86177925 C26.5087138,0.268855922 25.807768,0 25.0012002,0 C24.192232,0 23.5464977,0.268855922 23.0063853,0.86177925 C22.413462,1.40189159 22.1446061,2.10043689 22.1446061,2.90940516 C22.1446061,3.28628355 22.1974171,3.66316194 22.360651,3.98722934 C19.019156,4.41931922 16.3786068,5.54995439 14.4390033,7.54236881 C12.4993999,9.48197225 11.5295982,12.0697105 11.5295982,15.408805 C11.5295982,20.6370925 10.5597964,25.6469346 8.620193,30.3879207 C6.68058956,35.1313073 3.82399539,39.1185367 0,42.3496087 C0,43.3746219 0.376878391,44.2892122 1.13063517,45.0453694 L1.13063517,45.0453694 Z M20.2050026,45.6911037 C20.52907,45.6911037 20.6899035,45.8519372 20.6899035,46.1760046 C20.6899035,47.3618513 21.1195929,48.384464 21.9837726,49.1934322 C22.7903404,50.0552115 23.8153536,50.4873014 25.0012002,50.4873014 C25.3228672,50.4873014 25.4861011,50.6481348 25.4861011,50.9722022 C25.4861011,51.2938691 25.3228672,51.4571031 25.0012002,51.4571031 C23.5464977,51.4571031 22.3054395,50.9169907 21.2828268,49.894378 C20.2578136,48.8693648 19.7201018,47.6307072 19.7201018,46.1760046 C19.7201018,45.8519372 19.8809352,45.6911037 20.2050026,45.6911037 L20.2050026,45.6911037 Z"
></path>
</svg>
</div>
</div>
</body>
</html>
效果
