svg+css实现铃铛通知消息炫酷动态动画效果代码-html代码-BFW代码库

svg+css实现铃铛通知消息炫酷动态动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现铃铛通知消息炫酷动态动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	font-family: sans-serif;
  background: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' id='bp'%3E%3Cdefs%3E%3CradialGradient id='grad'%3E%3Cstop offset='0%25' stop-color='%231a1a1a' /%3E%3Cstop offset='100%25' stop-color='%23000' /%3E%3C/radialGradient%3E%3Cpattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='scale(0.5) skewY(10) skewX(-30)'%3E%3Cpath d='M10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100m10 0v-100m10 0v100M0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100m0 10h-100m0 10h100' fill='none' stroke='rgba(255,255,255,0.1)' /%3E%3Cpath d='M0 0l0 100 100 0 0-100z' fill='none' stroke='rgba(255,255,255,0.2)' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)' /%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E");
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
}
}

.notification-center {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 300px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.hidden {
	display: none;
}

.notification {
	padding: 0.5rem;
	color: #fff;
	border-bottom: 1px dotted #e0e0e0;
}

.notification:last-child {
	border-bottom: none;
}
.bell-icon, .circles, .blobulus, .all-notifications {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
}
.circles {
	height: 190px;
	width: 190px;
}
.blobulus {
	height: 300px;
	width: 300px;
}
.bell-icon {
	height: 100px;
	width: 100px;
}
</style>

  
  
  
</head>

<body translate="no">
  <div class="notification-center">
	<div class="notifications hidden">
		<div class="notification">
			<p>👍 Abdul liked your post</p>
		</div>
		<div class="notification">
			<p>💬 Sierra commented on your post</p>
		</div>
		<div class="notification">
			<p>👋 Kai accepted your invitation</p>
		</div>
		<div class="notification">
			<p>🎥 Oscar is going live!</p>
		</div>
	</div>
</div>

<div class="all-notifications">
	<svg viewBox="-20 -20 140 140" class="blobulus">
		<path d="M 50 0 c 30 0 50 20 50 50 c 0 30 -20 50 -50 50 c -30 0 -50 -20 -50 -50 c 0 -30 20 -50 50 -50" fill="none" stroke="#ddd" stroke-opacity="0.7" stroke-width="1" stroke-dasharray="3" opacity="0.5">
			<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 50 50; 360 50 50" dur="12419ms" begin="-1733ms" repeatCount="indefinite" />
			<animate attributeName="d" values=.........完整代码请登录后点击上方下载按钮下载查看