#B_DEMO { width:100%; margin-bottom:2rem; position:relative; } #B_DEMO div, #B_DEMO p, #B_DEMO ul, #B_DEMO li, #B_DEMO img { padding:0px; margin:0px; border:0; } #B_DEMO p img { max-width:none; } #B_DEMO a { text-decoration:none; outline:none; blr:expression(this.onFocus=this.blur()); } #B_DEMO .p-list { width:100%; height:100%; overflow:hidden; position:relative; /*z-index:1;*/ } #B_DEMO .p-list li { width:100%; height:100%; position:absolute; left:0px; top:0px; display:list-item; } #B_DEMO .p-list li a { width:100%; height:100%; margin:0 auto; position:relative; display:block; overflow:hidden; } #B_DEMO .p-list li a:hover { text-decoration:none; } #B_DEMO .btn { position:absolute; top:3%; right:1%; z-index:1; } #B_DEMO .btn li { margin-left:10px; background:#fff; text-indent:-999em; float:left; width:12px; height:12px; cursor:pointer; border-radius:50%; } #B_DEMO .btn li.hover { background:#fc3; } /***********************************************************************************************************************************************************************/ /* transform:種類 == translate平移、rotate旋轉、scale縮放 */ /*齒輪*/ #B_DEMO .demo1 .pc0 { position:absolute; top:-6.5%; left:-1.73%; } #B_DEMO .demo1 .pc0.hover { animation:B_A_0 40s ease; } @keyframes B_A_0 { 0%{transform:rotate(-180deg);} 50%{transform:rotate(0deg);} } /*********************/ /*齒輪*/ #B_DEMO .demo1 .pc1 { position:absolute; top:12.5%; left:11.51%; } #B_DEMO .demo1 .pc1.hover { animation:B_A_1 40s ease; } @keyframes B_A_1 { 0%{transform:rotate(180deg);} 50%{transform:rotate(0deg);} } /*********************/ /*齒輪*/ #B_DEMO .demo1 .pc2 { position:absolute; bottom:-5.2%; left:2.4%; } #B_DEMO .demo1 .pc2.hover { animation:B_A_2 40s ease; } @keyframes B_A_2 { 0%{transform:rotate(-180deg);} 50%{transform:rotate(0deg);} } /*********************/ /*齒輪*/ #B_DEMO .demo1 .pc3 { position:absolute; bottom:3.4%; left:23.1%; } #B_DEMO .demo1 .pc3.hover { animation:B_A_3 40s ease; } @keyframes B_A_3 { 0%{transform:rotate(-180deg);} 50%{transform:rotate(0deg);} } /*********************/ /*logo*/ #B_DEMO .demo1 .pc4 { position:absolute; top:5%; left:3%; } #B_DEMO .demo1 .pc4.hover { animation:B_A_4 1s ease-out; } @keyframes B_A_4 { 0%{left:-100%;transform:rotateY(180deg);} 100%{left:3%;transform:rotateY(0deg);} } /*********************/ /*螢幕*/ #B_DEMO .demo1 .pc5 { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #B_DEMO .demo1 .pc5.hover { animation:B_A_5 2s ease-out; } @keyframes B_A_5 { 0%{transform:translate(-50%, -50%) scale(0);} 50%{transform:translate(-50%, -50%) scale(0);} 100%{transform:translate(-50%, -50%) scale(1);} } /*********************/ /*建立、查詢種鴿資料*/ #B_DEMO .demo1 .pc6 { position:absolute; top:18%; right:4%; } #B_DEMO .demo1 .pc6.hover { animation:B_A_6 2s ease-in; } @keyframes B_A_6 { 0%{top:920%; opacity:0;} 100%{top:18%; opacity:1;} } /*********************/ /*輕鬆列印作出血統書*/ #B_DEMO .demo1 .pc7 { position:absolute; top:38%; right:4%; } #B_DEMO .demo1 .pc7.hover { animation:B_A_7 2.8s ease-in; } @keyframes B_A_7 { 0%{top:940%; opacity:0;} 100%{top:38%; opacity:1;} } /*********************/ /*血統書簡、繁體切換*/ #B_DEMO .demo1 .pc8 { position:absolute; top:58%; right:4%; } #B_DEMO .demo1 .pc8.hover { animation:B_A_8 3.6s ease-in;; } @keyframes B_A_8 { 0%{top:960%; opacity:0;} 100%{top:58%; opacity:1;} } /*********************/ /*數種血統書列印樣式*/ #B_DEMO .demo1 .pc9 { position:absolute; top:78%; right:4%; } #B_DEMO .demo1 .pc9.hover { animation:B_A_9 4.4s ease-in; } @keyframes B_A_9 { 0%{top:980%; opacity:0;} 100%{top:78%; opacity:1;} } /***********************************************************************************************************************************************************************/ /*螢幕*/ #B_DEMO .demo2 .pc0 { position:absolute; top:10%; left:2%; } #B_DEMO .demo2 .pc0.hover { animation:B_B_0 0.5s ease-in; } @keyframes B_B_0 { 0%{top:110%; opacity:0;} 100%{top:10%; opacity:1;} } /*********************/ /*鴿子*/ #B_DEMO .demo2 .pc1 { position:absolute; top:11%; left:40%; opacity:0; } #B_DEMO .demo2 .pc1.hover { animation:B_B_1 1s 0.1s ease forwards; } @keyframes B_B_1 { 0%{top:-100%; opacity:0;} 100%{top:11%; opacity:1;} } /*********************/ /*列出上三代資料*/ #B_DEMO .demo2 .pc2 { position:absolute; top:4%; right:28%; transform:scale(1); } #B_DEMO .demo2 .pc2.hover { animation:B_B_2 1.5s ease-out; } @keyframes B_B_2 { 0%{transform:scale(0);} 100%{transform:scale(0);} } /*********************/ /*上三代血統*/ #B_DEMO .demo2 .pc3 { position:absolute; top:12%; right:21.6%; opacity:0; } #B_DEMO .demo2 .pc3.hover { animation:B_B_3 0.5s 1.5s ease forwards; } @keyframes B_B_3 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*********************/ /*查詢作出子代*/ #B_DEMO .demo2 .pc4 { position:absolute; top:4%; left:27%; transform:scale(1); } #B_DEMO .demo2 .pc4.hover { animation:B_B_4 2.2s ease-out; } @keyframes B_B_4 { 0%{transform:scale(0);} 100%{transform:scale(0);} } /*********************/ /*子代血統*/ #B_DEMO .demo2 .pc5 { position:absolute; top:15%; left:32%; opacity:0; } #B_DEMO .demo2 .pc5.hover { animation:B_B_5 0.5s 2.2s ease forwards; } @keyframes B_B_5 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*********************/ /*查詢兄弟姊妹鴿*/ #B_DEMO .demo2 .pc6 { position:absolute; bottom:27%; left:40%; transform:scale(1); } #B_DEMO .demo2 .pc6.hover { animation:B_B_6 2.9s ease-out; } @keyframes B_B_6 { 0%{transform:scale(0);} 100%{transform:scale(0);} } /*********************/ /*兄弟姊妹血統*/ #B_DEMO .demo2 .pc7 { position:absolute; bottom:5%; left:37%; opacity:0; } #B_DEMO .demo2 .pc7.hover { animation:B_B_7 0.5s 2.9s ease forwards; } @keyframes B_B_7 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*********************/ /*高代溯源速查*/ #B_DEMO .demo2 .pc8 { position:absolute; top:25%; right:2.5%; transform:scale(1); } #B_DEMO .demo2 .pc8.hover { animation:B_B_8 3.6s ease-out; } @keyframes B_B_8 { 0%{transform:scale(0);} 100%{transform:scale(0);} } /*********************/ /*高代血統*/ #B_DEMO .demo2 .pc9 { position:absolute; top:39%; right:2.2%; opacity:0; } #B_DEMO .demo2 .pc9.hover { animation:B_B_9 0.5s 3.6s ease forwards; } @keyframes B_B_9 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /***********************************************************************************************************************************************************************/ /*光芒*/ #B_DEMO .demo3 .pc0 { position:absolute; bottom:-20%; left:20%; transform-origin:center bottom; } #B_DEMO .demo3 .pc0.hover { animation:B_C_0 infinite 30s linear; } @keyframes B_C_0 { 0%{transform:rotate(-75deg);} 10%{transform:rotate(75deg);} 20%{transform:rotate(-75deg);} 30%{transform:rotate(75deg);} 40%{transform:rotate(-75deg);} 50%{transform:rotate(75deg);} 60%{transform:rotate(-75deg);} 70%{transform:rotate(75deg);} 80%{transform:rotate(-75deg);} 90%{transform:rotate(75deg);} 100%{transform:rotate(-75deg);} } /*******************/ /*光芒*/ #B_DEMO .demo3 .pc1 { position:absolute; bottom:-50%; right:20%; transform-origin:center bottom; } #B_DEMO .demo3 .pc1.hover { animation:B_C_1 infinite 30s linear; } @keyframes B_C_1 { 0%{transform:rotate(60deg);} 10%{transform:rotate(-100deg);} 20%{transform:rotate(60deg);} 30%{transform:rotate(-100deg);} 40%{transform:rotate(60deg);} 50%{transform:rotate(-100deg);} 60%{transform:rotate(60deg);} 70%{transform:rotate(-100deg);} 80%{transform:rotate(60deg);} 90%{transform:rotate(-100deg);} 100%{transform:rotate(60deg);} } /*******************/ /*螢幕*/ #B_DEMO .demo3 .pc2 { position:absolute; top:5%; left:3%; transform:scale(1); } #B_DEMO .demo3 .pc2.hover { animation:B_C_2 1s ease-out; } @keyframes B_C_2 { 0%{transform:scale(0);} 40%{transform:scale(0);} 100%{transform:scale(1);} } /*******************/ /*可經由連線至自己的電腦IP在手機或平板上操作使用*/ #B_DEMO .demo3 .pc3 { position:absolute; top:15%; right:2%; opacity:0; transform-origin:left center; } #B_DEMO .demo3 .pc3.hover { animation:B_C_3 0.8s 1s ease forwards; } @keyframes B_C_3 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*******************/ /*電腦、數據機*/ #B_DEMO .demo3 .pc4 { position:absolute; top:38%; left:38%; opacity:0; transform-origin:left center; } #B_DEMO .demo3 .pc4.hover { animation:B_C_4 0.7s 1.5s ease forwards; } @keyframes B_C_4 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*******************/ /*電波*/ #B_DEMO .demo3 .pc5 { position:absolute; top:65%; left:54%; opacity:0; } #B_DEMO .demo3 .pc5.hover { animation:B_C_5 15s infinite 2s linear forwards; } @keyframes B_C_5 { 0%{transform:rotate(9000deg);} 10%{transform:rotate(8000deg); opacity:1;} 100%{transform:rotate(100deg); opacity:1;} } /*******************/ /*箭頭*/ #B_DEMO .demo3 .pc6 { position:absolute; bottom:14%; left:57%; opacity:0; transform-origin:left center; } #B_DEMO .demo3 .pc6.hover { animation:B_C_6 0.4s 2.8s ease forwards; } @keyframes B_C_6 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*******************/ /*手機*/ #B_DEMO .demo3 .pc7 { position:absolute; top:35%; left:65.5%; opacity:0; transform-origin:left center; } #B_DEMO .demo3 .pc7.hover { animation:B_C_7 0.2s 3s ease forwards; } @keyframes B_C_7 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /*******************/ /*平板*/ #B_DEMO .demo3 .pc8 { position:absolute; bottom:8%; right:10%; opacity:0; transform-origin:left center; } #B_DEMO .demo3 .pc8.hover { animation:B_C_8 0.3s 3.5s ease forwards; } @keyframes B_C_8 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } /***********************************************************************************************************************************************************************/ /* #B_DEMO .demo4 .pc0 { position:absolute; top:3%; right:25%; opacity:0; transform-origin:left center; } #B_DEMO .demo4 .pc0.hover { animation:B_D_0 0s 0.5s ease forwards; } @keyframes B_D_0 { 0%{transform:scale(0);} 100%{transform:scale(1); opacity:1;} } */ /*******************/ /*螢幕*/ #B_DEMO .demo4 .pc1 { position:absolute; bottom:-5%; left:3%; } #B_DEMO .demo4 .pc1.hover { animation:B_D_1 0.5s ease-in; } @keyframes B_D_1 { 0%{bottom:-50%; opacity:0;} 100%{bottom:-5%; opacity:1;} } /*********************/ /*印表機*/ #B_DEMO .demo4 .pc2 { position:absolute; bottom:15%; left:38%; transform:scale(1); } #B_DEMO .demo4 .pc2.hover { animation:B_D_2 1.5s ease-out; } @keyframes B_D_2 { 0%{transform:scale(0);} 95%{transform:scale(0);} 100%{transform:scale(1);} } /*******************/ /*依需求可切換繁、簡字體以供列印血統書*/ #B_DEMO .demo4 .pc3 { position:absolute; top:13%; right:10%; } #B_DEMO .demo4 .pc3.hover { animation:B_D_3 1s ease-out; } @keyframes B_D_3 { 0%{right:-100%;} 100%{right:10%; opacity:1;} } /*********************/ /*血統書*/ /*共用圖片*/ #B_DEMO .demo4 .pc4 { position:absolute; top:30%; right:23%; opacity:0; } #B_DEMO .demo4 .pc4.hover { animation:B_D_4 1.5s 1.8s ease forwards; } @keyframes B_D_4 { 0%{top:55%; right:55%; transform:scale(0);} 20%{top:60%; right:45%; transform:scale(0.2); } 40%{top:45%; right:40%; transform:scale(0.4);} 100%{ right:23%; transform:scale(1); opacity:1;} } /*********************/ /*血統書*/ /*共用圖片*/ #B_DEMO .demo4 .pc5 { position:absolute; top:30%; right:4%; opacity:0; } #B_DEMO .demo4 .pc5.hover { animation:B_D_5 1.5s 2.5s ease forwards; } @keyframes B_D_5 { 0%{top:55%; right:55%; transform:scale(0);} 20%{top:60%; right:45%; transform:scale(0.2); } 40%{top:45%; right:40%; transform:scale(0.4);} 100%{ right: 4%; transform:scale(1); opacity:1;} } /*********************/ /*繁體放大鏡*/ #B_DEMO .demo4 .pc6 { position:absolute; bottom:6%; right:23%; opacity:0; transform:scale(1); } #B_DEMO .demo4 .pc6.hover { animation:B_D_6 0.8s 3.5s ease forwards; } @keyframes B_D_6 { 0%{transform:scale(0);} 50%{transform:scale(0);} 100%{transform:scale(1);opacity:1;} } /*********************/ /*簡體放大鏡*/ #B_DEMO .demo4 .pc7 { position:absolute; bottom:6%; right:4%; opacity:0; transform:scale(1); } #B_DEMO .demo4 .pc7.hover { animation:B_D_7 0.8s 4s ease forwards; } @keyframes B_D_7 { 0%{transform:scale(0);} 50%{transform:scale(0);} 100%{transform:scale(1);opacity:1;} } /***********************************************************************************************************************************************************************/ /*螢幕*/ #B_DEMO .demo5 .pc0 { position:absolute; top:10%; left:5%; transform:scale(1); } #B_DEMO .demo5 .pc0.hover { animation:B_E_0 1s ease-out; } @keyframes B_E_0 { 0%{transform:scale(0);} 40%{transform:scale(0);} 100%{transform:scale(1);} } /*******************/ /*logo*/ #B_DEMO .demo5 .pc1 { position:absolute; top:10%; left:40%; opacity:0; } #B_DEMO .demo5 .pc1.hover { animation:B_E_1 0.5s 1s ease forwards; } @keyframes B_E_1 { 0%{top:-50%; opacity:0;} 100%{top:10%; opacity:1;} } /*********************/ /*可儲存100億筆種鴿資料*/ #B_DEMO .demo5 .pc2 { position:absolute; top:35%; right:5%; } #B_DEMO .demo5 .pc2.hover { animation:B_E_2 2s ease-out; } @keyframes B_E_2 { 0%{right:-500%;} 50%{right:-500%; opacity:1;} 100%{right:5%; opacity:1;} } /*********************/ /*無使用期限！一次購買終生享用*/ #B_DEMO .demo5 .pc3 { position:absolute; top:50%; right:5%; } #B_DEMO .demo5 .pc3.hover { animation:B_E_3 3s ease-out; } @keyframes B_E_3 { 0%{right:-500%;} 50%{right:-500%; opacity:1;} 100%{right:5%; opacity:1;} } /*********************/ /*特惠價 10000 元(台幣)*/ #B_DEMO .demo5 .pc4 { position:absolute; top:65%; right:5%; } #B_DEMO .demo5 .pc4.hover { animation:B_E_4 4s ease-out; } @keyframes B_E_4 { 0%{right:-500%;} 50%{right:-500%; opacity:1;} 100%{right:5%; opacity:1;} } /*********************/ /*另有「雲端版」，請來電洽詢*/ #B_DEMO .demo5 .pc5 { position:absolute; top:80%; right:5%; transform:scale(1); } #B_DEMO .demo5 .pc5.hover { animation:B_E_5 5.2s ease-out; } @keyframes B_E_5 { 0%{right:30%; transform:scale(0);} 90%{right:30%; transform:scale(0);} 100%{transform:scale(1);} } /*********************/