master

分支 (1)

管理

管理

master

svg_vector
/
index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
	<body bgcolor="red"></body>

<center>
	<h1>revolving angry face</h1>

<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="angry" class="svg-inline--fa fa-angry fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm0-144c-33.6 0-65.2 14.8-86.8 40.6-8.5 10.2-7.1 25.3 3.1 33.8s25.3 7.2 33.8-3c24.8-29.7 75-29.7 99.8 0 8.1 9.7 23.2 11.9 33.8 3 10.2-8.5 11.5-23.6 3.1-33.8-21.6-25.8-53.2-40.6-86.8-40.6zm-48-72c10.3 0 19.9-6.7 23-17.1 3.8-12.7-3.4-26.1-16.1-29.9l-80-24c-12.8-3.9-26.1 3.4-29.9 16.1-3.8 12.7 3.4 26.1 16.1 29.9l28.2 8.5c-3.1 4.9-5.3 10.4-5.3 16.6 0 17.7 14.3 32 32 32s32-14.4 32-32.1zm199-54.9c-3.8-12.7-17.1-19.9-29.9-16.1l-80 24c-12.7 3.8-19.9 17.2-16.1 29.9 3.1 10.4 12.7 17.1 23 17.1 0 17.7 14.3 32 32 32s32-14.3 32-32c0-6.2-2.2-11.7-5.3-16.6l28.2-8.5c12.7-3.7 19.9-17.1 16.1-29.8z"></path></svg>
<br>

<style type="text/css">
.fa-angry {
 animation: haha 2s infinite;
 animation-timing-function:linear;
}

@keyframes haha{
0% { transform:rotate(0deg);}

50% { transform : rotate(-270deg)}
}

.fa-angry{
 animation: hahaha 2s infinite;
 animation-timing-function:linear;
}

@keyframes hahaha{
0% { transform:rotate(0deg);}

50% { transform : rotate(270deg)}
}


</style>
</center>
</body>
</html>