HTML5特效庫炫酷CSS3 3D圖片相冊特效

果圖

各位媛猿大家好

今天給大家帶來的是 CSS3 3D圖片相冊特效

大家可以按照自己的意愿修改成喜歡的樣子！

想要文件版源碼的，請加窮581549454

廢話不多說，上源碼！

CSS源碼：

@charset "utf-8";

/*科e互聯特效基本框架CSS*/

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

body>div{margin:0 auto}

div {text-align:left}

a img {border:0}

body { color: #333; text-align: center; font: 12px "微軟雅黑"; }

ul, ol, li {list-style-type:none;vertical-align:0}

a {outline-style:none;color:#535353;text-decoration:none}

a:hover { color: #D40000; text-decoration: none}

.clear{height:0; overflow:hidden; clear:both}

.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

}

.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}

.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}

.cor_bs,.cor_bs:hover{color:#ffffff;}

.keBody{background:url(../images/bodyBg.jpg) repeat #333;}

.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微軟雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}

.kePublic{background:#FFF; padding:50px;}

.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微軟雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}

.keTxtP{font-size:16px; color:#ffffff;}

.keUrl{color:#FFF; font-size:30px;}

.keUrl:hover{ text-decoration: underline; color: #FFF; }

.mKeBanner,.mKeBanner div{text-align:center;}

/*科e互聯特效基本框架CSS結束，應用特效時，以上樣式可刪除*/

.warper{ width: 860px; height: 300px; border: 2px solid #efefef; margin: 0 auto; padding: 3px 3px 0px 0px; }

#wowslider-container1 { zoom: 1; position: relative; max-width: 716px; float:right; z-index: 90 }

* html #wowslider-container1 { width: 716px }

#wowslider-container1 .ws_images ul { position: relative; width: 10000%; height: auto; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible }

#wowslider-container1 .ws_images ul li { width: 1%; line-height: 0; float: left; font-size: 0; padding: 0!important; margin: 0!important }

#wowslider-container1 .ws_images { position: relative; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }

#wowslider-container1 .ws_images a { width: 100%; display: block; color: transparent }

#wowslider-container1 img { max-width: none!important }

#wowslider-container1 .ws_images img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0 }

#wowslider-container1 a { text-decoration: none; outline: 0; border: 0 }

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position: absolute; display: none; top: 50%; margin-top: -3.5em; z-index: 60; height: 7.1em; width: 7.1em; background-image: url(../images/arrows.png); background-size: 200% }

#wowslider-container1 a.ws_next { background-position: 100% 0; right: 1em }

#wowslider-container1 a.ws_prev { left: 1em; background-position: 0 0 }

#wowslider-container1 a.ws_next:hover { background-position: 100% 100% }

#wowslider-container1 a.ws_prev:hover { background-position: 0 100% }

* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev { display: block }

#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev { display: block }

#wowslider-container1 .ws_playpause { display: none; width: 7.1em; height: 7.1em; position: absolute; top: 50%; left: 50%; margin-left: -3.5em; margin-top: -3.5em; z-index: 59; background-size: 100% }

#wowslider-container1:hover .ws_playpause { display: block }

#wowslider-container1 .ws_pause { background-image: url(../images/pause.png) }

#wowslider-container1 .ws_play { background-image: url(../images/play.png) }

#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { background-position: 100% 100%!important }

#wowslider-container1 .ws-title { position: absolute; display: block; bottom: 3.5em; left: 1em; margin-right: 1em; padding: 1em .9em .9em .9em; background-color: rgba(0,0,0,0.4); color: #fff; z-index: 50; font-weight: bold; text-transform: uppercase; border-radius: .2em; -moz-border-radius: .2em; -webkit-border-radius: .2em }

#wowslider-container1 .ws-title div { margin-top: .3em; font-size: 1.6em; line-height: 1.15em; font-weight: normal; text-transform: none; color: #fff }

#wowslider-container1 .ws-title span { font-size: 2.4em }

#wowslider-container1 .ws_thumbs { font-size: 0; position: absolute; overflow: auto; z-index: 70; left: -19.51%; top: 0; width: 18.72%; height: 100% }

#wowslider-container1 .ws_thumbs img { text-decoration: none; border: 0; width: 100% }

#wowslider-container1 .ws_thumbs a { position: relative; text-indent: -4000px; color: transparent; opacity: .85; text-decoration: none; display: inline-block; border: 0; margin-bottom: 4%; text-indent: 0; padding: 2.99%; width: 89.54%; background-color: #fff }

#wowslider-container1 .ws_thumbs a:hover { opacity: 1 }

#wowslider-container1 .ws_thumbs a:hover img { visibility: visible }

#wowslider-container1 .ws_thumbs div { position: relative; width: 100% }

#wowslider-container1 .ws_thumbs a.ws_selthumb { background-color: #bce0dd }

#wowslider-container1 .ws_images ul { animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite }

@keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

@-moz-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

@-webkit-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

index：

<!DOCTYPE HTML>

<html>

<head>

<title>CSS3 3D圖片相冊特效 - 網頁特效庫 - jquery特效</title>

</head>

<h1 class="keTitle">CSS3 3D圖片相冊特效</h1>

<ul>

</ul>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

程序開發中，標簽ul與css樣式實現菜單，也是經常用到的技巧，這里給大家介紹2個實例：

標簽ul與css樣式實現菜單特效實例1

如下圖所示：

標簽ul與css樣式實現菜單特效實例1

menu1.html網頁代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>標簽ul與css樣式實現菜單特效</title>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

css.css代碼如下：

#mymenu{

border-top: 7px solid black;

margin: 0;

padding: 0;

}

#mymenu ul{

margin: 0;

margin-left: 15px;

float: left;

padding-left: 10px;

font: 12px 宋體;

background-color: black;

}

* html #mymenu ul{

margin-bottom: 1em;

margin-left: 7px;

}

#mymenu ul li{

display: inline;

}

