392 lines
26 KiB
HTML
392 lines
26 KiB
HTML
<div class="page-header header-filter">
|
||
<div class="night">
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<!--<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>
|
||
<div class="shooting_star"></div>-->
|
||
</div>
|
||
<div class="squares square1 ashow"></div>
|
||
<div class="squares square2 ashow"></div>
|
||
<div class="squares square3 ashow"></div>
|
||
<div class="squares square4 ashow"></div>
|
||
<div class="squares square5 ashow"></div>
|
||
<div class="squares square6 ashow"></div>
|
||
<div class="squares square7 ashow"></div>
|
||
<div class="container">
|
||
<div class="content-center brand">
|
||
<h1 class="h1-seo">
|
||
<svg id="gvsds-svg" class="w-full max-w-6xl" viewBox="0 0 186.624 65.96" xmlns="http://www.w3.org/2000/svg">
|
||
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke-width="0.25mm" fill="url(#gradient)" style="stroke-width:0.25mm;"></g>
|
||
<defs>
|
||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#00CFFD" />
|
||
<stop offset="50%" stop-color="#7B61FF" />
|
||
<stop offset="100%" stop-color="#165DFF" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</h1>
|
||
<!-- 初始隐藏英文标题 -->
|
||
<h3 class="mt-2" id="seo2" style="opacity: 0; transition: opacity 1s ease-in-out;">Galaxy Vantone Software Development Studio</h3>
|
||
<!-- 初始隐藏中文标题 -->
|
||
<h3 class="mt-2" id="seo3" style="opacity: 0; transition: opacity 1s ease-in-out;">银河锋锐软件开发工作室</h3>
|
||
<div class="bg mt-2">
|
||
<h4 class="description typetext mt-2">
|
||
<span class="typewriter mt-2">SHOW...</span>
|
||
<span class="textpointer"></span>
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section section-nucleo-icons" id="quality">
|
||
<img src="assets/img/path2.png" class="path bshow" alt="path2">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8 col-md-12">
|
||
<h2 class="title bshow">我们的性质</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="principle-container">
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-face-smile"></i>
|
||
</div>
|
||
<div class="principle-text">非盈利</div>
|
||
<div class="principle-description">不以盈利为目的，致力于公益事业</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-read"></i>
|
||
</div>
|
||
<div class="principle-text">学习性</div>
|
||
<div class="principle-description">不断学习新知识，提升自身能力</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-group"></i>
|
||
</div>
|
||
<div class="principle-text">合作性</div>
|
||
<div class="principle-description">积极与他人合作，共同完成项目</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-release"></i>
|
||
</div>
|
||
<div class="principle-text">公开性</div>
|
||
<div class="principle-description">保持信息公开，接受社会监督</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-star"></i>
|
||
</div>
|
||
<div class="principle-text">兴趣性</div>
|
||
<div class="principle-description">基于兴趣开展活动，享受工作乐趣</div>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<div class="principle-container">
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-fire"></i>
|
||
</div>
|
||
<div class="principle-text">创新性</div>
|
||
<div class="principle-description">不断探索创新，为项目注入新活力</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-templeate-1"></i>
|
||
</div>
|
||
<div class="principle-text">专业性</div>
|
||
<div class="principle-description">专业知识和技能，提供高质量服务</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-flag"></i>
|
||
</div>
|
||
<div class="principle-text">目标性</div>
|
||
<div class="principle-description">明确目标，有条不紊推进项目</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-util"></i>
|
||
</div>
|
||
<div class="principle-text">实用性</div>
|
||
<div class="principle-description">注重实际效果，确保项目实用价值</div>
|
||
</div>
|
||
<div class="principle-card bshow" data-scroll-reveal="enter top over 1s">
|
||
<div class="principle-icon">
|
||
<i class="layui-icon layui-icon-help"></i>
|
||
</div>
|
||
<div class="principle-text">服务性</div>
|
||
<div class="principle-description">以服务为宗旨，满足客户需求</div>
|
||
</div>
|
||
</div>
|
||
<br><br><br><br><br>
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8 col-md-12">
|
||
<h2 class="title bshow">我们的能力</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-between align-items-center">
|
||
<div class="col-lg-6">
|
||
<div id="a" style="width: 600px; height:400px;" class="bshow"></div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="carousel slide">
|
||
<div id="b" style="width: 600px; height:400px;" class="bshow"></div>
|
||
<script>
|
||
var myCharts = echarts.init(document.getElementById('a'))
|
||
// 需要设置给饼图的数据
|
||
var pieData = [
|
||
{
|
||
name: 'Python',
|
||
value: '9'
|
||
},
|
||
{
|
||
name: 'C++',
|
||
value: '7'
|
||
},
|
||
{
|
||
name: 'C',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: 'HTML',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: 'CSS',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: 'JavaScript',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: 'SQL',
|
||
value: '2'
|
||
},
|
||
{
|
||
name: 'Bin',
|
||
value: '1'
|
||
},
|
||
{
|
||
name: 'C#',
|
||
value: '1'
|
||
},
|
||
{
|
||
name: '满语',
|
||
value: '1'
|
||
}
|
||
]
|
||
var option = {
|
||
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
data: pieData,
|
||
label: {
|
||
show: true,
|
||
color: "#FFF",
|
||
formatter: function (arg) {
|
||
console.log(arg);
|
||
return arg.name + ' 有 ' + arg.value + ' 人 ' +'\n'+ arg.percent + "%"
|
||
}
|
||
},
|
||
// radius: 20 //饼图的半径
|
||
roseType: 'radius',
|
||
selectedMode: 'single',
|
||
selectedOffset: 30
|
||
}
|
||
]
|
||
}
|
||
myCharts.setOption(option)
|
||
var myCharts = echarts.init(document.getElementById('b'))
|
||
// 需要设置给饼图的数据
|
||
var pieData = [
|
||
{
|
||
name: '画师',
|
||
value: '5'
|
||
},
|
||
{
|
||
name: '程序员',
|
||
value: '10'
|
||
},
|
||
{
|
||
name: '管理',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: '测试',
|
||
value: '4'
|
||
}
|
||
]
|
||
var option = {
|
||
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
data: pieData,
|
||
label: {
|
||
show: true,
|
||
color: "#FFF",
|
||
formatter: function (arg) {
|
||
return arg.name + ' 有 ' + arg.value + ' 人 ' +'\n'+ arg.percent + "%"
|
||
}
|
||
},
|
||
// radius: 20 //饼图的半径
|
||
roseType: 'radius',
|
||
selectedMode: 'single',
|
||
selectedOffset: 30
|
||
}
|
||
]
|
||
}
|
||
myCharts.setOption(option)
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<br><br><br><br><br>
|
||
<!--<div class="container">
|
||
<div class="title cshow">
|
||
<h3>我们正在做点什么</h3>
|
||
</div>
|
||
<div class="row justify-content-between align-items-center">
|
||
<div class="col-lg-5 mb-5 mb-lg-0 ">
|
||
<h1 class="text-white font-weight-light cshow">000000000000000000</h1>
|
||
<p class="text-white mt-4 cshow">000000000000000000</p>
|
||
</div>
|
||
<div class="col-lg-6 transform-perspective-right">
|
||
<div id="logos" class="carousel slide">
|
||
<div class="carousel-inner">
|
||
<div class="carousel-item active">
|
||
<img class="d-block w-100 cshow" src="000000000000000000" alt="First slide">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
<br><br><br><br><br>
|
||
<img src="assets/img/path3.png" class="path dshow" alt="path3">
|
||
<div class="container dshow">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8 col-md-12">
|
||
<h2 class="title dshow">涉及领域</h2>
|
||
<h4 class="description dshow">
|
||
GVSDS 涉及包括Python、C、C++、汇编、Html、JavaScript、CSS、人工智能、操作系统、服务器、页面设计、网络等上百个不同方面、不同架构、不同内容的领域<br>我们为兴趣而生，无论什么，我们都愿意接受和尝试。
|
||
</h4>
|
||
<div class="btn-wrapper dshow" id="_btw">
|
||
<script>
|
||
if (!document.cookie){
|
||
document.getElementById("_btw").innerHTML=`<a noinherit href="weixin://dl/add/?username=GVSADS" class="btn btn-primary btn-round dshow" target="_blank">加入我们</a>`;
|
||
}
|
||
</script>
|
||
<!--<a href="/enroll.html" class="btn btn-primary btn-round" target="_blank">加入我们(后台点击"加入我们")</a>-->
|
||
<!--<a noinherit onclick="window.opener=null;window.open('','_self');window.close();" class="btn btn-primary btn-simple btn-round" target="_blank">吹什么牛B呢,我不看了</a>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blur-hover dshow">
|
||
<a>
|
||
<div class="icons-container blur-item on-screen mt-5 dshow">
|
||
<!-- Center -->
|
||
<i class="icon tim-icons icon-coins dshow"></i>
|
||
<!-- Right 1 -->
|
||
<i class="icon icon-sm tim-icons icon-spaceship dshow"></i>
|
||
<i class="icon icon-sm tim-icons icon-money-coins dshow"></i>
|
||
<i class="icon icon-sm tim-icons icon-link-72 dshow"></i>
|
||
<!-- Right 2 -->
|
||
<i class="icon tim-icons icon-send dshow"></i>
|
||
<i class="icon tim-icons icon-mobile dshow"></i>
|
||
<i class="icon tim-icons icon-wifi dshow"></i>
|
||
<!-- Left 1 -->
|
||
<i class="icon icon-sm tim-icons icon-key-25 dshow"></i>
|
||
<i class="icon icon-sm tim-icons icon-atom dshow"></i>
|
||
<i class="icon icon-sm tim-icons icon-satisfied dshow"></i>
|
||
<!-- Left 2 -->
|
||
<i class="icon tim-icons icon-gift-2 dshow"></i>
|
||
<i class="icon tim-icons icon-tap-02 dshow"></i>
|
||
<i class="icon tim-icons icon-wallet-43 dshow"></i>
|
||
</div>
|
||
<span class="blur-hidden h5 text-primary dshow">涉及99+个不同领域</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section section-nucleo-icons">
|
||
</div>
|
||
|
||
|
||
<script>
|
||
const letterPaths = [
|
||
// G
|
||
"M 26.406 42.755 L 26.556 41.805 Q 22.606 43.455 18.806 43.455 Q 13.206 43.455 8.956 41.28 Q 4.706 39.105 2.356 35.105 Q 0.006 31.105 0.006 25.805 Q 0.006 18.405 2.806 12.73 Q 5.606 7.055 10.531 3.93 Q 15.456 0.805 21.556 0.805 Q 27.406 0.805 30.331 3.53 Q 33.256 6.255 33.256 10.755 Q 33.256 13.705 32.181 15.48 Q 31.106 17.255 29.106 17.255 Q 27.756 17.255 26.931 16.605 Q 26.106 15.955 26.106 14.805 Q 26.106 14.305 26.306 13.105 Q 26.606 11.705 26.606 10.905 Q 26.606 8.805 25.331 7.655 Q 24.056 6.505 21.056 6.505 Q 17.406 6.505 14.281 8.605 Q 11.156 10.705 9.256 14.88 Q 7.356 19.055 7.356 24.905 A 13.014 13.014 0 0 0 10.023 33.514 A 10.024 10.024 0 0 0 10.631 34.18 Q 13.906 37.455 20.106 37.455 Q 23.556 37.455 27.306 35.905 L 28.006 29.805 L 22.906 29.805 Q 21.506 29.805 20.756 29.13 Q 20.006 28.455 20.006 26.905 Q 20.006 25.505 20.756 24.705 Q 21.506 23.905 22.756 23.905 L 32.106 23.905 Q 33.206 23.905 33.931 24.63 A 2.203 2.203 0 0 1 34.532 26.261 A 4.028 4.028 0 0 1 34.506 26.705 Q 34.356 28.305 33.506 33.955 L 32.956 37.755 Q 36.956 34.755 40.256 32.555 Q 40.906 32.155 41.406 32.155 Q 42.056 32.155 42.431 32.78 Q 42.806 33.405 42.806 34.355 Q 42.806 35.505 42.456 36.155 Q 42.106 36.805 41.356 37.305 Q 38.406 39.255 31.956 43.705 A 79.876 79.876 0 0 1 29.317 54.202 A 40.299 40.299 0 0 1 26.906 60.005 A 11.627 11.627 0 0 1 22.354 65.136 A 6.9 6.9 0 0 1 19.056 65.955 Q 16.506 65.955 14.906 64.38 Q 13.306 62.805 13.306 60.255 Q 13.306 57.905 14.356 55.505 A 19.792 19.792 0 0 1 17.591 50.731 A 39.888 39.888 0 0 1 18.281 49.955 A 54.915 54.915 0 0 1 23.929 44.724 A 103.482 103.482 0 0 1 26.406 42.755 Z M 19.606 61.105 A 3.203 3.203 0 0 0 21.837 59.232 A 14.885 14.885 0 0 0 22.456 58.155 Q 24.006 55.205 25.356 48.655 Q 21.556 51.905 19.881 54.53 Q 18.206 57.155 18.206 59.155 Q 18.206 61.105 19.606 61.105 Z",
|
||
|
||
// V
|
||
"M 80.556 21.605 Q 81.706 21.605 82.231 22.105 Q 82.756 22.605 82.756 23.405 Q 82.756 24.705 81.981 25.705 Q 81.206 26.705 79.556 26.755 Q 75.556 26.855 72.456 26.155 Q 68.906 33.605 63.881 38.53 A 17.073 17.073 0 0 1 56.684 43.055 A 10.685 10.685 0 0 1 53.806 43.455 A 8.09 8.09 0 0 1 46.301 37.959 A 17.137 17.137 0 0 1 46.056 37.405 A 32.844 32.844 0 0 1 43.895 28.453 A 64.874 64.874 0 0 1 43.506 21.055 A 94.109 94.109 0 0 1 44.463 7.033 A 68.101 68.101 0 0 1 44.756 5.255 A 7.883 7.883 0 0 1 45.954 1.82 A 2.333 2.333 0 0 1 46.031 1.73 Q 46.856 0.805 48.856 0.805 Q 52.156 0.805 52.156 3.655 Q 52.156 3.955 52.056 4.755 A 105.386 105.386 0 0 0 50.593 18.732 A 75.029 75.029 0 0 0 50.556 21.055 A 57.831 57.831 0 0 0 51.005 28.844 A 23.028 23.028 0 0 0 51.831 32.68 A 5.859 5.859 0 0 0 54.322 36.341 A 2.892 2.892 0 0 0 55.656 36.655 A 6.671 6.671 0 0 0 60.085 34.369 A 18.371 18.371 0 0 0 61.306 33.055 Q 64.356 29.455 66.906 24.005 Q 63.856 22.105 62.306 19.08 Q 60.756 16.055 60.756 12.105 Q 60.756 8.155 61.981 5.43 Q 63.206 2.705 65.331 1.355 Q 67.456 0.005 70.056 0.005 Q 73.256 0.005 75.131 2.305 Q 77.006 4.605 77.006 8.605 A 35.787 35.787 0 0 1 74.809 20.309 A 51.661 51.661 0 0 1 74.506 21.155 Q 77.156 21.605 80.556 21.605 Z M 65.806 11.755 Q 65.806 16.655 68.956 19.005 Q 70.906 13.405 70.906 9.755 Q 70.906 7.655 70.356 6.68 Q 69.806 5.705 68.856 5.705 Q 67.506 5.705 66.656 7.28 Q 65.806 8.855 65.806 11.755 Z",
|
||
|
||
// S
|
||
"M 83.083 42.064 A 22.173 22.173 0 0 0 91.856 43.605 A 32.095 32.095 0 0 0 94.235 43.52 A 18.678 18.678 0 0 0 103.831 40.43 Q 108.306 37.255 108.306 31.355 Q 108.306 28.205 106.681 26.055 Q 105.056 23.905 102.756 22.655 A 31.886 31.886 0 0 0 102.463 22.498 A 65.821 65.821 0 0 0 96.656 19.855 A 115.523 115.523 0 0 1 96.268 19.7 A 55.381 55.381 0 0 1 91.756 17.705 Q 90.006 16.805 88.831 15.455 Q 87.656 14.105 87.656 12.205 Q 87.656 9.355 89.931 7.78 A 6.571 6.571 0 0 1 90.453 7.454 A 12.394 12.394 0 0 1 96.506 6.205 Q 99.556 6.205 101.606 7.305 Q 103.656 8.405 103.656 10.505 Q 103.656 10.905 103.506 12.405 Q 103.356 13.205 103.356 14.155 Q 103.356 15.255 104.231 16.055 Q 105.106 16.855 106.406 16.855 Q 108.256 16.855 109.206 15.255 A 9.478 9.478 0 0 0 110.156 10.505 Q 110.156 7.305 108.331 5.105 Q 106.506 2.905 103.456 1.83 Q 100.406 0.755 96.756 0.755 Q 91.856 0.755 88.231 2.305 Q 84.606 3.855 82.681 6.655 Q 80.756 9.455 80.756 13.055 Q 80.756 16.505 82.481 18.83 Q 84.206 21.155 86.631 22.505 A 27.667 27.667 0 0 0 86.707 22.547 A 52.506 52.506 0 0 0 92.906 25.355 A 133.37 133.37 0 0 1 93.092 25.43 A 63.092 63.092 0 0 1 97.556 27.38 Q 99.206 28.205 100.306 29.43 Q 101.406 30.655 101.406 32.355 Q 101.406 35.105 99.006 36.63 Q 96.606 38.155 92.356 38.155 A 28.695 28.695 0 0 1 91.603 38.145 A 13.96 13.96 0 0 1 85.981 37.055 Q 83.706 35.955 83.706 33.705 Q 83.706 33.155 83.781 32.655 Q 83.856 32.155 83.856 31.955 Q 84.006 31.205 84.006 30.205 Q 84.006 29.105 83.156 28.405 Q 82.306 27.705 80.956 27.705 Q 79.106 27.705 78.156 29.155 Q 77.206 30.605 77.206 33.355 Q 77.206 38.555 81.206 41.08 A 13.553 13.553 0 0 0 83.083 42.064 Z",
|
||
|
||
// D
|
||
"M 125.556 43.455 Q 122.656 43.455 119.006 42.955 Q 117.006 42.705 116.256 41.905 A 3.114 3.114 0 0 1 115.594 39.715 A 7.391 7.391 0 0 1 115.606 39.305 A 102.185 102.185 0 0 1 116.632 30.781 A 181.23 181.23 0 0 1 117.256 27.08 Q 118.556 19.805 120.406 13.055 Q 120.756 11.805 121.806 11.305 Q 122.856 10.805 124.556 10.805 A 3.166 3.166 0 0 1 127.42 11.769 A 1.424 1.424 0 0 1 127.606 12.505 Q 127.606 13.205 127.306 14.105 A 74.563 74.563 0 0 0 125.518 20.893 A 150.077 150.077 0 0 0 124.706 24.83 Q 123.406 31.555 122.856 37.655 Q 124.356 37.805 126.256 37.805 A 18.465 18.465 0 0 0 135.835 35.523 A 13.176 13.176 0 0 0 139.331 32.505 A 20.27 20.27 0 0 0 143.55 21.034 A 33.002 33.002 0 0 0 143.656 18.355 A 12.214 12.214 0 0 0 140.413 9.309 A 10.244 10.244 0 0 0 140.256 9.155 A 12.931 12.931 0 0 0 131.42 5.918 A 22.678 22.678 0 0 0 130.656 5.905 Q 126.656 5.905 122.731 7.155 Q 118.806 8.405 115.656 10.455 Q 115.006 10.905 114.256 10.905 A 1.56 1.56 0 0 1 112.906 10.18 Q 112.406 9.455 112.406 8.405 Q 112.406 7.205 112.806 6.43 Q 113.206 5.655 114.156 5.005 Q 117.606 2.655 122.256 1.43 Q 126.906 0.205 131.206 0.205 Q 137.306 0.205 141.756 2.33 Q 146.206 4.455 148.606 8.555 Q 151.006 12.655 151.006 18.455 Q 151.006 26.005 148.006 31.63 Q 145.006 37.255 139.256 40.355 A 28.153 28.153 0 0 1 126.112 43.451 A 40.186 40.186 0 0 1 125.556 43.455 Z",
|
||
|
||
// S
|
||
"M 159.533 42.064 A 22.173 22.173 0 0 0 168.306 43.605 A 32.095 32.095 0 0 0 170.685 43.52 A 18.678 18.678 0 0 0 180.281 40.43 Q 184.756 37.255 184.756 31.355 Q 184.756 28.205 183.131 26.055 Q 181.506 23.905 179.206 22.655 A 31.886 31.886 0 0 0 178.913 22.498 A 65.821 65.821 0 0 0 173.106 19.855 A 115.523 115.523 0 0 1 172.718 19.7 A 55.381 55.381 0 0 1 168.206 17.705 Q 166.456 16.805 165.281 15.455 Q 164.106 14.105 164.106 12.205 Q 164.106 9.355 166.381 7.78 A 6.571 6.571 0 0 1 166.903 7.454 A 12.394 12.394 0 0 1 172.956 6.205 Q 176.006 6.205 178.056 7.305 Q 180.106 8.405 180.106 10.505 Q 180.106 10.905 179.956 12.405 Q 179.806 13.205 179.806 14.155 Q 179.806 15.255 180.681 16.055 Q 181.556 16.855 182.856 16.855 Q 184.706 16.855 185.656 15.255 A 9.478 9.478 0 0 0 186.606 10.505 Q 186.606 7.305 184.781 5.105 Q 182.956 2.905 179.906 1.83 Q 176.856 0.755 173.206 0.755 Q 168.306 0.755 164.681 2.305 Q 161.056 3.855 159.131 6.655 Q 157.206 9.455 157.206 13.055 Q 157.206 16.505 158.931 18.83 Q 160.656 21.155 163.081 22.505 A 27.667 27.667 0 0 0 163.157 22.547 A 52.506 52.506 0 0 0 169.356 25.355 A 133.37 133.37 0 0 1 169.542 25.43 A 63.092 63.092 0 0 1 174.006 27.38 Q 175.656 28.205 176.756 29.43 Q 177.856 30.655 177.856 32.355 Q 177.856 35.105 175.456 36.63 Q 173.056 38.155 168.806 38.155 A 28.695 28.695 0 0 1 168.053 38.145 A 13.96 13.96 0 0 1 162.431 37.055 Q 160.156 35.955 160.156 33.705 Q 160.156 33.155 160.231 32.655 Q 160.306 32.155 160.306 31.955 Q 160.456 31.205 160.456 30.205 Q 160.456 29.105 159.606 28.405 Q 158.756 27.705 157.406 27.705 Q 155.556 27.705 154.606 29.155 Q 153.656 30.605 153.656 33.355 Q 153.656 38.555 157.656 41.08 A 13.553 13.553 0 0 0 159.533 42.064 Z"
|
||
];
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const svgGroup = document.getElementById('svgGroup');
|
||
svgGroup.innerHTML = '';
|
||
|
||
// 计算SVG动画总时长（每个字母动画0.8s，间隔0.4s）
|
||
const totalAnimationTime = 300 + (letterPaths.length - 1) * 400 + 800;
|
||
|
||
// 逐个创建字母路径并添加动画
|
||
letterPaths.forEach((pathData, index) => {
|
||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
path.setAttribute('d', pathData);
|
||
path.setAttribute('opacity', '0');
|
||
path.setAttribute('transform', 'scale(0.8)');
|
||
path.setAttribute('class', 'letter');
|
||
svgGroup.appendChild(path);
|
||
|
||
// 延迟显示每个字母，添加缩放和淡入动画
|
||
setTimeout(() => {
|
||
path.style.opacity = '1';
|
||
path.style.transform = 'scale(1)';
|
||
path.style.transition = 'all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||
}, 300 + (index * 400));
|
||
});
|
||
|
||
// SVG动画完成后，依次显示seo2和seo3
|
||
setTimeout(() => {
|
||
// 显示英文标题（seo2）
|
||
document.getElementById('seo2').style.opacity = '1';
|
||
|
||
// 延迟0.5s后显示中文标题（seo3）
|
||
setTimeout(() => {
|
||
document.getElementById('seo3').style.opacity = '1';
|
||
}, 500);
|
||
}, totalAnimationTime);
|
||
});
|
||
</script> |