前端JS特效第6集：CSS3风水罗盘旋转动画特效

本文链接：https://blog.csdn.net/2401_85903333/article/details/139998933

CSS3风水罗盘旋转动画特效，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3风水罗盘旋转动画特效 - PHP中文网</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="compass-main">
	<div class="compassdiv">
    	<div class="compass-c"></div>
        <div class="compass w h">
        	<div class="compass-1 w h"></div>
            <div class="compass-2 w h"></div>
            <div class="compass-3 w h"></div>
            <div class="compass-4 w h"></div>
            <div class="compass-5 w h"></div>
            <div class="compass-6 w h"></div>
            <div class="compass-7 w h"></div>
            <div class="compass-8 w h"></div>
            <div class="compass-9 w h"></div>
            <div class="compass-10 w h"></div>
            <div class="compass-11 w h"></div>
            <div class="compass-12 w h"></div>
            <div class="compass-13 w h"></div>
            <div class="compass-14 w h"></div>
            <div class="compass-15 w h"></div>
            <div class="compass-16 w h"></div>
            <div class="compass-17 w h"></div>
            <div class="compass-18 w h"></div>
            <div class="compass-19 w h"></div>
        </div>
    </div>
</div>


</body>
</html>

全部代码：CSS3风水罗盘旋转动画特效