junru0303
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改波浪的样式

This commit is contained in:
何童崇 2021-11-11 09:33:08 +08:00
parent c6bc26c5ae
commit cc9cf251fe
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/home/index.jsx
View File

@ -16,15 +16,35 @@ function HomePage(props) {
<svg className="waves"
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g className="parallax">
<use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
{/* <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> */}
{/* <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
{/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.5)" />
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
</g>
</svg>
{/* <svg class="hero-waves" viewBox="0 24 150 28 " preserveAspectRatio="none" shapeRendering="auto">
<defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
</path></defs>
<g class="wave1">
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
</use></g>
<g class="wave2">
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
</use></g>
<g class="wave3">
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff">
</use></g>
</svg> */}
</div>
<NewSlide></NewSlide>

7
src/home/index.scss
View File

@ -4,7 +4,6 @@
.first-edition{
height: 80vh;
background: linear-gradient(
// top,
#1A2358 0%,
#12277B 33%,
#0C2D8F 67%,
@ -77,10 +76,10 @@
.waves {
position: relative;
width: 100%;
height: 15vh;
height: 10vh;
margin-bottom: -10px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
min-height: 40px;
max-height: 60px;
}
.content {
position: relative;