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

代码语言:html

所属分类:动画

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

代码标签: 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 inf.........完整代码请登录后点击上方下载按钮下载查看

网友评论0