照片墙css3_CSS3_css_其他_其他下载-pudn.com

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="generator" content="pdf2htmlEX"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="https://static.pudn.com/base/css/base.min.css"> <link rel="stylesheet" href="https://static.pudn.com/base/css/fancy.min.css"> <link rel="stylesheet" href="https://static.pudn.com/prod/directory_preview_static/62787757d7996104df6a1eb6/raw.css"> <script src="https://static.pudn.com/base/js/compatibility.min.js"></script> <script src="https://static.pudn.com/base/js/pdf2htmlEX.min.js"></script> <script> try{ pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({}); }catch(e){} </script> <title></title> </head> <body> <div id="sidebar" style="display: none"> <div id="outline"> </div> </div> <div id="pf1" class="pf w0 h0" data-page-no="1"><div class="pc pc1 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/62787757d7996104df6a1eb6/bg1.jpg"><div class="c x0 y1 w2 h2"><div class="t m0 x1 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0">CSS3<span class="_ _0"> </span>照片墙制作<span class="_ _0"> </span><span class="ff2 sc1">--<span class="_ _0"> </span></span>课程安排</div><div class="t m0 x2 h4 y3 ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 y4 ff1 fs1 fc1 sc2 ls0 ws0">课程简介</div><div class="t m0 x2 h4 y5 ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 y6 ff1 fs1 fc1 sc2 ls0 ws0">熟悉特效的具<span class="_ _1"></span>体过程</div><div class="t m0 x2 h4 y7 ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 y8 ff1 fs1 fc1 sc2 ls0 ws0">分析照片墙的<span class="_ _1"></span>制作逻辑</div><div class="t m0 x2 h4 y9 ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 ya ff1 fs1 fc1 sc2 ls0 ws0">重点知识预览</div><div class="t m0 x2 h4 yb ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 yc ff1 fs1 fc1 sc2 ls0 ws0">原理分析</div><div class="t m0 x2 h4 yd ff3 fs1 fc1 sc1 ls0 ws0">•</div><div class="t m0 x3 h5 ye ff1 fs1 fc1 sc2 ls0 ws0">课程总结</div></div></div><div class="pi" data-data='{"ctm":[1.333333,0.000000,0.000000,1.333333,0.000000,0.000000]}'></div></div> </body> </html>

<div id="pf2" class="pf w0 h0" data-page-no="2"><div class="pc pc2 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/62787757d7996104df6a1eb6/bg2.jpg"><div class="c x0 y1 w2 h2"><div class="t m0 x4 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0">课程简介</div><div class="t m0 x3 h6 yf ff1 fs2 fc1 sc2 ls0 ws0">本课程主要给大家介绍几个<span class="_ _2"> </span>css3<span class="_ _2"> </span>比较绚丽和实用的动画属性，其中包括旋转</div><div class="t m0 x3 h6 y10 ff1 fs2 fc1 sc2 ls0 ws0">、缩放等。课程实现的照片墙特效内容为：照片随意的摆放在页面的不同位</div><div class="t m0 x3 h6 y11 ff1 fs2 fc1 sc2 ls0 ws0">置，并且都有不同角度的倾斜和相互遮挡，当鼠标移动到某一张照片上时，</div><div class="t m0 x3 h6 y12 ff1 fs2 fc1 sc2 ls0 ws0">此照片缓慢的由倾斜状态转变为端正状态，并且放大一定比例显示在最上面</div><div class="t m0 x3 h6 y13 ff1 fs2 fc1 sc2 ls0 ws0">，鼠标移走后，又恢复为原状态。此特效不使用任何<span class="_ _2"> </span>javascript<span class="_ _2"> </span>，而是用纯<span class="_ _2"> </span>c</div><div class="t m0 x3 h6 y14 ff1 fs2 fc1 sc2 ls0 ws0">ss<span class="_ _2"> </span>实现。此课程属于<span class="_ _2"> </span>css3<span class="_ _2"> </span>初级。</div></div></div><div class="pi" data-data='{"ctm":[1.333333,0.000000,0.000000,1.333333,0.000000,0.000000]}'></div></div>