<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit" />
<title>动画测试</title>
<meta name="keywords" content="动画测试" />
<meta name="description" content="动画测试" />
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- <link th:href="@{favicon.ico}" rel="stylesheet"/>-->
<!-- <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" /> -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"
crossorigin="anonymous"
/>
<style>
body {
height: auto;
}
.enlarge {
cursor: pointer;
transition: all 0.6s;
}
.enlarge:hover {
transform: scale(1.13);
}
/*background-size: 100% 100%;*/
.bj {
/* background: url(./img/mainImg/bg1.png) no-repeat center; */
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100% 100%;
}
.header {
width: 100%;
height: 1.15rem;
padding-top: 0.3rem;
display: flex;
position: relative;
}
.header_center {
width: 5.8rem;
height: 0.36rem;
}
.header_center img {
width: 5.8rem;
}
.header_left {
flex: 1;
margin-top: -0.05rem;
background: url(./img/left_h.png) no-repeat center right;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100% 100%;
color: #ffffff;
line-height: 0.9rem;
}
.header_right {
flex: 1;
margin-top: -0.05rem;
background: url(./img/left_r.png) no-repeat center left;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100% 100%;
color: #ffffff;
line-height: 0.9rem;
}
.left {
float: left;
display: block;
}
.header_right a {
margin-right: 0.5rem;
color: #ffffff;
}
.header_right a > img {
width: 0.22rem;
height: 0.22rem;
}
.header_right a .user_icon {
width: 0.18rem;
height: 0.22rem;
}
.right {
float: right;
display: block;
}
.clearfix {
clear: both;
overflow: hidden;
content: '';
}
#rq {
margin-left: 0.2rem;
}
#datetime {
text-indent: 0.3rem;
}
.list_tk {
width: 1.35rem;
flex-direction: column;
display: flex;
position: absolute;
top: 1rem;
right: 0.68rem;
background: url(./img/setuptk.png) no-repeat 100% 100%;
background-size: 100% 100%;
padding: 0.15rem 0;
padding-bottom: 0.05rem;
display: none;
z-index: 100;
}
.list_tk a {
display: block;
color: #ffffff;
text-align: center;
font-size: 0.18rem;
height: 0.4rem;
line-height: 0.4rem;
}
.list_tk a:hover {
color: #8ff2ff;
}
</style>
<style>
body {
height: auto !important;
background-color: #020432;
}
html {
min-height: 100% !important;
overflow-y: hidden;
overflow-x: hidden;
}
.bgcolor {
min-width: 1.2rem;
height: auto !important;
background-size: 100% 100%;
}
/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.section3 {
width: 100%;
height: 8rem;
margin: 0 auto 0;
/*background: url(./img/mainImg/bg.png) no-repeat center;*/
background-size: 100% 100%;
}
.section3 > img {
width: 100%;
height: 100%;
}
.u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section3 .ui_base {
position: absolute;
left: 50%;
top: 1.5rem;
transform: translate(-50%, 3rem);
width: 4rem;
height: 0;
-webkit-perspective: 10rem;
-moz-perspective: 10rem;
-ms-perspective: 10rem;
-o-perspective: 10rem;
perspective: 10rem;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 50%;
}
.section3 .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 2.25rem;
height: 1.57rem;
line-height: 1.57rem;
text-align: center;
background: url(./img/zfzs.png) no-repeat;
left: 0.9rem;
top: 1rem;
}
.ball_c {
}
.section3 .ball_c img {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.1rem;
}
.section3 .ball_c p {
margin-top: -0.7rem;
}
.section3 .ball_c p a {
font-size: 0.19rem;
font-family: '';
}
.section3 .base {
-webkit-transform: rotateX(80deg) rotateY(-10deg);
-moz-transform: rotateX(80deg) rotateY(-10deg);
-o-transform: rotateX(80deg) rotateY(-10deg);
-ms-transform: rotateX(80deg) rotateY(-10deg);
transform: rotateX(80deg) rotateY(-10deg);
position: relative;
width: 3.5rem;
height: 3.5rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: -1.2rem;
left: 0.3rem;
3D地球转动动画，适用于大盘展示数据，更加高科技效果
需积分: 11 167 浏览量
2023-03-31
23:07:41
上传
评论
收藏 1.23MB ZIP 举报
3D动画.zip （15个子文件） 
test 
.DS_Store 6KB img .DS_Store 6KB yuan.psd 272KB
yuan.png 58KB yuan1.png 17KB mainImg icon6.png 15KB icon1.png 76KB icon4.png 16KB bg.psd 865KB icon5.png 12KB bg1.png 124KB bg.png 69KB icon3.png 15KB icon2.png 16KB
index.html 34KB资源评论
大小小丹
- 粉丝: 1151
- 资源: 3
最新资源
- Docker容器配置进阶
- tensorflow-gpu-2.7.4-cp37-cp37m-manylinux2010-x86-64.whl
- 多段线、 圆、弧转多段线（仅我可见）
- tensorflow-2.7.2-cp38-cp38-manylinux2010-x86-64.whl
- yeyue-p8Yi4-ve4a83792.apk
- tensorflow-gpu-2.7.3-cp38-cp38-manylinux2010-x86-64.whl
- 五相感应电机矢量控制模型MATLAB
- RGLED (1) (1).circ
- IMG_20240427_215747.jpg
- python下前端WEB学习笔记
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
