纯html动画效果图,纯css实现提示动画效果 | 龙奔网

由于这几天一直没什么空,所以耽误了很久没更新,今天有空给大家补上，这个效果也是从别的网站上看到的,晚上有空写了下，基本上也是用到的纯css3来 实现的除了那个切换的效果。

先看下效果图

上面可以切换,第一个从下往上出来,第二个是旋转出现,第三个是从上到下放大 具体的话复制看下

html代码比较多

• The first item
• the second item

1. 

   锦鲤抄

   银临

   

   

   

   

2. 

   锦鲤抄

   银临

   

   

   

   

3. 

   锦鲤抄

   银临

   

   

   

   

1. 

   杀阵

   谈相遇,叹相遇

2. 

   杀阵

   谈相遇,叹相遇

大盒子里面 一个ul里面是li对应5个 li里面是需要的内容,

下面是css代码

*{margin: 0;padding: 0;list-style: none;text-decoration: none}

.clearfix:before,.clearfix:after{content: " ";display: table;}

.clearfix:after{clear: both;}

body{background: rgba(1,1,1,0.8);}

img{max-width: 100%;min-height: 100%;}

fieldset{border: 0;transition: .5s all;transition-timing-function: ease;position: absolute;width: 100%;height: 100%;}

#main{width: 960px;margin: 100px auto;}

#main ul{margin: 0 auto;padding-bottom: 50px;}

#main ul li{float: left;width:150px;border: 3px solid hsla(0,0%,100%,.5);margin-left: 10px;}

#main ul li.active{background: #007aff}

#main ul li a{display: block;color: #f1f1f1;font: 14px/14px "Helvetica Neue";line-height: 40px;text-align: center;}

#list li{width: 300px;float: left;cursor: pointer;border: 1px solid hsla(0,0%,100%,.5);}

#list li+li{margin-left:5px}

#list figure{position: relative;height: 300px;}

#list fieldset p{font: 20px/20px "General";text-align: center;font-weight: 700;margin-top: 20px;}

.one fieldset p{color: #f1f1f1;}

.two fieldset p{color: #000000}

.three fieldset p{color: #f1f1f1}

.four fieldset,

.five fieldset{color: #f1f1f1}

#list fieldset p:nth-of-type(3){width: 70px;height: 5px;background: #f1f1f1;margin: 20px auto;}

#list fieldset a{display: inline-block;width: 12%;}

#list fieldset nav{text-align: center;}

/*划分1*/

.one fieldset{margin-top: -99px;}

.one:hover img{opacity: 0.5;}

.one:hover fieldset{margin-top: -247px;}

/*划分2*/

.two fieldset{margin-top: -250px;opacity: 0;}

.two:hover img{opacity: 0.5;}

.two:hover fieldset{opacity: 1;transform:rotateX(360deg) scale(1.2)}

/*划粉3*/

.three fieldset{top: -166px;}

.three:hover img{opacity: 0.5;}

.three:hover fieldset{transform:rotateY(360deg) scale(1.5); top :50px; }

/*划分4*/

.four:hover fieldset,

.five:hover fieldset{margin-top: -68px;background: rgba(1,1,1,0.8);}

#list div{display: none;transition: .5s all;overflow: hidden;}

CSS代码以上是

由于还有个切换的功能 小编直接复制的以前的代码0 0就不做太多说明了

window.οnlοad= function () {

var main=document.getElementById('main');

var ma=new Tab(main);

}

function Tab(obj){

var _this=this;

this.ul=obj.getElementsByTagName('ul')[0];

this.ul_li=this.ul.getElementsByTagName('li');

this.div=obj.getElementsByTagName('div')[0];

this.div_div=this.div.getElementsByTagName('div');

for(var i=0;i

this.ul_li[i].index=i;

this.ul_li[i].οnclick= function () {

_this.TabBox(this);

}

}

}

Tab.prototype.TabBox= function (tab) {

for(var i=0;i

this.ul_li[i].className="";

this.div_div[i].style.display="none";

}

tab.className="active";

this.div_div[tab.index].style.display="block";

}

代码复制进去就可以了,

许嵩最近新出了一首歌,叫遛你玩,还是那句话 喜欢就看看，觉得自己很牛逼不屑一顾 请管住手和嘴 不需要你来评价.。