zhinanzhen

来源：互联网发布：重大资产重组知乎编辑：程序博客网时间：2024/06/05 22:33

css3的动画效果：animation实现指南针旋转，执行了两个动画：
1、从屏幕左边滚动出来
2、绕着中心旋转

效果图：
这里写图片描述

另外的三张图片
指南针背景

背景图

html

<div class="bodyBg"><img src="images/bg1.jpg"/></div><!--指南针--><div class="container">    <div class="bdDiv">        <span class="span1">东</span>        <span class="span2">南</span>        <span class="span3">西</span>        <span class="span4">北</span>        <div class="bgDiv"><img src="images/bg.png"/></div>        <div class="zhizhen"><img src="images/zhizhen.png"/></div>    </div></div>

css

@charset "utf-8";/* CSS Document */body{ margin:0; padding:0; overflow:hidden;}.bodyBg{ position:fixed; left:0px; top:0px; width:100%; height:100%;}.container{ width:400px; height:400px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border:1px dashed #fff; border-radius:50%; animation:run-inner0 5s;}.bdDiv{ position:absolute; left:0px; top:0px; width:100%; height:100%; animation:run-inner 10s infinite 5s linear;}.bgDiv{ position:absolute; left:50%; top:50%; margin-left:-165px; margin-top:-165px;}.zhizhen{ position:absolute; left:50%; top:50%; margin-left:-12.5px; margin-top:-106.5px; animation:run-inner1 12s infinite .1s linear;}.bdDiv span{ position:absolute; color:#fff; font-size:14px; font-weight:bold;}.bdDiv .span1{ right:9px; top:195px;}.bdDiv .span2{ bottom:9px; left:195px;}.bdDiv .span3{ left:9px; top:195px;}.bdDiv .span4{ top:9px; left:195px;}@keyframes run-inner0{ from{ left:-400px;} to{ left:50%; margin-left:-200px;} 0%{ transform:rotate(0deg)} 100%{ transform:rotate(360deg)}    }@keyframes run-inner {0% {transform:rotate(0deg)}25% {transform:rotate(90deg)}50% {transform:rotate(-90deg)}75% {transform:rotate(90deg)}100% {transform:rotate(0deg)}}@keyframes run-inner1 {0% {transform:rotate(0deg)}25% {transform:rotate(30deg)}50% {transform:rotate(-30deg)}75% {transform:rotate(30deg)}100% {transform:rotate(0deg)}}

js (自行添加：jquery-1.11.1.min.js文件)
（注：另外我没做兼容）

0 0