js+css封装的角标铃铛摇摆新消息api动画效果代码-html代码-BFW代码库

js+css封装的角标铃铛摇摆新消息api动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css封装的角标铃铛摇摆新消息api动画效果代码

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

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

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

  
  
  
<style>
body {
  background-color: gainsboro;
}
button {
	cursor: pointer;
	background: none;
	border: 1px solid #fff;
	border-radius: 5px;
	padding: 4px;
	color: #555;
}
button:hover {
	background: #fff;
}
button:active {
	background: #0ff;
}
.notification-bell {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 80px;
	width: 80px;
}
</style>

  
  
</head>

<body translate="no">
  <div class="notification-bell">
	<svg class="bell-icon" viewBox="0 0 100 100" height="100%" width="100%">
		<defs>
			<path id="bellBody9" d="M 44 8 A 1 1 0 0 1 56 8 V 12 Q 80 17 80 41 Q 80 61 90 69 C 94 72 92 80 86 80 H 14 C 8 80 6 72 10 69 Q 20 61 20 41 Q 20 17 44 12 Z" fill="#000">
				<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 50 45; -12 50 45; 0 50 45; 12 50 45; 0 50 45" dur="400ms" begin="0s" repeatCount="9" keyTimes="0;0.4;0.5;0.6;1" keySplines="0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98; 0.67 0.01 0.39 0.98" calcMode="spline"></animateTransform>
			</path>
			<circle id="badge9" cx="83" cy="27" r="15" fill="steelblue">
				<animate attributeName="r" values="15;17;15" dur="400ms" begin="0s" repeatCount="9"></animate>
			</circle>
			<mask id="mBell9">
				<rect x="0" y="0" width="100" height="100" fill="#fff"></rect>
				<use href="#bellBody9" fill=&q.........完整代码请登录后点击上方下载按钮下载查看