前端开发 CSS3翻转海报效果

前端开发动态效果图网站|网站前端开发的需求分析|web前端开发网站模板下载

html 代码

<div class=”qcontainer”>
    <div class=”film”>
        <div class=”hold”></div>
    </div>
    <div class=”back”>
        <div class=”face”>
            <ul>
                <li>演出时间: 2016.08.26 – 2016.08.28</li>
                <li>演出场馆: 国家体育场—鸟巢</li>
                <li>演出时长: 以演出现场为准</li>
                <li>入场时间: 以场馆规定为准</li>
                <li>艺人团体: 五月天</li>
            </ul>
            <ul>
                <li>注意事项:</li>
                <li>a)演出详情仅供参考,具体信息以现场为准;</li>
                <li>b)1.2米以下儿童谢绝入场,1.2米以上儿童需持票入场;</li>
                <li>c)演出票品具有唯一性、时效性等特殊属性,如非活动变更、活动取消、票品错误的原因外,不提供退换票品服务,购票时请务必仔细核对并审慎下单。</li>
            </ul>
            <div></div>
        </div>
    </div>
</div>

css 代码

/*翻转样式代码*/
.qcontainer {
    margin: 10px auto;
    width: 500px;
    height: 752px;
    position: relative;
    font-family: ‘微软雅黑’;
    font-size: 13px;
}
.film {
    width: 100%;
    height: 100%;
    transition: 1s;
    position: absolute;
    border: 1px solid #000;
    background: url(‘bg.jpg’) no-repeat center top;
}
.film .hold {
    opacity: 1;
    transition: 0s 0.3s;
}
.qcontainer:hover .film {
    transform: rotateY(180deg);
}
.qcontainer:hover .film .hold {
    opacity: 0;
}
.back {
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    position: absolute;
    transition: 1s;
    color: #fff;
}
.back .face {
    opacity: 0;
    transition: 0s 0.3s;
    background-color: #000;
    height: 100%;
    position: relative;
}
.back .face ul {
    margin: 0;
    padding: 20px;
    list-style: none;
}
.back .face ul:first-child {
    font-size: 20px;
    padding-top: 100px;
    transition: color 1s;
    font-family: ‘华文行楷’;
}
.back .face ul:first-child:hover {
    color: yellow;
}
.back .face ul li {
    line-height: 30px;
}
.back .face div {
    width: 100%;
    height: 281px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(‘face.jpg’) no-repeat center top;
}
.qcontainer:hover .back {
    transform: rotateY(0deg);
}
.qcontainer:hover .back .face {
    opacity: 1;
}

web前端是网站开发么|网站前端程序制作开发|前端开发动态效果图网站

» 本文来自:前端开发者 » 《前端开发 CSS3翻转海报效果》
» 本文链接地址:https://www.rokub.com/4978.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!