5组CSS3图片3D效果.zip_3d图css写_5图片3D_css3写出3d_css代码

共9个文件

jpg：3个

png：2个

js：2个

版权申诉

css代码

196 浏览量 2022-09-22 14:30:45 上传评论收藏 493KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

5组CSS3图片3D效果.zip （9个子文件）

5组CSS3图片3D效果

css

img

burst.png 159KB

noise.png 116KB

style.css 12KB

index.html 8KB

jquery.min.js 77KB

flux.js 45KB

imgs

koi.jpg 86KB

life.jpg 38KB

peacock.jpg 74KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>5款不同的图片3D切换特效 - 站长素材</title>  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <link href='http://fonts.googleapis.com/css?family=Antic+Slab' rel='stylesheet' type='text/css' />  <style type="text/css"> #slider{background:url("css/img/noise.png"), rgba(255, 255, 255, 0.4);padding:30px;} ul.transitions{margin:40px -10px;padding:0;overflow:auto;} ul.transitions li{list-style:none;width:20%;float:left;padding:0 10px 1em;} ul.transitions li button{ font-family:'Antic Slab', arial, sans-serif; display:block; width:100%; padding:1em; text-align:center; font-size:1.2em; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 4px rgba(0, 0, 0, 0.2); -o-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 4px rgba(0, 0, 0, 0.2); box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 4px rgba(0, 0, 0, 0.2); border:1px solid rgba(0, 0, 0, 0.3); background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #666666)); background:-webkit-linear-gradient(#999999, #666666); background:-moz-linear-gradient(#999999, #666666); background:-o-linear-gradient(#999999, #666666); background:-ms-linear-gradient(#999999, #666666); background:linear-gradient(#999999, #666666); color:#fff; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.8); } ul.transitions li button[data-transition="explode"]{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #793c82), color-stop(100%, #592c5f)); background:-webkit-linear-gradient(#793c82, #592c5f); background:-moz-linear-gradient(#793c82, #592c5f); background:-o-linear-gradient(#793c82, #592c5f); background:-ms-linear-gradient(#793c82, #592c5f); background:linear-gradient(#793c82, #592c5f); } ul.transitions li button[data-transition="explode"]:active{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #592c5f), color-stop(100%, #381c3c)); background:-webkit-linear-gradient(#592c5f, #381c3c); background:-moz-linear-gradient(#592c5f, #381c3c); background:-o-linear-gradient(#592c5f, #381c3c); background:-ms-linear-gradient(#592c5f, #381c3c); background:linear-gradient(#592c5f, #381c3c); } ul.transitions li button[data-transition="cube"]{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ad6dd), color-stop(100%, #1db1b7)); background:-webkit-linear-gradient(#2ad6dd, #1db1b7); background:-moz-linear-gradient(#2ad6dd, #1db1b7); background:-o-linear-gradient(#2ad6dd, #1db1b7); background:-ms-linear-gradient(#2ad6dd, #1db1b7); background:linear-gradient(#2ad6dd, #1db1b7); } ul.transitions li button[data-transition="cube"]:active{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1db1b7), color-stop(100%, #16868b)); background:-webkit-linear-gradient(#1db1b7, #16868b); background:-moz-linear-gradient(#1db1b7, #16868b); background:-o-linear-gradient(#1db1b7, #16868b); background:-ms-linear-gradient(#1db1b7, #16868b); background:linear-gradient(#1db1b7, #16868b); } ul.transitions li button[data-transition="turn"]{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa602a), color-stop(100%, #eb4106)); background:-webkit-linear-gradient(#fa602a, #eb4106); background:-moz-linear-gradient(#fa602a, #eb4106); background:-o-linear-gradient(#fa602a, #eb4106); background:-ms-linear-gradient(#fa602a, #eb4106); background:linear-gradient(#fa602a, #eb4106); } ul.transitions li button[data-transition="turn"]:active{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb4106), color-stop(100%, #ba3304)); background:-webkit-linear-gradient(#eb4106, #ba3304); background:-moz-linear-gradient(#eb4106, #ba3304); background:-o-linear-gradient(#eb4106, #ba3304); background:-ms-linear-gradient(#eb4106, #ba3304); background:linear-gradient(#eb4106, #ba3304); } ul.transitions li button[data-transition="tiles3d"]{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fb1628), color-stop(100%, #da0415)); background:-webkit-linear-gradient(#fb1628, #da0415); background:-moz-linear-gradient(#fb1628, #da0415); background:-o-linear-gradient(#fb1628, #da0415); background:-ms-linear-gradient(#fb1628, #da0415); background:linear-gradient(#fb1628, #da0415); } ul.transitions li button[data-transition="tiles3d"]:active{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #da0415), color-stop(100%, #a80310)); background:-webkit-linear-gradient(#da0415, #a80310); background:-moz-linear-gradient(#da0415, #a80310); background:-o-linear-gradient(#da0415, #a80310); background:-ms-linear-gradient(#da0415, #a80310); background:linear-gradient(#da0415, #a80310); } ul.transitions li button[data-transition="bars3d"]{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #82d444), color-stop(100%, #69ba2b)); background:-webkit-linear-gradient(#82d444, #69ba2b); background:-moz-linear-gradient(#82d444, #69ba2b); background:-o-linear-gradient(#82d444, #69ba2b); background:-ms-linear-gradient(#82d444, #69ba2b); background:linear-gradient(#82d444, #69ba2b); } ul.transitions li button[data-transition="bars3d"]:active{ background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #69ba2b), color-stop(100%, #519121)); background:-webkit-linear-gradient(#69ba2b, #519121); background:-moz-linear-gradient(#69ba2b, #519121); background:-o-linear-gradient(#69ba2b, #519121); background:-ms-linear-gradient(#69ba2b, #519121); background:linear-gradient(#69ba2b, #519121); } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/flux.js"></script> <script type="text/javascript"> $(function(){ if(!flux.browser.supportsTransitions) alert("Flux Slider requires a browser that supports CSS3 transitions"); window.f = new flux.slider('#slider', { pagination: false, controls: false, transitions: ['explode', 'tiles3d', 'bars3d', 'cube', 'turn'], autoplay: false }); $('.transitions').click(function(event){ event.preventDefault(); window.f.next($(event.target).data('transition'), $(event.target).data('params')); }); }); </script> </head> <body> <section class="container"> <div id="slider"> <img src="imgs/peacock.jpg" alt="" /> <img src="imgs/koi.jpg" alt="" /> <img src="imgs/life.jpg" alt="" /> </div> <ul class="transitions"> <li><button type="button" data-transition="explode" data-params='{"rows": 4}'>Explode</button></li> <li><button type="button" data-transition="tiles3d" data-params='{"columns": 6}'>Tile</button></li> <li><button type="button" data-transition="bars3d">Bars</button></li> <li><button type="button" data-transition="cube">Cube</button></li> <li><button type="button" data-transition="turn">Turn</button></li> </ul> </section> <div style="text-align:center;clear:both"> <p>适用浏览器：FireFox. 不支持IE8、360、Chrome、Safari、Opera、傲游、搜狗、世界之窗、世界之窗。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