纯css实现提示动画效果

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

先看下效果图

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

html代码比较多

<div id="main">

<ul class="clearfix">

<li class="active"><a href="#">The first item</a></li>

<li><a href="#">the second item</a></li>

</ul>

<div id="list">

<div class="ac2" style="display: block">

<ol class="clearfix">

<li class="one">

<figure>

<img src="img2/0.png" alt="纯css实现提示动画效果">

<fieldset>

<p>锦鲤抄</p>

<p>银临</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/震惊-1.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/笑哭.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/开心-2.png" alt="纯css实现提示动画效果"></a>

</nav>

</fieldset>

</figure>

</li>

<li class="two">

<figure>

<img src="img2/1.png" alt="纯css实现提示动画效果">

<fieldset>

<p>锦鲤抄</p>

<p>银临</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/震惊-1.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/笑哭.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/开心-2.png" alt="纯css实现提示动画效果"></a>

</nav>

</fieldset>

</figure>

</li>

<li class="three">

<figure>

<img src="img2/2.png" alt="纯css实现提示动画效果">

<fieldset>

<p>锦鲤抄</p>

<p>银临</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/震惊-1.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/笑哭.png" alt="纯css实现提示动画效果"></a>

<a><img src="img2/开心-2.png" alt="纯css实现提示动画效果"></a>

</nav>

</fieldset>

</figure>

</li>

</ol>

</div>

<div>

<ol class="clearfix">

<li class="four">

<figure>

<img src="img2/6.png" alt="纯css实现提示动画效果">

<fieldset>

<nav>

<h3>杀阵</h3>

<p>谈相遇,叹相遇</p>

</nav>

</fieldset>

</figure>

</li>

<li class="five">

<figure>

<img src="img2/4.png" alt="纯css实现提示动画效果">

<fieldset>

<nav>

<h3>杀阵</h3>

<p>谈相遇,叹相遇</p>

</nav>

</fieldset>

</figure>

</li>

</ol>

</div>

</div>

</div>

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

下面是css代码

<style>

*{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;}

</style>

CSS代码以上是

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

<script>

window.onload= 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.length;i++){

this.ul_li[i].index=i;

this.ul_li[i].onclick= function () {

_this.TabBox(this);

}

}

}

Tab.prototype.TabBox= function (tab) {

for(var i=0;i<this.ul_li.length;i++){

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

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

}

tab.className="active";

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

}

</script>

代码复制进去就可以了,

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