经验分享程序开发文档资料数据资源其它资源

HTML5 SVG可爱笑脸动画代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 SVG可爱笑脸动画代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

HTML5 SVG可爱笑脸动画代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 SVG可爱笑脸动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <div id="slime_conteneur">
        <div class="slime" id="slime1">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
            <g class="corps">
            <path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
				C92,0.927,126.153,36.523,126.153,71.798z" />
		</g>
            <g class="ombre">
            <path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
				c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z" />
		</g>
            <g class="reflet">
            <ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75" />
		</g>
            <g class="yeux">
            <g>
            <path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z" />
            <circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583" />
            <path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z" />
            <circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583" />
			</g>
		</g>
            <g class="bouche">
            <g>
            <path fill="#A862A6">
            <animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
					M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
			M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
				</path>
            <path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
					C52.679,84.25,52.656,84.25,52.678,84.25z" />
			</g>
		</g>
		</svg>
        </div>
        <div class="slime" id="slime2">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
            <g class="corps">
            <path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
				C92,0.927,126.153,36.523,126.153,71.798z" />
		</g>
            <g class="ombre">
            <path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
				c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z" />
		</g>
            <g class="reflet">
            <ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75" />
		</g>
            <g class="yeux">
            <g>
            <path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z" />
            <circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583" />
            <path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z" />
            <circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583" />
			</g>
		</g>
            <g class="bouche">
            <g>
            <path fill="#A862A6">
            <animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
					M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
			M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
				</path>
            <path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
					C52.679,84.25,52.656,84.25,52.678,84.25z" />
			</g>
		</g>
		</svg>
        </div>
        <div class="slime" id="slime3">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
            <g class="corps">
            <path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
				C92,0.927,126.153,36.523,126.153,71.798z" />
		</g>
            <g class="ombre">
            <path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
				c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z" />
		</g>
            <g class="reflet">
            <ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75" />
		</g>
            <g class="yeux">
            <g>
            <path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z" />
            <circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583" />
            <path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z" />
            <circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583" />
			</g>
		</g>
            <g class="bouche">
            <g>
            <path fill="#A862A6">
            <animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
					M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
			M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
				</path>
            <path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
					C52.679,84.25,52.656,84.25,52.678,84.25z" />
			</g>
		</g>
		</svg>
        </div>
        <div class="slime" id="slime4">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
            <g class="corps">
            <path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
				C92,0.927,126.153,36.523,126.153,71.798z" />
		</g>
            <g class="ombre">
            <path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
				c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z" />
		</g>
            <g class="reflet">
            <ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75" />
		</g>
            <g class="yeux">
            <g>
            <path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z" />
            <circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583" />
            <path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
					C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
					c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z" />
            <circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583" />
			</g>
		</g>
            <g class="bouche">
            <g>
            <path fill="#A862A6">
            <animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
					M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
			M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
			c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
				</path>
            <path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
					C52.679,84.25,52.656,84.25,52.678,84.25z" />
			</g>
		</g>
		</svg>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

//Colors from:http://flatuicolors.com/function changeFond(){
	var couleurFond;
	var numFond = Math.floor((Math.random() * 10) + 1);
	switch (numFond){
	case 1:couleurFond = "#16a085";
	break;
	case 2:couleurFond = "#27ae60";
	break;
	case 3:couleurFond = "#2980b9";
	break;
	case 4:couleurFond = "#8e44ad";
	break;
	case 5:couleurFond = "#2c3e50";
	break;
	case 6:couleurFond = "#f39c12";
	break;
	case 7:couleurFond = "#d35400";
	break;
	case 8:couleurFond = "#c0392b";
	break;
	case 9:couleurFond = "#bdc3c7";
	break;
	case 10:couleurFond = "#7f8c8d";
	break;
}
document.body.style.background = couleurFond;
}
function changeCouleur(){
	var tabNum=[];
	while (tabNum.length<4){
	var numSlime = Math.floor((Math.random() * 10) + 1);
	if (tabNum.indexOf(numSlime) == -1){
	tabNum.push(numSlime);
}
}
for (var i = 0;
	i < 4;
	i++){
	var couleurSlime;
	var corpsSlime = document.getElementsByClassName("corps");
	switch (tabNum[i]){
	case 1:couleurSlime = "#1abc9c";
	break;
	case 2:couleurSlime = "#2ecc71";
	break;
	case 3:couleurSlime = "#3498db";
	break;
	case 4:couleurSlime = "#9b59b6";
	break;
	case 5:couleurSlime = "#34495e";
	break;
	case 6:couleurSlime = "#f1c40f";
	break;
	case 7:couleurSlime = "#e67e22";
	break;
	case 8:couleurSlime = "#e74c3c";
	break;
	case 9:couleurSlime = "#ecf0f1";
	break;
	case 10:couleurSlime = "#95a5a6";
	break;
}
corpsSlime[i].style.fill = couleurSlime;
}
}
changeFond();
	changeCouleur();

