设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 妹子求助！！！css3代码
发新帖
返回列表
0 287
电梯直达  跳转到指定楼层

[提问] 妹子求助！！！css3代码

二二二二二二二丫|新手上路 |勤币 106 |学币 0
发表于 2017-2-6 23:19 | 复制链接 | 打印 | 上一主题 | 下一主题
html+css网页前端课程 - 5.4.CSS3的transition属性及应用
<style>
*{ margin:0; padding:0;}
body{ font-family:"方正清刻本悦宋简体"}
.out{ width:1040px; height:260px; margin:100px auto;}
.box{ width:240px; height:240px; position:relative; overflow:hidden; margin:10px 10px; float:left;}
.box .ceng{ width:240px; height:240px; background:rgba(251,1,5,0.8); position:absolute; top:240px;left:0; text-align:center; transition:0.3s;}
.box .ceng h2{ color:#fff; font-size:24px; font-weight:bold; padding:50px 0 10px;}
.box .ceng p{ padding:15px 10px; font-size:16px; margin-bottom:10px;}
.box .ceng .btn a{ font-size:14px; color:#fff; text-decoration:none;}
.box .ceng .btn{ width:110px; height:30px; margin:0 auto; line-height:30px; position:relative;}
.box .ceng .btn span{ display:block; position:absolute;transition:0.3s; opacity:0;}
.box .ceng .btn .top{ width:110px; height:2px; background:#fff; top:0; left:-110px;}
.box .ceng .btn .left{ width:2px; height:30px; background:#fff; left:0; top:-30px;}
.box .ceng .btn .right{ width:2px; height:30px; background:#fff; top:30px; left:110px;}
.box .ceng .btn .bottom{ width:110px; height:2px; background:#fff; top:30px; left:110px;}

.box:hover .ceng{ top:0;}
.btn:hover span{ opacity:1;}
.btn:hover .top{ left:0px;}
.btn:hover .left{ top:0px;}
.btn:hover .right{ top:0px;}
.btn:hover .bottom{ left:0px;}
</style>
</head>

<body>
<div class="out">
        <div class="box">
    <img src="image/17-01-27-19-00-42-222_photo.png"/>
        <div class="ceng">
            <h2>自拍一</h2>
            <p>北方小年那天，窗外鞭炮声声。</p>
            <div class="btn" >

                <span class="top"></span>
                <span class="left"></span>
                <span class="right"></span>
                <span class="bottom"></span>
                <a href="#">了解更多></a>
            </div>
        </div>
    </div>
后面有类似的三个box，不知道为什么，没有效果，鼠标放在了解更多上如图

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共0个回复 最后回复于 2017-2-6 23:19

发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表