2. 程式人生 > >利用css3做出立體摺疊效果

利用css3做出立體摺疊效果

阿新 • • 發佈：2019-02-13
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Show me the Furry Friend of the Day</title>
  6. <script  type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. .header{width:100%;background:#000;height:50px;margin-bottom:20px;min-width:1000px}
  10. /*圖片摺疊效果樣式*/
  11. .view{margin:20px auto;display:block;width:640px;height:400px;border: 8px solid #fff;background-color: #EEE;background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));-webkit-perspective: 800px;-moz-perspective: 800px;-o-perspective: 800px;-ms-perspective: 800px;perspective: 800px;position:relative;box-shadow: inset 0 0 0 .2em hsla(0,0%,0%,.1),
  12. inset 0 0 2em hsla(0,0%,0%,.05),0 .2em .25em hsla(0,0%,0%,.5);}
  13. .view .slice{
  14.         width:128px;
  15.         height: 100%;
  16.         z-index: 100;
  17.         -webkit-transform-style: preserve-3d;
  18.         -moz-transform-style: preserve-3d;
  19.         -o-transform-style: preserve-3d;
  20.         -ms-transform-style: preserve-3d;
  21.         transform-style: preserve-3d;
  22.         -webkit-transform-origin: left center;
  23.         -moz-transform-origin: left center;
  24.         -o-transform-origin: left center;
  25.         -ms-transform-origin: left center;
  26.         transform-origin: left center;
  27.         -webkit-transition: -webkit-transform 150ms ease-in-out;
  28.         -moz-transition: -moz-transform 150ms ease-in-out;
  29.         -o-transition: -o-transform 150ms ease-in-out;
  30.         -ms-transition: -ms-transform 150ms ease-in-out;
  31.         transition: transform 150ms ease-in-out;}
  32. .view-back{
  33.         width: 50%;
  34.         height: 100%;
  35.         position: absolute;
  36.         right: 0;
  37.         background-color: rgb(0,255,255);
  38.         background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));
  39.         z-index: 0;
  40. }
  41. .view .s2, 
  42. .view .s3, 
  43. .view .s4, 
  44. .view .s5 {
  45.         -webkit-transform: translate3d(128px,0,0);
  46.         -moz-transform: translate3d(128px,0,0);
  47.         -o-transform: translate3d(128px,0,0);
  48.         -ms-transform: translate3d(128px,0,0);
  49.         transform: translate3d(128px,0,0);
  50. }
  51. /*為每個切片設定背景圖片位置*/
  52. .view .s1 {
  53.         background-position: 0px 0px;
  54. }
  55. .view .s2 {
  56.         background-position: -128px 0px;
  57. }
  58. .view .s3 {
  59.         background-position: -256px 0px;
  60. }
  61. .view .s4 {
  62.         background-position: -384px 0px;
  63. }
  64. .view .s5 {
  65.         background-position: -512px 0px;
  66. }
  67. .view .overlay {
  68.         width: 128px;
  69.         height: 100%;
  70.         opacity: 0;
  71.         position: absolute;
  72.         -webkit-transition: opacity 150ms ease-in-out;
  73.         -moz-transition: opacity 150ms ease-in-out;
  74.         -o-transition: opacity 150ms ease-in-out;
  75.         -ms-transition: opacity 150ms ease-in-out;
  76.         transition: opacity 150ms ease-in-out;
  77. }
  78. .view:hover .overlay {
  79.         opacity: 1;
  80. }
  81. .view img {
  82.         position: absolute;
  83.         z-index: 0;
  84.         -webkit-transition: left 0.3s ease-in-out;
  85.         -o-transition: left 0.3s ease-in-out;
  86.         -moz-transition: left 0.3s ease-in-out;
  87.         -ms-transition: left 0.3s ease-in-out;
  88.         transition: left 0.3s ease-in-out;
  89. }
  90. .view:hover .s2{
  91.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
  92.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
  93.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
  94.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
  95.         transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
  96. }
  97. .view:hover .s3, 
  98. .view:hover .s5{
  99.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
  100.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
  101.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
  102.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
  103.         transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
  104. }
  105. .view:hover .s4{
  106.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
  107.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
  108.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
  109.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
  110.         transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
  111. }
  112. /*為每個切片建立漸變效果*/
  113. .view .s1 > .overlay {
  114.         background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
  115.         background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
  116.         background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
  117.         background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
  118.         background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
  119. }
  120. .view .s2 > .overlay {
  121.         background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
  122.         background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
  123.         background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
  124.         background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
  125.         background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
  126. }
  127. .view .s3 > .overlay {
  128.         background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
  129.         background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
  130.         background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
  131.         background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
  132.         background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
  133. }
  134. .view .s4 > .overlay {
  135.         background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  136.         background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
  137.         background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
  138.         background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
  139.         background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
  140. }
  141. .view .s5 > .overlay {
  142.         background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  143.         background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  144.         background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  145.         background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  146.         background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  147. }
  148. </style>
  149. </head>
  150. <body  style="background:url(data/attachment/album/201410/21/205405b2dzgtxt2stq27d7.jpg);min-width:1000px">
  151. <header class="header"></header>
  152. <div id="grid">
  153.     <div class="view">
  154.         <div class="view-back">
  155.             <span style="font:32px 'Microsoft YaHei';position:absolute;right:20px;text-shadow: 2px 2px .3em rgba(255, 255, 255, .6);color:#FFF">HIT FM</span>
  156.             <span style="font:18px 'Microsoft YaHei';position:absolute;right:5px;top:50px;text-shadow: 1px 1px .3em rgba(0, 0, 0, .8);">NEVER <br/>STOP THE BEAT!</span>
  157.         </div>
  158.         <img src="data/attachment/album/201410/21/205406wfuvvuowv1yhdvdv.jpg" /> 
  159.     </div>
  160. <script type="text/javascript">
  161. //jquery外掛程式碼                 
  162. $.fn.hoverfold = function( args ) {
  163.     this.each( function() {
  164.         $( this ).children( '.view' ).each( function() {
  165.             var $item   = $( this ),
  166.                 img     = $item.children( 'img' ).attr( 'src' ),
  167.                 struct  = '<div class="slice s1">';
  168.                     struct  +='<div class="slice s2">';
  169.                         struct  +='<div class="slice s3">';
  170.                             struct  +='<div class="slice s4">';
  171.                                 struct  +='<div class="slice s5">';
  172.                                 struct  +='</div>';
  173.                             struct  +='</div>';
  174.                         struct  +='</div>';
  175.                     struct  +='</div>';
  176.                 struct  +='</div>';
  177.             var $struct = $( struct );
  178.             $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
  179.           });
  180.        });
  181.     };
  182. //呼叫外掛
  183. $( '#grid' ).hoverfold();
  184. </script>
  185. </div>
  186. </body>
  187. </html>