#mymenu ul li a{

float: left;

color: white;

font-weight: ;

padding: 2px 11px 7px 7px;

text-decoration: none;

}

#mymenu ul li a:visited{

color: white;

}

#mymenu ul li a:hover, #mymenu ul li a#selected{

color: white;

background-color: darkred;

}

#mymenu ul li a#rightcorner{

padding-right: 0;

padding-left: 8px;

}

標簽ul與css樣式實現菜單特效實例2

如下圖所示：

標簽ul與css樣式實現菜單特效實例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>標簽ul與css樣式實現菜單特效</title>

{

font-size:13px;

font-weight:800;

text-decoration:none;

margin:0;

padding:0;

}

body

{

background:#ddd;

}

#menu

{

list-style-type: none;

border:1px solid #fff;

margin:50px auto;

width:770px;

height:30px;

overflow:hidden;

background:#000 url(a.png) 0 0 repeat-x;

}

#menu li

{

border-right:1px solid #fff;

float:left;

}

#menu li a

{

display:block;

text-align:center;

color:#fff;

line-height:30px;

padding:0 10px;

}

#menu li a:hover,#menu li.current

{

background:#fff url(b.png) 0 0 repeat-x;

}

</style>

</head>

<body>

</ul>

</body>

</html>

看完代碼實現后，大家是不是覺得比較簡單呀，趕快來DIY吧。

例

各位長友大家早上好，

今天給大家帶來的是 9款css3鼠標劃過圖片散開特效源碼！

大家可以自行發揮做成自己喜歡的樣子！

若想要文件版源碼，請看評論區！

廢話不多說，上源碼！

CSS源碼：

body {

margin: 0px;

padding: 0px;

background-color: #C3CCD5;

font-family: 'Source Sans Pro', sans-serif;

}

.albums{

width: 100%;

float: left;

}

.albums-inner{

width: 1100px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

}

.albums-title {

float: left;

width: 100%;

color: rgba(53,117,159,1);

font-size: 20px;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: rgba(53,117,159,1);

line-height: 50px;

margin-bottom: 100px;

}

.albums-tab{

float: left;

width: 300px;

margin-right: 100px;

margin-bottom: 100px;

}

.albums-tab:nth-child(3n+0) {

margin-right: 0px;

}

.albums-tab-thumb{

float: left;

width: 300px;

height: 200px;

}

.albums-tab-thumb img {

height: auto;

width: 290px;

background-color: rgba(255,255,255,1);

padding: 5px;

}

.albums-tab-text{

float: left;

width: 100%;

text-align: center;

color: rgba(53,117,159,1);

margin-top: 15px;

font-size: 18px;

}

.albums-tab-text span {

font-size: 14px;

color: rgba(102,102,102,1);

}

index：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>9款css3鼠標劃過圖片散開特效代碼 | 手機網站特效| 網頁特效庫</title>

</head>

<body>

</div>

<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>

</div>

</div>

</body>

</html>

在線咨詢

上一篇：HTML5實戰-簽到功能
下一篇：HTML5大顯神通：8個3D視覺效果“讓你好看”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5特效庫 炫酷CSS3 3D圖片相冊特效

想要文件版源碼的，請加窮581549454

CSS源碼：

index：

標簽ul與css樣式實現菜單特效實例1

標簽ul與css樣式實現菜單特效實例2

CSS源碼：

index：

您的項目需求

HTML5特效庫炫酷CSS3 3D圖片相冊特效