新增波浪动态效果
This commit is contained in:
zxzz
parent
13da0a2308
commit
6a579374ec
|
|
@ -2,21 +2,41 @@
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<!-- Banner Section -->
|
<!-- Banner Section -->
|
||||||
<div class="banner-section">
|
<div class="banner-section">
|
||||||
<!-- 菜单栏 -->
|
|
||||||
<div class="menu-box">
|
|
||||||
<div class="osredm-logo">logo</div>
|
|
||||||
<div class="go-sy">首页</div>
|
|
||||||
<div class="go-kyxm">开源项目</div>
|
|
||||||
<div class="go-ckkj">创客空间</div>
|
|
||||||
</div>
|
|
||||||
<!-- 图标&标题 -->
|
|
||||||
<div class="logo-and-title">
|
<div class="logo-and-title">
|
||||||
<img class="banner-logo" src="../assets/kc-logo.png" />
|
<img class="banner-logo" src="../assets/kc-logo.png" />
|
||||||
<div class="banner-blank"></div>
|
<div class="banner-blank"></div>
|
||||||
<img class="banner-title" src="../assets/kc-title.png" />
|
<img class="banner-title" src="../assets/kc-title.png" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 下载按钮 -->
|
|
||||||
<div class="download-button">宣传视频下载</div>
|
<div class="download-button">宣传视频下载</div>
|
||||||
|
<!-- waves -->
|
||||||
|
<svg
|
||||||
|
class="waves"
|
||||||
|
viewBox="0 24 150 28"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
shapeRendering="auto"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
id="wave-path"
|
||||||
|
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<g class="parallax">
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="3"
|
||||||
|
fill="rgba(255,255,255,0.6)"
|
||||||
|
/>
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="0"
|
||||||
|
fill="rgba(255,255,255,0.45)"
|
||||||
|
/>
|
||||||
|
<use href="#wave-path" x="50" y="9" fill="#dae5ff" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Video Section -->
|
<!-- Video Section -->
|
||||||
|
|
@ -28,12 +48,90 @@
|
||||||
autoplay
|
autoplay
|
||||||
muted
|
muted
|
||||||
></video>
|
></video>
|
||||||
|
<!-- waves -->
|
||||||
|
<svg
|
||||||
|
class="waves"
|
||||||
|
viewBox="0 24 150 28"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
shapeRendering="auto"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
id="wave-path"
|
||||||
|
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<g class="parallax">
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="3"
|
||||||
|
fill="rgba(0,55,175,0.2)"
|
||||||
|
/>
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="0"
|
||||||
|
fill="rgba(0,55,175,0.2)"
|
||||||
|
/>
|
||||||
|
<use href="#wave-path" x="50" y="9" fill="#180e8d" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 简介 Section -->
|
<!-- 简介 Section -->
|
||||||
<div class="intro-section" id="intro">
|
<div class="intro-section" id="intro">
|
||||||
<div class="intro-box"></div>
|
<div class="intro-box">
|
||||||
<!-- <p>项目简介</p> -->
|
<!-- <p>项目简介</p> -->
|
||||||
|
<div class="intro-title-box">
|
||||||
|
<img
|
||||||
|
class="aside-img"
|
||||||
|
src="../assets/left-icon.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<h1 class="intro-title">项目简介</h1>
|
||||||
|
<img
|
||||||
|
class="aside-img"
|
||||||
|
src="../assets/right-icon.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<dir class="intro-text-box">
|
||||||
|
<p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
|
||||||
|
<p>
|
||||||
|
选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。....
|
||||||
|
</p>
|
||||||
|
</dir>
|
||||||
|
</div>
|
||||||
|
<!-- waves -->
|
||||||
|
<svg
|
||||||
|
class="waves"
|
||||||
|
viewBox="0 24 150 28"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
shapeRendering="auto"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
id="wave-path"
|
||||||
|
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<g class="parallax">
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="3"
|
||||||
|
fill="rgba(255,255,255,0.6)"
|
||||||
|
/>
|
||||||
|
<use
|
||||||
|
href="#wave-path"
|
||||||
|
x="50"
|
||||||
|
y="0"
|
||||||
|
fill="rgba(255,255,255,0.45)"
|
||||||
|
/>
|
||||||
|
<use href="#wave-path" x="50" y="9" fill="#dae5ff" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- logo Section -->
|
<!-- logo Section -->
|
||||||
|
|
@ -59,7 +157,7 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.banner-section {
|
.banner-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 680px;
|
height: 680px;
|
||||||
|
|
@ -69,36 +167,6 @@ export default {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
||||||
.menu-box {
|
|
||||||
width: 550px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: aquamarine;
|
|
||||||
position: absolute;
|
|
||||||
top: 50px;
|
|
||||||
left: 90px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.osredm-logo {
|
|
||||||
width: 250px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.go-sy {
|
|
||||||
width: 100px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.go-kyxm {
|
|
||||||
width: 100px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.go-ckkj {
|
|
||||||
width: 100px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-and-title {
|
.logo-and-title {
|
||||||
width: 1300px;
|
width: 1300px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -132,7 +200,7 @@ export default {
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 8%;
|
bottom: 12%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
@ -140,15 +208,15 @@ export default {
|
||||||
|
|
||||||
.video-section {
|
.video-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 780px;
|
height: 850px;
|
||||||
background-color: #dae5ff;
|
background-color: #dae5ff;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.video-box {
|
.video-box {
|
||||||
width: 1100px;
|
width: 1150px;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 45%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
@ -161,13 +229,47 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.intro-box {
|
.intro-box {
|
||||||
border: 1px solid #000000;
|
|
||||||
width: 1100px;
|
width: 1100px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.intro-title-box {
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.aside-img {
|
||||||
|
width: 300px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-title {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text-box {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -177,7 +279,6 @@ export default {
|
||||||
background-color: #dae5ff;
|
background-color: #dae5ff;
|
||||||
position: relative;
|
position: relative;
|
||||||
.logo-box {
|
.logo-box {
|
||||||
border: 1px solid #000000;
|
|
||||||
width: 1100px;
|
width: 1100px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -186,13 +287,13 @@ export default {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.poster-section {
|
.poster-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
background-color: #180e8d;
|
background-color: #180e8d;
|
||||||
position: relative;
|
position: relative;
|
||||||
.poster-box {
|
.poster-box {
|
||||||
border: 1px solid #000000;
|
|
||||||
width: 1100px;
|
width: 1100px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -207,5 +308,40 @@ export default {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
background-color: rgb(22, 32, 70);
|
background-color: rgb(22, 32, 70);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 波浪效果 - 起 */
|
||||||
|
.waves {
|
||||||
|
width: 100%;
|
||||||
|
height: 8vh;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -2px;
|
||||||
|
height: 10vh;
|
||||||
|
}
|
||||||
|
.parallax > use {
|
||||||
|
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||||
|
}
|
||||||
|
.parallax > use:nth-child(1) {
|
||||||
|
animation-delay: -2s;
|
||||||
|
animation-duration: 7s;
|
||||||
|
}
|
||||||
|
.parallax > use:nth-child(2) {
|
||||||
|
animation-delay: -3s;
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
.parallax > use:nth-child(3) {
|
||||||
|
animation-delay: -4s;
|
||||||
|
animation-duration: 13s;
|
||||||
|
}
|
||||||
|
@keyframes move-forever {
|
||||||
|
0% {
|
||||||
|
transform: translate3d(-90px, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate3d(85px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 波浪效果 - 止 */
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue