docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated Demo样式细节优化

Browse Source
This commit is contained in:
PASSER-BY 2023-01-10 00:18:18 +08:00
parent 58cc8f595e
commit 53971186e4
4 changed files with 97 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -26,6 +26,19 @@
</head>
<body>
<div class="wrapper">
<div class="mod-bg">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="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>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
</g>
</svg>
</div>
<div class="header">
<div class="inner">
<div class="mod-head">

19
static/image/bg.svg
View File

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1440px" height="448px" viewBox="0 0 1440 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>编组 5备份</title>
<title>Background</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="-5.68700053%" y1="45.5298642%" x2="84.7892757%" y2="53.934985%" id="linearGradient-1">
@ -27,11 +26,11 @@
<stop stop-color="#D2ECFF" stop-opacity="0.225387893" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="导航方案备份">
<g id="编组-5备份">
<g id="路径备份">
<g id="蒙版">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g>
<g transform="translate(0.000000, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
@ -40,15 +39,15 @@
<use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
<use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
</g>
<g id="矩形备份-32" mask="url(#mask-4)">
<g mask="url(#mask-4)">
<use fill="url(#linearGradient-5)" xlink:href="#path-7"></use>
<use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
</g>
<rect id="矩形" fill="url(#linearGradient-8)" mask="url(#mask-4)" x="0" y="166" width="1440" height="282"></rect>
<rect fill="url(#linearGradient-8)" mask="url(#mask-4)" x="0" y="166" width="1440" height="282"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

71
static/style/index.css
View File

@ -22,9 +22,7 @@ a:hover{
text-decoration: underline;
}
.wrapper{
background: url('../image/bg.svg') center top repeat-x;
}
.header{
margin-bottom: 15px;
}
@ -37,6 +35,62 @@ a:hover{
margin: 0 auto;
}
.mod-bg {
position: absolute;
left: 0;
top: 0;
height: 500px;
width: 100%;
z-index: -1;
background: url('../image/bg.svg') center top repeat-x;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mod-bg:after {
display: block;
width: 100%;
height: 360px;
content: '';
margin-bottom: -240px
}
.mod-bg .waves {
position: absolute;
width: 100%;
bottom: 0;
min-height: 80px;
max-height: 120px;
z-index: 0
}
.mod-bg .parallax>use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.1) infinite
}
.mod-bg .parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s
}
.mod-bg .parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s
}
.mod-bg .parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s
}
.mod-bg .parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0)
}
100% {
transform: translate3d(85px, 0, 0)
}
}
.mod-head .bd{
height: 36px;
padding: 10px 0;
@ -151,7 +205,6 @@ a:hover{
.mod-panel .hd .picture{
position: relative;
width: 400px;
padding-top: 15px;
text-align: center;
}
.mod-panel .hd .picture img{
@ -161,11 +214,11 @@ a:hover{
display: inline-block;
height: 36px;
margin-top: -20px;
padding: 0 20px;
padding: 0 24px;
background: #2095f2;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 6px;
line-height: 36px;
border-radius: 18px;
line-height: 34px;
text-decoration: none;
text-align: center;
font-size: 15px;
@ -368,10 +421,10 @@ a:hover{
width: 33.33%;
}
.mod-intro .bd .item{
padding: 15px 12px;
padding: 15px;
margin: 0 5px 10px;
background: rgb(246, 248, 250);
border-radius: 5px;
border-radius: 12px;
}
.mod-intro .bd p{
line-height: 22px;

13
zh-HK.html
View File

@ -26,6 +26,19 @@
</head>
<body>
<div class="wrapper">
<div class="mod-bg">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="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>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
</g>
</svg>
</div>
<div class="header">
<div class="inner">
<div class="mod-head">