公司马上就要开发微信的第三个版本了,但是上级要求要与时俱进,画面得炫点,不要那么死板的表格式,所以按照上级的要求,自己找了点素材自己测试了下,可以说这是第一次写这种类型的页面,就开发出来的前端效果来说来时可以的,UI可能还要进一步的优化,下面分享出我的作品,

html代码:

<div>
<div  style=”text-align:center; background:#999; position:relative”>
<p style=”line-height:50px; font-size:18px;”>基本情况</p>
</div>
<div>
<ul>
<li>
<a href=”https://www.shicaidai.com/experts/index.html” style=””>专家顾问团</a>
</li>
<li>
<a href=”https://www.shicaidai.com/introduce/index.html” style=””>平台介绍</a>
</li>
<li>
<a href=”https://www.shicaidai.com/guanliteam/index.html” style=””>管理团队</a>
</li>
<li>
<a href=”https://www.shicaidai.com/patener/index.html” style=””>战略伙伴</a>
</li>
<li>
<a href=”https://www.shicaidai.com/zhuanjia/index.html” style=””>专家看法</a>
</li>
<div style=”clear:both;font-size:500px; text-indent:-9000px;” >&nbsp;</div>
</ul>
</div></div>

<div class=”fanda”>

<div  style=”text-align:center; background:#999; position:relative”>

<p style=”line-height:50px; font-size:18px;”>基本情况</p>

</div>

<div class=”fanda1″>

<ul>

<li class=”fl”>

<a href=”https://www.shicaidai.com/experts/index.html” class=”www” style=””>专家顾问团</a>

</li>

<li class=”div2 fl”>

<a href=”https://www.shicaidai.com/introduce/index.html” class=”www2″ style=””>平台介绍</a>

</li>

<li class=”div3 fl”>

<a href=”https://www.shicaidai.com/guanliteam/index.html” class=”www3″ style=””>管理团队</a>

</li>

<li class=”div4 fl”>

<a href=”https://www.shicaidai.com/patener/index.html” class=”www4″ style=””>战略伙伴</a>

</li>

<li class=”div5 fl”>

<a href=”https://www.shicaidai.com/zhuanjia/index.html” class=”www5″ style=””>专家看法</a>

</li>

<div style=”clear:both;font-size:500px; text-indent:-9000px;” >&nbsp;</div>

</ul>

</div></div>

css:

