updated Demo样式细节优化
This commit is contained in:
PASSER-BY
parent
58cc8f595e
commit
53971186e4
13
index.html
13
index.html
@ -26,6 +26,19 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<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="header">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div class="mod-head">
|
<div class="mod-head">
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?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">
|
<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>Background</title>
|
||||||
<title>编组 5备份</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
<desc>Created with Sketch.</desc>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="-5.68700053%" y1="45.5298642%" x2="84.7892757%" y2="53.934985%" id="linearGradient-1">
|
<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>
|
<stop stop-color="#D2ECFF" stop-opacity="0.225387893" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="导航方案备份">
|
<g>
|
||||||
<g id="编组-5备份">
|
<g>
|
||||||
<g id="路径备份">
|
<g>
|
||||||
<g id="蒙版">
|
<g>
|
||||||
<g transform="translate(0.000000, 0.000000)">
|
<g transform="translate(0.000000, 0.000000)">
|
||||||
<mask id="mask-4" fill="white">
|
<mask id="mask-4" fill="white">
|
||||||
<use xlink:href="#path-3"></use>
|
<use xlink:href="#path-3"></use>
|
||||||
@ -40,15 +39,15 @@
|
|||||||
<use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
|
<use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
|
||||||
<use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
|
<use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
|
||||||
</g>
|
</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-5)" xlink:href="#path-7"></use>
|
||||||
<use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
|
<use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
|
||||||
</g>
|
</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>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.1 KiB |
@ -22,9 +22,7 @@ a:hover{
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper{
|
|
||||||
background: url('../image/bg.svg') center top repeat-x;
|
|
||||||
}
|
|
||||||
.header{
|
.header{
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
@ -37,6 +35,62 @@ a:hover{
|
|||||||
margin: 0 auto;
|
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{
|
.mod-head .bd{
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
@ -151,7 +205,6 @@ a:hover{
|
|||||||
.mod-panel .hd .picture{
|
.mod-panel .hd .picture{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding-top: 15px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.mod-panel .hd .picture img{
|
.mod-panel .hd .picture img{
|
||||||
@ -161,11 +214,11 @@ a:hover{
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin-top: -20px;
|
margin-top: -20px;
|
||||||
padding: 0 20px;
|
padding: 0 24px;
|
||||||
background: #2095f2;
|
background: #2095f2;
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
border-radius: 6px;
|
border-radius: 18px;
|
||||||
line-height: 36px;
|
line-height: 34px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@ -368,10 +421,10 @@ a:hover{
|
|||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
.mod-intro .bd .item{
|
.mod-intro .bd .item{
|
||||||
padding: 15px 12px;
|
padding: 15px;
|
||||||
margin: 0 5px 10px;
|
margin: 0 5px 10px;
|
||||||
background: rgb(246, 248, 250);
|
background: rgb(246, 248, 250);
|
||||||
border-radius: 5px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
.mod-intro .bd p{
|
.mod-intro .bd p{
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
|
|||||||
13
zh-HK.html
13
zh-HK.html
@ -26,6 +26,19 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<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="header">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div class="mod-head">
|
<div class="mod-head">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user