CSS代码(style.css):

body{margin:0;}
body,html{height:100%;}
#slime_conteneur{display:inline-block;text-align:center;width:100%;margin-top:10%;}
.slime{display:inline-block;width:125px;height:100px;margin:auto;padding:5px 20px;-webkit-animation:respire 3s;animation:respire 3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-transition-timing-function:ease;transition-timing-function:ease;}
@-webkit-keyframes respire{0%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1) scaleY(1);}
50%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1.05) scaleY(0.95);}
100%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1) scaleY(1);}
}
@keyframes respire{0%{transform-origin:50% 100%;transform:scaleX(1) scaleY(1);}
50%{transform-origin:50% 100%;transform:scaleX(1.05) scaleY(0.95);}
100%{transform-origin:50% 100%;transform:scaleX(1) scaleY(1);}
}
.slime:hover{-webkit-animation:changeForme 1s;animation:changeForme 1s;/*animation-iteration-count:infinite;*/
-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
@-webkit-keyframes changeForme{0%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1) scaleY(1);}
40%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(0.8) scaleY(1.2);}
50%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1.2) scaleY(0.8);}
60%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(0.9) scaleY(1.1);}
70%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1.2) scaleY(0.8);}
80%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(0.9) scaleY(1.1);}
90%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1.2) scaleY(0.8);}
100%{-webkit-transform-origin:50% 100%;-webkit-transform:scaleX(1) scaleY(1);}
}
@keyframes changeForme{0%{transform-origin:50% 100%;transform:scaleX(1) scaleY(1);}
40%{transform-origin:50% 100%;transform:scaleX(0.8) scaleY(1.2);}
50%{transform-origin:50% 100%;transform:scaleX(1.2) scaleY(0.8);}
60%{transform-origin:50% 100%;transform:scaleX(0.9) scaleY(1.1);}
70%{transform-origin:50% 100%;transform:scaleX(1.2) scaleY(0.8);}
80%{transform-origin:50% 100%;transform:scaleX(0.9) scaleY(1.1);}
90%{transform-origin:50% 100%;transform:scaleX(1.2) scaleY(0.8);}
100%{transform-origin:50% 100%;transform:scaleX(1) scaleY(1);}
}
.slime .yeux{-webkit-animation:cligneYeux 3s;animation:cligneYeux 3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
@-webkit-keyframes cligneYeux{0%{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(1);transform:scaleY(1);}
70%{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(1);transform:scaleY(1);}
80%{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(0.2);transform:scaleY(0.2);}
90%{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(1);transform:scaleY(1);}
100%{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(1);transform:scaleY(1);}
}
@keyframes cligneYeux{0%{transform-origin:62.5px 80px;transform:scaleY(1);}
70%{transform-origin:62.5px 80px;transform:scaleY(1);}
80%{transform-origin:62.5px 80px;transform:scaleY(0.2);}
90%{transform-origin:62.5px 80px;transform:scaleY(1);}
100%{transform-origin:62.5px 80px;transform:scaleY(1);}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.90 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.90 KB
立即下载
刘霞馥
了解
打赏作者 鼓励作者
Html 动画效果1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章