css3照片墙_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

css3照片墙_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

一张张照片散乱的撒在一起，鼠标悬浮时旋转放大并摆正，效果如下图（所有图片均来自网络），主要使用到的css3属性有：transition、transform（scale、rotateZ）、box-shadow以及z-index。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            *{margin:0;padding:0;}            html,body{background:#eee;}                        /*设置场景居中*/            .wall{width:1000px;height:700px;position:fixed;top:50%;margin-top:-350px;left:50%;margin-left:-500px;}                        /*设置图片绝对定位，方便设置放置的位置，并设置所有属性的过渡时间为0.2s*/            img{position:absolute;display:block;max-width:300px;max-height:300px;padding:10px 10px 20px;background:#fff;border:1px solid #ddd;-webkit-transition:0.2s;}                        /*鼠标悬浮时设置大小放大到1.2倍，并摆正，即Z轴方向的旋转角度为0*/            img:hover{-webkit-transform:scale(1.2) rotateZ(0);box-shadow:10px 10px 5px #555;z-index:2;}                        /*设置每个照片的位置和旋转角度*/            .img1{left:0;top:0;-webkit-transform:rotateZ(20deg);}            .img2{left:280px;top:0;-webkit-transform:rotateZ(5deg);}            .img3{left:470px;top:0;-webkit-transform:rotateZ(-10deg);}            .img4{left:720px;top:0;-webkit-transform:rotateZ(25deg);}            .img5{left:220px;top:200px;-webkit-transform:rotateZ(-2deg);}            .img6{left:830px;top:240px;-webkit-transform:rotateZ(-15deg);}            .img7{left:490px;top:190px;-webkit-transform:rotateZ(5deg);}            .img8{left:80px;top:430px;-webkit-transform:rotateZ(-5deg);}            .img9{left:290px;top:450px;-webkit-transform:rotateZ(5deg);}            .img10{left:510px;top:380px;-webkit-transform:rotateZ(-10deg);}            .img11{left:760px;top:500px;-webkit-transform:rotateZ(10deg);}            .img12{left:-100px;top:250px;-webkit-transform:rotateZ(-5deg);}        </style>    </head>    <body>        <div class="wall">            <img class="img1 lazy"  src="/static/imghwm/default1.png"  data-src="http://mp1.zhuqu.com/static/images/thb3/611/29/29a5296418b9f689968b22d3a9ebba07.jpg"  alt=""/>            <img class="img2 lazy"  src="/static/imghwm/default1.png"  data-src="http://h.hiphotos.baidu.com/image/pic/item/63d9f2d3572c11df1e33e52a612762d0f603c2dd.jpg"  alt=""/>            <img class="img3 lazy"  src="/static/imghwm/default1.png"  data-src="http://h.hiphotos.baidu.com/image/pic/item/4d086e061d950a7bdd523bb808d162d9f2d3c963.jpg"  alt=""/>            <img class="img4 lazy"  src="/static/imghwm/default1.png"  data-src="http://f.hiphotos.baidu.com/image/pic/item/c9fcc3cec3fdfc031f73ebc4d63f8794a4c22646.jpg"  alt=""/>            <img class="img5 lazy"  src="/static/imghwm/default1.png"  data-src="http://e.hiphotos.baidu.com/image/pic/item/902397dda144ad348d0a25fbd2a20cf431ad8511.jpg"  alt=""/>            <img class="img6 lazy"  src="/static/imghwm/default1.png"  data-src="http://a.hiphotos.baidu.com/image/pic/item/b03533fa828ba61ed8c6c2534334970a304e59a5.jpg"  alt=""/>            <img class="img7 lazy"  src="/static/imghwm/default1.png"  data-src="http://h.hiphotos.baidu.com/image/pic/item/d4628535e5dde711d794368aa5efce1b9d166103.jpg"  alt=""/>            <img class="img8 lazy"  src="/static/imghwm/default1.png"  data-src="http://h.hiphotos.baidu.com/image/pic/item/9213b07eca8065382b38ae6f95dda144ac3482ff.jpg"  alt=""/>            <img class="img9 lazy"  src="/static/imghwm/default1.png"  data-src="http://d.hiphotos.baidu.com/image/pic/item/bd315c6034a85edfd6938b5f4b540923dd5475aa.jpg"  alt=""/>            <img class="img10 lazy"  src="/static/imghwm/default1.png"  data-src="http://e.hiphotos.baidu.com/image/pic/item/c995d143ad4bd113df57bd4e58afa40f4bfb0537.jpg"  alt=""/>            <img class="img11 lazy"  src="/static/imghwm/default1.png"  data-src="http://e.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5c98ab2fd53da81cb38db3dd9.jpg"  alt=""/>            <img class="img12 lazy"  src="/static/imghwm/default1.png"  data-src="http://c.hiphotos.baidu.com/image/pic/item/37d12f2eb9389b500dd0952e8735e5dde7116e9a.jpg"  alt=""/>        </div>    </body></html>

本例子只兼容了webkit内核的浏览器，若要兼容其他内核的浏览器需要添加其他前缀（-moz-、-o-等）。

另外，本例子中使用的 rotateZ 属性的值的正负方向常使人发生混乱，在3D场景中，X轴正方向为水平向右，Y轴正方向为垂直向下，Z轴的正方向为垂直于屏幕向外，确定正方向之后只需要记住如下规则即可：从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.