Commit b1edb42e by LJM

add

parent 4c23fd8c
......@@ -111,22 +111,35 @@
position: relative;
width: 100%;
height: 720px;
box-sizing: border-box;
overflow: hidden;
background: #365C89;
.bd {
width: 100%;
height: 720px;
height: 100%;
box-sizing: border-box;
li {
ul {
width: 100%;
height: 720px;
height: 100%;
img {
display: block;
li {
width: 100%;
height: 720px;
object-fit: cover;
height: 100%;
overflow: hidden;
box-sizing: border-box;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
&.scaleClass {
animation: scaleAnimation 10s linear infinite;
}
}
}
}
}
......@@ -205,7 +218,35 @@
}
.slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
margin-left: -640px;
width: 1280px;
.t1 {
font-size: 70px;
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
}
.t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
}
}
}
&.head-wrap-pic {
height: 880px;
.slideBox {
height: 880px;
}
}
}
......@@ -707,4 +748,16 @@
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
\ No newline at end of file
......@@ -278,23 +278,34 @@ body {
position: relative;
width: 100%;
height: 720px;
box-sizing: border-box;
overflow: hidden;
background: #365C89;
}
.head-wrap .slideBox .bd {
width: 100%;
height: 720px;
height: 100%;
box-sizing: border-box;
}
.head-wrap .slideBox .bd li {
.head-wrap .slideBox .bd ul {
width: 100%;
height: 720px;
height: 100%;
}
.head-wrap .slideBox .bd li img {
.head-wrap .slideBox .bd ul li {
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.head-wrap .slideBox .bd ul li img {
display: block;
width: 100%;
height: 720px;
height: 100%;
object-fit: cover;
}
.head-wrap .slideBox .bd ul li img.scaleClass {
animation: scaleAnimation 10s linear infinite;
}
.head-wrap .slideBox .hd {
position: absolute;
bottom: 30px;
......@@ -355,6 +366,33 @@ body {
color: #ffffff;
font-weight: bold;
}
.head-wrap .slideBox .slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
margin-left: -640px;
width: 1280px;
}
.head-wrap .slideBox .slide-text-other .t1 {
font-size: 70px;
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
}
.head-wrap .slideBox .slide-text-other .t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
}
.head-wrap.head-wrap-pic {
height: 880px;
}
.head-wrap.head-wrap-pic .slideBox {
height: 880px;
}
.service {
padding: 70px 0 80px 0;
}
......@@ -757,4 +795,15 @@ body {
transform: translateZ(0);
}
}
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
......@@ -17,7 +17,7 @@
</head>
<body>
<!--head-->
<div class="head-wrap">
<div class="head-wrap head-wrap-pic">
<div class="head">
<div class="main row bothSide verCenter">
<a href="/" class="logo row verCenter">
......@@ -51,15 +51,15 @@
<div class="bd">
<ul>
<li>
<img src="./images/s1.png" alt="">
<img src="./images/s2.png" alt="" class="scaleClass">
</li>
</ul>
</div>
<div class="slide-text-other">
<ul>
<li class="wow" style="display: block">
<p class="t1">猎豹出海</p>
<p class="t2">一站式、全链路国际物流服务,高标准服务、高效率履约、超高性价比</p>
<p class="t1">国际海运</p>
<p class="t2">国际海运是国际贸易中最主要的运输方式,价格实惠、载运量大、安全可靠。我国大部分进出口货物,都是通过海洋运输的方式。我司与各大主流船司建立了稳定的合作关系,合作伙伴遍布全球,可以为客户提供安全、高效的清关、配送服务。</p>
</li>
</ul>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment