1.一排中有好幾個div 讓它一個一個依次淡淡的出現：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<body>
<p>以下執行個體示範了 fadeIn() 使用了不同參數的效果。</p>
<button>點選淡入 div 元素。</button>
<br><br>
<div id="div1" style="80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div>
</body>
2.給圖檔加個動的效果：
一個div裡面有個img圖檔
添加圖檔動的效果 樣式：
<style type="text/css">
.dong66 {
overflow: hidden;
}
.dong66 img {
cursor: pointer;
transition: all 0.6s;
}
.dong66 img:hover {
transform: scale(1.2);
}
</style>
<div>
<img src="1.png" />
</div>
3.滑鼠移上去給div增加一個class名：
<script type="text/javascript">
$('.elm').hover(
function() {
$(this).addClass('hover')
},
function() {
$(this).removeClass('hover')
}
)
</script> 用js實作滑鼠的移入移出效果：
<script type="text/javascript">
// 滑鼠移入移出事件
$('li').hover(function() {
// 滑鼠移入時添加hover類
$(this).addClass('hover')
}, function() {
// 滑鼠移出時移出hover類
$(this).removeClass('hover')
});
</script> jquery實作滑鼠移動上和移走後的效果：
$("#aaa").mouseover(function(){
$("#aaa").css("background-color","red");
})
$("#aaa").mouseleave(function(){
$("#aaa").css("background-color","green");
}) 4.隻需要加上class名就可以實作動态效果：
http://www.mamicode.com/info-detail-1208639.html
5.animate.css 和 wow.min.js 一起配合使用
首先引用
<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>
引入後按照 http://www.jq22.com/yanshi819 給的效果找到相應的class名添加上就能實作相應的效果。
<div class="fadeInLeft animated wow"></div> <div class="b_s fadeInLeft animated wow" data-wow-delay="1.5s"> 其中 data-wow-delay="1.5s" 表示的延後多長時間後觸發這個動畫效果。 6.添加邊框陰影：
div
{
box-shadow: 10px 10px 5px #888888;
} 7.滑鼠放上去 上面的浮層變長 動畫效果
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
<body>
8.滑鼠放上去 ：hover 屬性 處理一張圖檔，放上去後比原來的圖檔多些東西。
.in_tu_right .r_tu1 a:hover{
background:url(../images/sl422.jpg) no-repeat 0px 0;
} 9.給網站加高亮。
當導航欄目寫死的時候每個欄目單獨加判斷。
高亮
<li class="fl time "><a href="{APP_PATH}" {if !$catid} id="nav_dj_dqy" {/if}>首頁</a></li>
<li class="fl time"><a href="{$CATEGORYS[1][url]}" {if $catid==1} id="nav_dj_dqy" {/if}>關于我們</a></li>
<li class="fl time"><a href="{$CATEGORYS[9][url]}" {if $catid==9} id="nav_dj_dqy" {/if}>産品與方案</a></li>
<li class="fl time"><a href="{$CATEGORYS[5][url]}" {if $catid==5} id="nav_dj_dqy" {/if}>應用領域</a></li>
<li class="fl time"><a href="{$CATEGORYS[6][url]}" {if $catid==6} id="nav_dj_dqy" {/if}>解決方案</a></li>
<li class="fl time"><a href="{$CATEGORYS[15][url]}" {if $catid==15} id="nav_dj_dqy" {/if}>新聞中心</a></li>
<li class="fl time"><a href="{$CATEGORYS[8][url]}" {if $catid==8} id="nav_dj_dqy" {/if}>聯系我們</a></li> 當給周遊導航欄目時需要加頁面欄目的選中效果時：
{if ($parentid)}
{pc:content action="category" catid="$parentid" num="15" siteid="$siteid" order="listorder ASC"}
{loop $data $r}
<a href="{$r[url]}" {if $catid==$r[catid] || $top_parentid==$r[catid]} id="nav_dj_dqy" {/if}>{$r[catname]}</a>
{/loop}
{/pc}
{else}
<a href="{$CATEGORYS[$catid][url]}">{$CATEGORYS[$catid][catname]}</a>
{/if} 10 滑鼠放上去有邊框 或者隻有下邊框等 ：hover屬性。
11 滑鼠放在div上 從上面滑下黑色浮層的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a_b{
height: 500px;
width: 500px;
background-color: salmon;
margin-top: 800px;
margin-left: 500px;
}
.a_b:hover{
cursor: pointer;
}
.a_b:hover .a_c{
height: 500px;
}
.a_c{
height: 0px;
width: 500px;
background-color: #000000;
opacity: 0.5;
transition:height 1s;
-webkit-transition:height 1s; /* Safari */
}
</style>
</head>
<body>
<div class="a_a"></div>
<div class="a_b">
<div class="a_c"></div>
</div>
</body>
</html> 12.當滑鼠放在圖檔上時 圖檔一下子變大
樣式：
/*圖檔變大效果開始*/
.a_d{
overflow: hidden;
border: 5px solid black;
height: 400px;
width: 400px;
}
.a_d img{
transition: transform .2s;
height: 400px;
width: 400px;
}
.a_d img:hover{
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
/*圖檔變大效果結束*/ 代碼：
<div class="a_d">
<img src="images/trainer3.png" />
</div> 13.滑鼠放在div上 它裡面的div四周出現陰影
樣式：
/*滑鼠放在div上 它裡面的div四周出現陰影開始*/
.a_e{
width: 300px;
height: 500px;
margin-left: 500px;
}
.a_f{
width: 300px;
height: 200px;
margin-top: 50px;
}
.a_e:hover .a_f {
box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 1);
}
/*滑鼠放在div上 它裡面的div四周出現陰影結束*/ 代碼：
<div class="a_e">
<div class="a_f"></div>
</div> 14.當滑鼠放在div上時邊框方角變圓角
樣式：
.a_g{
width: 300px;
height: 200px;
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
transition: 0.5s;
-webkit-transition: 0.5s; /* Safari */
}
.a_g:hover{
border-radius: 60px 0px;
} 代碼：
<div class="a_g"></div> 15.首頁上展示公司簡介或者關于我們等純展示，寫死的東西時 有兩三張重疊在一起的圖檔時 可以運用 animate.css 和 wow.min.js 一起用使照片動起來。
三張圖檔左邊從左邊出來，右邊從右邊出來，中間的從裡面出來。
16.div本來就有淺色的邊框，當滑鼠放上去的時候淺色的邊框變的深一點的顔色。
17.有小圖示時，滑鼠放上去時小圖示的背景色由白色或淺色底變為深色底。
18. http://static.sucaihuo.com/modals/52/5200/demo/ 彙川樣式的模闆網站
19.滑鼠放在div上後 div整體跟着移動很小的距離
樣式：
/*滑鼠放在div上後 div跟着移動很小的距離開始*/
.box{
width: 1000px;
height: 800px;
margin: 0 auto;
border: 5px solid black;
}
.thumbnail {
width: 500px;
height: 400px;
border: 1px solid gainsboro;
position: relative;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border: 1px solid rgba(221, 221, 221, 0.5);
border-radius: 4px;
-webkit-transition: border .2s ease-in-out, margin-top .4s ease-in-out;
-o-transition: border .2s ease-in-out, margin-top .4s ease-in-out;
transition: border .2s ease-in-out, margin-top .4s ease-in-out;
}
.thumbnail:hover {
box-shadow: 9px 12px 14px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 9px 12px 14px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 9px 12px 14px rgba(0, 0, 0, 0.1);
-o-box-shadow: 9px 12px 14px rgba(0, 0, 0, 0.1);
margin-top: -20px;
transition: margin-top .4s ease-in-out
}
/*滑鼠放在div上後 div跟着移動很小的距離結束*/ 代碼：
<div class="box">
<div class="thumbnail"></div>
</div> 20.滑鼠放在圖檔上後圖檔旋轉并且變大1.2倍。
.d_d a img:hover{
-ms-transform: scale(1.2) rotate(7deg);
/* IE 9 */
-webkit-transform: scale(1.2) rotate(7deg);
/* Chrome, Safari, Opera */
transform: scale(1.2) rotate(7deg);
} 21.用樣式當滑鼠放在圖示和文字上時，hover 讓文字向上移動一點距離，讓隐藏的文字display block出現 讓圖示怎麼怎麼樣。
22.當滑鼠放在橫排展示的一個個清單内容上時，每一個都增大1.1倍。
樣式：
.blog-w3 {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.blog-w3:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
} 23. 當滑鼠放上去後 圖檔旋轉360度
樣式：
.a_h:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
/* IE 9 */
-moz-transform:rotate(360deg);
/* Firefox */
-webkit-transform:rotate(360deg);
/* Safari and Chrome */
-o-transform:rotate(360deg);
/* Opera */
transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
} 24 要做的效果如下圖：
當滑鼠放上去後從下面出現長方形的黑色浮層 浮層上顯示标題。
樣式：
.a_i{
width: 300px;
height: 200px;
background-color: #00CBFE;
position: relative;
}
.a_j{
position: absolute;
bottom: 0px;
height: 0px;
width: 300px;
background-color: #000000;
opacity: 0.5;
transition:height 1s;
-webkit-transition:height 1s; /* Safari */
}
.a_i:hover .a_j{
height: 50px;
} 代碼：
<div class="a_i">
<div class="a_j"></div>
</div> 25.當滑鼠放上去之後 圖示自動旋轉 包着的div讓它變大倍數
26.展示圖檔産品圖檔清單時 當滑鼠放在圖檔上時 出現遮罩層的同時讓隐藏的圖示或者文字出現。
27.好看的邊框顔色 代碼：
border:1px solid #59b7c2; 28.滑鼠移動到産品清單的圖檔上時，文字移動 圖示出現 另一個圖示旋轉。
29.首頁新聞子產品上 當滑鼠放在新聞的簡介或描述的長文字上時 描述的文字出現下劃線。
30. 當清單以div中上面是圖檔下面是文字的形式呈現的時候，動的效果可以為當滑鼠放在最外面的div上時，從下面滑上來浮層蓋住文字的效果 如下圖：
31.當清單以div中上面是圖檔下面是文字的形式呈現的時候，動的效果可以為當滑鼠放在最外面的div上時，下面裝文字的小div向上滑動，滑到圖檔上面蓋住一部分圖檔。效果如下圖：