重难点分析

重点

• 图片的组织
• 转换与过渡属性
• 鼠标悬停实现

难点

• 转换与过渡属性
• 鼠标悬停实现

案例分析

案例效果 完成版

单页式网页，适合小型企业、个人主页、产品主页等类网站。

滚动效果、滚动检测、固定菜单等效果依赖于JS。

原理解析

• 利用figure作容器组织图片和标题
• 利用hover伪类实现鼠标悬停效果
• 利用transform和transition配合使用完成交互效果
• figcaption做容器实现项目信息

重点解读-组织图片和标题

• figure为块状元素，作容器可以避免“空格”问题
• figcaption做容器实现项目信息

<figure>
    <img src="图片地址">
    <figcaption>标题信息</figcaption>
</figure>

重点解读-hover伪类实现悬停效果

鼠标悬停实现步骤

1. 谁是“开关”，hover谁
2. 谁是“电灯”，谁在做变化
3. 寻找“开关”和“电灯”之间的联系，选择器（保持hover前后选择器的统一）

重点解读-transform和transition

transform 变换

/*设置元素如何变换*/
figure:hover img{
    transform: scale(1.2) rotate(3deg);
}

transition 过渡

/*设置元素的过渡方式*/
    transition: transform .5s ease-out 1s;

关键步骤

HTML架构

<!--简要版项目标题说明-->
<section id="project" class="project">
    <div class="container clearfix">
        <h2>成功案例</h2>
        <p>截止目前，我们先后主导开发了各类各式项目2345个，本栏目展示其中代表性的成功案例，看<a href="#">更多</a>。</p>
        <div class="content">
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
            <figure>
                <img src="img/work.jpg" alt="" />
                <figcaption>
                    一些说明
                </figcaption>
            </figure>
        </div>
    </div>
</section>

关键步骤

HTML架构

<!--项目标题部分详细实现-->
<figure>
    <img src="img/work.jpg" alt="" />
    <figcaption>
        <div class="time">
            <div class="month">5月</div>
            <div class="year">2017</div>
        </div>
        <h3>XX公司识别系统</h3>
        <p>XX公司识别系统介绍XX公司识别系统介绍XX公司识别系统介绍XX公司识别系统介绍XX公司识别系统介绍</p>
        <div class="data">
            <span class="view"><i class="fa fa-eye"></i>2907</span>
            <span class="star"><i class="fa fa-heart"></i>364</span>
            <span class="comment"><i class="fa fa-comment"></i>98</span>
        </div>
    </figcaption>
</figure>

关键步骤

代码呈现

*
 * 项目模块
 * */
.project{

}
.project figure{
    float: left;
    overflow: hidden;
    width: 24%;
    margin: 10px calc(4% / 3) 10px 0px;
    position: relative;
    cursor: pointer;
}
.project figure:nth-child(4n){
    margin-right: 0px;
}
.project figure img{
    width: 100%;
    height: auto;
    transform: scale(1) rotate(0deg);
    transition: transform .5s;
    vertical-align: top;
}
.project figure:hover img{
    transform: scale(1.2) rotate(3deg);
}
.project figure figcaption{
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    bottom: 5%;
    background-color: rgba(255,255,255,.8);
    padding: 10px;
}
.project figure figcaption .time{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color:#339BEB;
    font-size: 0.8em;
    text-align: center;
}
.project figure figcaption .time .month{
    background-color: rgba(0, 0, 0, 0.1);
}
.project figure figcaption h3{
    margin: 5px 0px 0px 70px;
}
.project figure figcaption p{
    font-size: 0.8em;
    line-height: 1.5;
}
.project figure figcaption .data{
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 0.8em;
    width: 100%;
    height: 24px;
    line-height: 24px;
    background-color: rgba(0,0,0,.2);
    text-align: right;
}
.project figure figcaption .data *{
    padding: 0px 2px;
}

核心知识点总结

• “浮动”与“display:inline-block”的选择
• calc的使用
• 水平垂直居中方式的选择