Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 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" <svg className="waves"
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto"> viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
<defs> <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> </defs>
<g className="parallax"> <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="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="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="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> </g>
</svg> </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> </div>
<NewSlide></NewSlide> <NewSlide></NewSlide>

7
src/home/index.scss
View File

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