写真wall_html/css_WEB-ITnoseのレイアウトとアニメーション効果をCSS3で実現-htmlチュートリアル-php.cn

写真wall_html/css_WEB-ITnoseのレイアウトとアニメーション効果をCSS3で実現

WBOY

リリース： 2016-06-24 11:37:04

オリジナル

1495 人が閲覧しました

目標: 写真の壁のレイアウトと、マウスが写真上を通過したときのアニメーション効果を実現する

関係する知識ポイント: CSS3 アニメーション、トランジション、変形 (ズーム)、絶対配置と相対配置

疑問点: 絶対配置ページ上の相対位置と要素の表示レベルの影響

オタクアカデミーエバンジェリストiwenのコースを参照

ソースコード??

html部分:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link type="text/css" href="picwall.css" rel="stylesheet"></head><body>    <div class="con">        <img class="pic pic25" src="img/25.jpg">        <img class="pic pic26" src="img/26.jpg">        <img class="pic pic27" src="img/27.jpg">        <img class="pic pic28" src="img/28.jpg">        <img class="pic pic29" src="img/29.jpg">        <img class="pic pic30" src="img/30.jpg">        <img class="pic pic31" src="img/31.jpg">        <img class="pic pic32" src="img/32.jpg">        <img class="pic pic33" src="img/33.jpg">        <img class="pic pic34" src="img/34.jpg">        <img class="pic pic35" src="img/35.jpg">        <img class="pic pic36" src="img/36.jpg">    </div></body></html>CSS部分(picwall.css)：

ログイン後にコピー

*{    margin: 0px;}body{    background-color: gainsboro;}.con{    width: 960px;    height: 450px;    margin: 50px auto;    /*position: relative;*/}.pic{    width: 130px;    padding: 10px;    /*position: relative;*/}.con img{    /*padding:10px 10px 15px ;*/    /*border: 1px solid #aaaaaa;*/    /*box-shadow: 2px 2px 2px rgba(60,60,60,0.5);*/    /*position: absolute;*/    z-index: 1;    transition: all 0.6s ease-in;}.con img:hover{    z-index: 2;/*实现鼠标经过时图片置于顶层，但这要求img里使用绝对定位                相应的每个图片的位置也要重新修改*/    transform: rotate(0deg) scale(1.2);}.pic25{    left: 10px;    top: 0px;    transform: rotate(-6deg);    -webkit-transform: rotate(-6deg);/*chrome浏览器适配*/}.pic26{    left: -2px;    top: 10px;    transform: rotate(0deg);    /*此处应该加上浏览器适配，默认使用chrome浏览器测试，后面同样*/}.pic27{    left: 2px;    top: 0px;    transform: rotate(-16deg);}.pic28{    left: -2px;    top: 0px;    transform: rotate(-6deg);}.pic29{    left: 10px;    top: 20px;    transform: rotate(20deg);}.pic30{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic31{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic32{    left: 10px;    bottom: -7px;    transform: rotate(16deg);}.pic33{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic34{    left: 3px;    top: 10px;    transform: rotate(3deg);}.pic35{    left: 10px;    top: 0px;    transform: rotate(-16deg);}.pic36{    left: 20px;    top: 0px;    transform: rotate(10deg);}

ログイン後にコピー