优创网交互动画

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -87,6 +87,7 @@ body{
     list-style: none;
 }
 .header .container .bottom ul li{
+    position: relative;
     float: left;
     margin-right: 50px;
 }
@@ -97,6 +98,24 @@ body{
     font-size: 18px;
     color: #fff;
 }
+.header .container .bottom ul li a:before{
+    content: "";
+    position: absolute;
+    bottom: 23px;
+    left: 50%;
+    height: 1px;
+    border-bottom: 2px solid #e41f2b;
+    width: 0px;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+}
+.header .container .bottom ul li:hover a:before{
+    width: 100%;
+    left: 0;
+}
 .header .container .bottom ul li:hover a{
     color: #e41f2b;
 }
@@ -816,6 +835,7 @@ body{
     font-size: 18px;
     font-weight: bold;
     color: #999;
+    cursor: pointer;
 }
 .c_main .c_content .c_tab .c_toggle.active,.c_main .c_content .c_tab .c_toggle:hover{
     font-size: 18px;
@@ -831,29 +851,59 @@ body{
 .c_main .c_content .c_item_list{
     position: relative;
     text-align: left;
-    overflow: hidden;
+    /*overflow: hidden;*/
 }
 .c_main .c_content .c_item_list ul{
+    overflow: hidden;
     margin-top: 30px;
     float: left;
 }
-.c_main .c_content .c_item_list ul:first-child {
-    margin-right: 124px;
-}
 .c_main .c_content .c_item_list ul li{
-    list-style: circle ;
+    float: left;
+    /*list-style: square ;*/
     margin-bottom: 35px;
 }
+.c_main .c_content .c_item_list ul li div{
+    position: relative;
+    width: 160px;
+    float: left;
+    /*overflow: hidden;*/
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.c_main .c_content .c_item_list ul li:nth-child(odd){
+    margin-right: 120px;
+}
 .c_main .c_content .c_item_list ul li a{
     font-size: 14px;
     color: #333333;
 }
+.c_main .c_content .c_item_list ul li a:before {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    height: 1px;
+    border-bottom: 2px solid #e41f2b;
+    width: 0px;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+}
+.c_main .c_content .c_item_list ul li:hover a:before{
+    width: 100%;
+    left: 0;
+}
 .c_main .c_content .c_item_list ul li:hover a{
     font-weight: bold;
     color: #e41f2b;
 }
 .c_main .c_content .c_item_list ul li span.c_price{
     display: inline-block;
+    float: left;
+    width: 110px;
     margin: 0 47px 0 50px;
     font-size: 14px;
     color: #e41f2b;
@@ -864,29 +914,38 @@ body{
     color: #999;
 }
 .c_main .c_content .c_item_list ul li span.c_time{
+    float: left;
+    width: 80px;
     font-size: 14px;
     color: #999;
 }
 .c_main .c_content .c_item_list .c_line{
     position: absolute;
-    left: 550px;
+    left: 532px;
     top: 23px;
     width: 1px;
     height: 322px;
     border: solid 1px #d4d4d4;
 }
 .c_main .c_content .c_item_list .c_name{
+    display: inline-block;
+    width: 90px;
+    float: left;
     font-size: 14px;
     color: #999999;
 }
 .c_main .c_content .c_item_list .c_got{
     display: inline-block;
+    float: left;
+    width: 60px;
     margin: 0 18px 0 16px;
     font-size: 14px;
     color: #555;
 }
 .c_main .c_content .c_item_list .c_time{
-    margin-left:95px;
+    float: left;
+    width: 30px;
+    margin-left:30px;
 }
 .c_publish{
     position: absolute;
@@ -1507,7 +1566,7 @@ a.x_gray_text{
 .x_item_list li span {
     float: right;
 }
-li.active a,li:hover a{
+.x_item_list li.active a,.x_item_list li:hover a{
     color: #e41f2b;
     font-weight: bold;
     border-bottom: 1px solid #e41f2b;

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -509,54 +509,30 @@
 					<span class="c_toggle"><span class="tabs tabs01"></span>项目动态</span>
 				</div>
 				<!--最新需求-->
-				<div class="c_item_list">
-					<ul>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-					</ul>
+				<div class="c_item_list show">
 					<ul>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
-								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
+						<li><div><a href="">自动跟随行李箱方案开发</a></div><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
 								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
-						<li><a href="">自动跟随行李箱方案开发</a><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
+						<li><div><a href="">自动跟随行李箱方案开发</a></div><span class="c_price">￥5000~6000<b>元</b></span><span class="c_time"><img
 								src="${CTPATH}/assets/images/c_04.png" alt="">100天</span></li>
 					</ul>
 					<div class="c_line"></div>
 				</div>
 				<!--项目动态-->
-				<div class="c_item_list show">
-					<ul>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-					</ul>
+				<div class="c_item_list">
 					<ul>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
-						<li><span class="c_name">服务商名称</span><span class="c_got">中标项目</span><a href="">智能婴儿床监测系统APP开发</a><span class="c_time">10天</span></li>
+						<li>
+							<span class="c_name">服务商名称</span>
+							<span class="c_got">中标项目</span>
+							<div style="width: 200px;"><a href="">智能婴儿床监测系统APP开发</a></div>
+							<span class="c_time">10天</span>
+						</li>
+						<li>
+							<span class="c_name">服务商名称</span>
+							<span class="c_got">中标项目</span>
+							<div style="width: 200px;"><a href="">智能婴儿床监测系统APP开发</a></div>
+							<span class="c_time">10天</span>
+						</li>
 					</ul>
 					<div class="c_line"></div>
 				</div>