body,html,a,img,div,form,select,input,ul,ol,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,p,label,em,span{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{font-size:12px;font-family:’Microsoft YaHei’, sans-serif; color:#666}
a{color:#666;*color:#666;text-decoration:none}
a:hover{text-decoration:none;color:#ff4a00}
ol,ul,li{list-style:none}
em,i{font-style:normal}
img{border:none;vertical-align:middle;}
.fl { float:left}
.fr { float:right}
.cb { clear:both}

.fanda {min-width:320px;margin:0 auto; max-width: 640px; position:relative; }
.fanda1 {min-width:320px;margin:0 auto; max-width: 640px; position:relative;background: url(dfdfdf.png);background-size: 100% 100%; background-repeat:no-repeat}
ul li { list-style:none}
.www {width:80px;height:80px;background:#38deba;color:white;font-weight:bold;position:absolute;animation:mymove 5s cubic-bezier(1,1,1,1) 1s infinite;-webkit-animation:mymove 5s cubic-bezier(1,1,1,1) 1s infinite; /* Safari and Chrome */border-radius: 81px; display:block; text-align:center; line-height:80px; top:80px; left:30px;}
.www:hover{width:140px;height:140px;background:#fff;color:#38deba;font-weight:bold; border-radius: 81px; text-align:center; line-height:140px; border:#38deba solid 3px; z-index:99}

.www2 {width:100px;height:100px;background:#50ddfb;color:white;font-weight:bold;position:absolute;animation:mymove2 5s cubic-bezier(1,1,1,1) 1s infinite;-webkit-animation:mymove2 5s cubic-bezier(1,1,1,1) 1s infinite; /* Safari and Chrome */border-radius: 81px; display:block; text-align:center; line-height:100px; top:100px; left:120px;}
.www2:hover{width:140px;height:140px;background:#fff;color:#50ddfb;font-weight:bold; border-radius: 81px; text-align:center; line-height:140px; border:#50ddfb solid 3px;z-index:99}

.www3 {width:70px;height:70px;background:#6fc5fe;color:white;font-weight:bold;position:absolute;animation:mymove3 5s cubic-bezier(1,1,1,1) 1s infinite;-webkit-animation:mymove3 5s cubic-bezier(1,1,1,1) 1s infinite; /* Safari and Chrome */border-radius: 81px; display:block; text-align:center; line-height:70px; top:30px; left:200px;}
.www3:hover{width:140px;height:140px;background:#fff;color:#6fc5fe;font-weight:bold; border-radius: 81px; text-align:center; line-height:140px; border:#6fc5fe solid 3px;z-index:99}

.www4 {width:80px;height:80px;background:#ff6f5c;color:white;font-weight:bold;position:absolute;animation:mymove4 5s cubic-bezier(1,1,1,1) 1s infinite;-webkit-animation:mymove4 5s cubic-bezier(1,1,1,1) 1s infinite; /* Safari and Chrome */border-radius: 81px; display:block; text-align:center; line-height:80px; top:230px; left:40px;}
.www4:hover{width:140px;height:140px;background:#fff;color:#ff6f5c;font-weight:bold; border-radius: 81px; text-align:center; line-height:140px; border:#ff6f5c solid 3px;z-index:99}

.www5 {width:90px;height:90px;background:#6fc5fe;color:white;font-weight:bold;position:absolute;animation:mymove5 5s cubic-bezier(1,1,1,1) 1s infinite;-webkit-animation:mymove5 5s cubic-bezier(1,1,1,1) 1s infinite; /* Safari and Chrome */border-radius: 81px; display:block; text-align:center; line-height:90px; top:300px; left:180px;}
.www5:hover{width:140px;height:140px;background:#fff;color:#6fc5fe;font-weight:bold; border-radius: 81px; text-align:center; line-height:140px; border:#6fc5fe solid 3px;z-index:99}

@keyframes mymove
{
0% { left:30px; top:80px;}
25% { left:30px; top:100px;}
100% { left:30px; top:80px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% { left:30px; top:80px;}
25% { left:30px; top:100px;}
100% { left:30px; top:80px;}
}
@keyframes mymove2
{
0% { left:120px; top:130px;}
25% { left:120px; top:160px;}
100% { left:120px; top:100px;}
}

@-webkit-keyframes mymove2 /* Safari and Chrome */
{
0% { left:120px; top:100px;}
25% { left:120px; top:160px;}
100% { left:120px; top:100px;}
}
@keyframes mymove3
{
0% { left:200px; top:30px;}
25% { left:200px; top:100px;}
100% { left:200px; top:30px;}
}

@-webkit-keyframes mymove3 /* Safari and Chrome */
{
0% { left:200px; top:30px;}
25% { left:200px; top:100px;}
100% { left:200px; top:30px;}
}
@keyframes mymove4
{
0% { left:40px; top:230px;}
25% { left:40px; top:270px;}
100% { left:40px; top:230px;}
}

@-webkit-keyframes mymove4 /* Safari and Chrome */
{
0% { left:40px; top:230px;}
25% { left:40px; top:270px;}
100% { left:40px; top:230px;}
}
@keyframes mymove5
{
0% { left:180px; top:300px;}
25% { left:180px; top:340px;}
100% { left:180px; top:300px;}
}

@-webkit-keyframes mymove5 /* Safari and Chrome */
{
0% { left:180px; top:300px;}
25% { left:180px; top:340px;}
100% { left:180px; top:300px;}
}
;
作品链接可以点击这边查看:
http://d.shanmao.me/zuopin/22

这可能是一个不完美的作品,所以运用时要做好测试哦;有改进的地方求大神指点.分享。谢谢!


   

发表评论

邮箱地址不会被公开。 必填项已用*标注