master

分支 (1)

管理

管理

master

svg_rotation
/
index.html

<!DOCTYPE html>
<html>
	<head>
  <meta charset="UTF-8">
  <title>用星星画星星</title>
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	</head>
		<style>
div:hover
{
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;

-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0%   {left:0px; top:0px;}
20%  {left:300px; top:0px;}
40%  {left:25px; top:190px;}
60%  {left:150px; top:-100px;}
80% {left:275px; top:200px;}
100% {left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:0px; top:0px;}
20%  {left:300px; top:0px;}
40%  {left:25px; top:190px;}
60%  {left:150px; top:-100px;}
80% {left:275px; top:200px;}
100% {left:0px; top:0px;}
}
</style>
		</head>
		<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555527014923&di=443b1f44658f0e6931d8ccfce573e6c0&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201705%2F24%2F203518l9krk8gl88zm9kks.jpg">
		<ul>
			<br>
		<b><p style="font-size:60px;color: white;text-align: center;">用星星画星星</p></b>
		</br>
		</ul>
	<div class="icon-test-list">
      	<br>
      	<br>
      <h1>
      	<ul>
      	<span class="fa-stack fa-lg">
  <i class="fa fa-star-o fa-spin fa-stack-2x" style="left:740px;color:#33FFCC;"></i>
  <i class="fa fa-star fa-spin fa-stack-1x" style=";left:740px;color:#CCFFFF;"></i>
</span>
      </h1>
      </br>
      </br>
     </ul>
 </div>
</body>
</html>