純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">

<fieldset>

<p>錦鯉抄</p>

<p>銀臨</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png"></a>

<a><img src="img2/震驚-1.png"></a>

<a><img src="img2/笑哭.png"></a>

<a><img src="img2/開心-2.png"></a>

</nav>

</fieldset>

</figure>

</li>

<li class="two">

<figure>

<img src="img2/1.png">

<fieldset>

<p>錦鯉抄</p>

<p>銀臨</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png"></a>

<a><img src="img2/震驚-1.png"></a>

<a><img src="img2/笑哭.png"></a>

<a><img src="img2/開心-2.png"></a>

</nav>

</fieldset>

</figure>

</li>

<li class="three">

<figure>

<img src="img2/2.png">

<fieldset>

<p>錦鯉抄</p>

<p>銀臨</p>

<p></p>

<nav>

<a><img src="img2/奸笑.png"></a>

<a><img src="img2/震驚-1.png"></a>

<a><img src="img2/笑哭.png"></a>

<a><img src="img2/開心-2.png"></a>

</nav>

</fieldset>

</figure>

</li>

</ol>

</div>

<div>

<ol class="clearfix">

<li class="four">

<figure>

<img src="img2/6.png">

<fieldset>

<nav>

<h3>殺陣</h3>

<p>談相遇,嘆相遇</p>

</nav>

</fieldset>

</figure>

</li>

<li class="five">

<figure>

<img src="img2/4.png">

<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>

代碼複製進去就可以了,

許嵩最近新出了一首歌,叫遛你玩,還是那句話 喜歡就看看，覺得自己很牛逼不屑一顧 請管住手和嘴 不需要你來評價.。