相關推薦

利用css3做出立體摺疊效果

<!doctype html><html><head><meta charset="utf-8"><title>Show me the Furry Friend of the Day</title><script  type="te

JavaScript 和 CSS3 做出轉盤抽獎效果

ace line tex lse 如果 play wid text height 首先是HTML代碼 <p id="text">您還剩余3次機會</p> <div class="box"> <img src="./img/

利用CSS3做出立方體

CSS3之立方體 要想利用css3做出立方體，首先我們應該先想象以下立方體的構造，見下圖：               立方體是由六個面組成，分上下左右和前後，考慮這些可以助我們更好的融入css3的程式碼         接下來就是要寫程式碼了：         首先我們設

利用css3的animation實現點點點loading動畫效果（二）

設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果 簡介 box-shadow理論上可以生成任意的圖形效果，當然也就可以實現點點點的loading效果了。 實現原理 html代碼，首先需要寫如下html代

CSS3 3D環境實現立體 魔方效果代碼

3d 魔方 css 環境實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</title>

翻翻git之---利用RecyclerView實現摺疊效果 SectionedExpandableGridRecyclerView

今天也沒有P1，因為年前醬油打多了，事情堆積到現在有點緊迫感了，快點給觀眾老爺上完聊我就去做事了！！ 今天上的是一個可摺疊的RecyclerView SectionedExpandableGridRecyclerView(名字好長) 先上下效果圖：

使用CSS3製作立體效果的導航選單

1 <style> 2 .keleyi-com-nav{ 3 width:520px; 4 height: 50px; 5 font:bold 0/50px Arial; 6 text-align:center; 7 margin:40px auto 0

利用css3+jquery寫具有動畫效果的登入頁面

以下是執行截圖： 利用css3屬性@keyframe定義兩個動畫，分別實現車子輪子旋轉、以及車身移動的動畫roll和move！具體程式碼如下： @keyframes  roll {     0% {         transform:rotate(72deg);    

利用css3動畫效果編寫滑動按鈕開關

程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3做的滑動開關效果</title&g

利用CSS3的transition屬性模仿滑鼠移入閃光燈效果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>    

使用CSS3動畫做出光芒萬丈的效果

css程式碼: /**************************遮罩****************************/ .mui-backdrop { position: fixed; height: 100%; top: 0; righ

利用css3偽類實現邊框環繞效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .bb, .bb::

CSS3屬性之圓角效果——border-radius屬性

20px con 一半 正方 ace ring css key lpad 在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏：http://www.hicss.net/css-practise-of-image-round-box/)。

利用CSS3 transform: rotate(xxdeg)畫對角線

log kit borde order ive 一段 dex css -i 直接上代碼。 <style> *{ /*實際開發中，別這樣偷懶哦*/ margin: 0; padding: 0

CSS3的顏色漸變效果

css3 顏色漸變效果 使用 pac ani 操作 ima bsp 實現 在 "animate.css" 尋找自己想要的動態效果，看到標題Animate.css和按鈕Animate it的顏色在逐漸變化，覺得蠻有趣的，把控制變化的相關代碼扒了下來，自己分析實現一波。 一開始

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法

class ansi clas form屬性 css transform 大小 方法 鼠標懸停 1.改變background-size屬性 將圖片作為某個html元素的背景圖片，用transition屬性改變圖片的大小。 1 .container{ 2 ba

利用css3背景位置完成拼圖

otto mage -c rep images blog png mar center 1 .duo { 2 width: 623px; 3 height: 417px; 4 marg

licecap軟件——簡單做出app的效果gif圖

git class 打開 size 效果 gif 不能 ima com 最近想在博客或者是git上放gif效果圖，找了許久，終於是找到了這款軟件，不到500Kb大小，使用簡單 軟件名為licecap，直接百度上搜索即可 使用的話，打開軟件，就會出現一個窗口 之後，

利用CSS3制作網頁動畫

tro col 關鍵幀 網頁 style 旋轉 tex str nbsp CSS3變形 　　 　translate()平移函數 　　 　scale()縮放函數 　　 　skew()傾斜函數 　　 　rotate()旋轉函數 　　 CSS3過渡 　　 　過渡屬性 　　 　過渡