svg+css实现铃铛铃声响起振动动画效果代码-html代码-BFW代码库

svg+css实现铃铛铃声响起振动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现铃铛铃声响起振动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        .frame {
    	position:absolute;
    	top:50%;
    	left:50%;
    	width:400px;
    	height:400px;
    	margin-top:-200px;
    	margin-left:-200px;
    	border-radius:2px;
    	box-shadow:4px 8px 16px 0 rgba(0,0,0,0.1);
    	overflow:hidden;
    	background:salmon;
    	-webkit-font-smoothing:antialiased;
    	-moz-osx-font-smoothing:grayscale;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    .curve {
    	width:320px;
    	height:100px;
    	fill:none;
    	stroke:white;
    	stroke-linecap:round;
    	stroke-linejoin:round;
    }
    #bell {
    	position:absolute;
    	top:40%;
    	left:40%;
    	width:60px;
    	height:70px;
    	fill:white;
    	-webkit-transform-origin:50% 0;
    	transform-origin:50% 0;
    	-webkit-animation:shake-bell 3s infinite ease;
    	animation:shake-bell 3s infinite ease;
    }
    @-webkit-keyframes shake-bell {
    	5%,25%,45% {
    	-webkit-transform:rotate(8deg);
    	transform:rotate(8deg);
    }
    0%,10%,30%,50% {
    	-webkit-transform:rotate(-8deg);
    	transform:rotate(-8deg);
    }
    15%,35%,55% {
    	-webkit-transform:rotate(4deg);
    	transform:rotate(4deg);
    }
    20%,40%,60% {
    	-webkit-transform:rotate(-4deg);
    	transform:rotate(-4deg);
    }
    65%,100% {
    	-webkit-transform:rotate(0deg);
    	transform:rotate(0deg);
    }
    }@keyframes shake-bell {
    	5%,25%,45% {
    	-webkit-transform:rotate(8deg);
    	transform:rotate(8deg);
    }
    0%,10%,30%,50% {
    	-webkit-transform:rotate(-8deg);
    	transform:rotate(-8deg);
    }
    15%,35%,55% {
    	-webkit-transform:rotate(4deg);
    	transform:rotate(4deg);
    }
    20%,40%,60% {
    	-webkit-transform:rotate(-4deg);
    	transform:rotate(-4deg);
    }
    65%,100% {
    	-webkit-transform:rotate(0deg);
    	transform:rotate(0deg);
    }
    }
    </style>
</head>

<body>
    <div class="frame"><svg class="curve" viewBox="0 0 320 100"><defs><path id="c1"><animate id="p1" 						 attributeName="d" 						 dur="2s"						 repeatCount="indefinite" 						values="				M 80,20 C 70,30 70,70 80,80;				M 10,0 C 0,30 0,70 10,100"		 /><animate attributeName="stroke-width" 						 values="4;2" dur="2s" 						 repeatCount="indefinite" 						 begin="p1.begin"/><animate attributeType="CSS"						 attributeName="opacity"            	from="1" to="0" dur="2s"						begin="p1.begin"						repeatCount="indefinite" />.........完整代码请登录后点击上方下载按钮下载查看