<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5+SVG 逼真的透明罗盘补间动画</title>
<style>
body {
background-image: url("img/isle.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
overflow: hidden;
}
#club_animation {
display: block;
height: 400px;
width: 400px;
background: url('img/check.svg');
margin: 30px auto 0 auto;
background-size: 175px;
border-radius: 300px;
position: relative;
}
#emblem_hold {
width: 400px;
height: 400px;
float: left;
position: absolute;
top: 0;
left: 0;
}
#back_hold {
width: 400px;
height: 400px;
float: left;
position: relative;
}
#emblem {
width: 400px;
height: 400px;
float: left;
position: relative;
visibility: hidden;
min-height: 0;
}
#emblem img {
top: -18px;
left: -24px;
}
#map {
position: absolute;
width: 400px;
left: -1px;
top: -36px;
}
#map2 {
position: absolute;
width: 523px;
left: -53px !important;
opacity: 0;
top: -117px !important;
}
#one {
z-index: 1;
opacity: 0.2;
}
#two {
z-index: 2;
opacity: 0.1;
}
#three {
z-index: 77;
}
#four {
z-index: 4;
}
#five {
z-index: 5;
}
#six {
z-index: 6;
}
#seven {
z-index: 7;
}
#eight {
z-index: 10;
}
#nine {
z-index: 8;
opacity: 0.1;
}
svg#ten {
position: relative;
z-index: 10;
width: 400px;
height: 400px;
top: 14px;
}
#bmp,
#building_left,
#building_right,
#dish,
#pole,
#rocket,
#tank,
#background,
#paintball_t {
position: absolute;
visibility: hidden;
min-height: 0;
}
#paintball_t {
font-size: 40px;
color: #eaeaea;
top: 498px;
left: 310px;
text-shadow: 0 0px 0 #c9cfce, 0 1px 0 #bcc2c2, 0 1px 0 #afb6b6, 0 1px 0 #a4adac, 0 1px 0 #9fa8a7, 0 1px 0 #99a3a2, 0 1px 0 #97a1a0, 0 1px 0 #949e9d, 0 0 3px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .2), 0 1px 10px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .3);
}
#building_left {
left: 45px;
top: 129px;
opacity: 0.7;
}
#building_right {
left: 415px;
top: 240px;
opacity: 0.8;
}
#dish {
left: 200px;
top: 0px;
opacity: 0.8;
}
#pole {
left: 440px;
top: 20px;
opacity: 0.9;
}
#rocket {
left: 580px;
top: 65px;
opacity: 0.9;
}
#tank {
bottom: 51px;
left: 90px;
opacity: 0.7;
}
#bmp {
bottom: 60px;
left: 520px;
opacity: 0.8;
}
#background {
top: 8px;
left: 60px;
opacity: 0;
}
#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight,
#nine,
#ten {
position: absolute;
left: 0;
}
ul#text_right,
ul#text_left {
list-style: none;
float: left;
margin: 182px 15px 0 80px;
padding: 0;
-webkit-padding-start: 0px;
}
ul#text_right {
margin: 182px 0px 0 0px;
}
ul#text_right li,
ul#text_left li {
color: #168fce;
float: left;
text-align: center;
font-size: 100px;
font-family: sanserif, arial;
font-weight: bold;
visibility: hidden;
min-height: 0;
color: #eaeaea !important;
font-weight: bold;
text-shadow: 0 1px 0 #c9cfce, 0 2px 0 #bcc2c2, 0 3px 0 #afb6b6, 0 4px 0 #a4adac, 0 5px 0 #9fa8a7, 0 6px 0 #99a3a2, 0 7px 0 #97a1a0, 0 8px 0 #949e9d, 0 0 5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .3);
/*
text-shadow originated from: http://codepen.io/zitrusfrisch
*/
opacity: 0.5 !important;
}
.superShadow {
color: #eaeaea !important;
font-weight: bold;
font-size: 172px;
text-shadow: 0 1px 0 #c9cfce, 0 2px 0 #bcc2c2, 0 3px 0 #afb6b6, 0 4px 0 #a4adac, 0 5px 0 #9fa8a7, 0 6px 0 #99a3a2, 0 7px 0 #97a1a0, 0 8px 0 #949e9d, 0 0 5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .3);
opacity: 0.5 !important;
}
</style>
</head>
<body>
<link rel='stylesheet' href='css/jquery-ui.min.css'>
<section id="club_animation">
<section id="back_hold">
</section>
<!-- back hold -->
<section id="emblem_hold">
<div id="emblem">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="450px" height="450px" viewBox="-20.148 -85.599 450 450" enable-background="new -20.148 -85.599 450 450"
xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<defs>
</defs>
<path id="map_fill" fill="rgba(255, 255, 255, 0.26)" d="M425.29,127.052c-0.28-0.918-0.587-1.35-0.611-2.549c-0.026-1.197-0.257-2.039-0.665-2.779 c-0.406-0.738-1.477-2.422-2.063-2.982c-0.588-0.561-1.76-0.992-1.912-1.732c-0.153-0.739-0.586-2.039-0.23-2.752 c0.357-0.715-0.357-0.994,0.23-1.25c0.586-0.255,0.916-0.255,1.3-0.611c0.383-0.357,0.917-0.791,0.103-0.791 c-0.816,0-1.837,0.077-2.014-0.229c-0.18-0.306-0.23-0.638-0.688-0.815c-0.46-0.179-0.996-0.434-1.504-0.868 c-0.51-0.432-0.945-0.687-1.047-1.605c-0.102-0.917-0.484-2.472-0.331-3.084c0.153-0.611,0.841-1.121,1.249-1.58 s0.842-2.269,0.281-2.752c-0.562-0.484-2.5-0.409-3.034-0.611c-0.535-0.205-1.784-0.664-2.345-1.428 c-0.561-0.766-1.707-1.912-1.682-2.626c0.024-0.714-0.563-1.224,0.281-1.454c0.84-0.229,1.986-0.457,1.579-1.375 s-1.427-1.146-1.913-1.504c-0.482-0.357-1.248-0.739-1.553-0.256c-0.307,0.485-0.384,1.046-1.123,0.561 c-0.738-0.482-1.25-0.891-1.81-1.273s-0.739-1.174-1.224-1.836s-1.096-1.248-1.734-0.713c-0.636,0.535-1.654,0.918-1.146,1.401 c0.511,0.485,0.895,0.919,0.23,1.173c-0.663,0.254-1.174,0.612-2.244-0.434c-1.069-1.045-1.783-2.727-2.395-3.747 c-0.611-1.02-0.383-1.528-1.072-2.217c-0.688-0.688-1.426-1.224-2.013-1.811c-0.587-0.585-1.249-1.528-1.452-2.19 c-0.205-0.664-0.74-0.867-0.077-0.996c0.663-0.127,0.892-0.381,0.815-0.917c-0.012-0.083-0.023-0.179-0.035-0.271 c0.063-0.205,0.237-0.307,0.648-0.15c0.865,0.332,1.682,0,1.299-0.611c-0.383-0.612-1.249-1.07-1.402-2.27 c-0.152-1.197-0.968-2.727-0.305-2.522s1.146,1.069,2.242,1.58s1.555,0.511,1.198-0.638c-0.356-1.146-1.86-2.523-1.528-4.18 c0.33-1.657,0.66-3.772,1.426-4.512c0.766-0.74,1.505-1.325,2.498-1.248c0.994,0.075,2.09,0.279,2.422-0.383 c0.332-0.664,0.459-0.178-0.738-1.428c-1.199-1.25-1.912-2.294-2.014-3.288c-0.104-0.995,0.179-2.218-0.408-2.931 c-0.587-0.715-1.097-1.275-1.121-2.014c-0.026-0.74-0.332-0.867-0.511-1.633c-0.179-0.764-0.077-1.019-0.407-1.631 c-0.332-0.611-0.153-0.842-0.23-1.605c-0.076-0.766,0.051-1.301-0.127-2.167c-0.18-0.866,0.152-0.968-0.408-2.091 c-0.561-1.121-0.535-2.217-0.561-2.981s-0.205-1.122-0.434-1.683s-0.407-0.738-0.969-0.841c-0.56-0.102-1.146-0.612-0.382-0.893 s1.579-0.382,2.065-1.196c0.483-0.817,1.172-1.76,1.758-2.244s0.408-0.611,0.051-1.197c-0.356-0.587-1.121-1.352-1.529-1.505 c-0.407-0.153-0.867,0-1.122,0.255c-0.253,0.256-0.585,0.178-0.815-0.102c-0.229-0.281-0.355-0.613-1.096-0.255 c-0.738,0.356-1.172,1.223-1.682,1.274c-0.51,0.051-1.097,0.152-1.556-0.306c-0.458-0.459-0.892-1.402-1.274-1.046 c-0.382,0.357-0.535,0.638-1.197,0.638s-0.994-0.638-1.198-0.356s0.128,0.662-0.306,1.146s-0.791,0.943-1.479,0.918 c-0.689-0.026-1.326-0.459-1.606-0.026c-0.28,0.434,0.103,1.225-0.178,1.733c-0.28,0.51-1.198,0.944-1.478,0.816 c-0.281-0.129,0.279-1.325,0.561-1.861c0.279-0.535,0.789-0.866,1
HTML5+SVG实现逼真的透明罗盘指针旋转动画效果源码.zip
版权申诉
159 浏览量
2022-11-03
23:51:23
上传
评论
收藏 464KB ZIP 举报
HTML5+SVG实现逼真的透明罗盘指针旋转动画效果源码.zip （15个子文件） 
132686862503637837 css 
jquery-ui.min.css 29KB img 
park_3.svg 22KB park_1.svg 3KB park_2.svg 1KB park_8.svg 1KB park_6.svg 1KB park_9.svg 50KB
isle.jpg 277KB check.svg 2KB
park_5.png 7KB park_4.svg 6KB
index.html 56KB js jquery-1.11.1.min.js 94KB jquery-ui.min.js 233KB TweenMax.min.js 105KB资源评论
毕业_设计
- 粉丝: 1945
- 资源: 1万+
最新资源
- java-leetcode题解之第111题二叉树的最小深度.zip
- java-leetcode题解之第110题平衡二叉树.zip
- java-leetcode题解之第109题有序链表转换二叉搜索树.zip
- java-leetcode题解之第108题将有序数组转换为二叉搜索树.zip
- java-leetcode题解之第107题二叉树的层序遍历II.zip
- java-leetcode题解之第102题二叉树的层序遍历.zip
- java-leetcode题解之第103题二叉树的锯齿形层序遍历.zip
- java-leetcode题解之第104题二叉树的最大深度.zip
- java-leetcode题解之第173题二叉搜索树迭代器.zip
- java-leetcode题解之第100题相同的树.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
