设为首页
收藏本站
开启辅助访问
请
登录
后使用快捷导航
没有帐号?
立即注册
首页
课程设置
平面设计
室内设计
机械设计
园林景观设计
影视后期制作
论坛
老师加盟
登录
|
注册
搜索
搜索
本版
帖子
用户
快捷导航
室内设计学院
论坛
BBS
论坛
›
学院
›
平面设计学院
›
妹子求助!!!css3代码
返回列表
二二二二二二二丫
2
主题
3
帖子
13
积分
新手上路
新手上路, 积分 13, 距离下一级还需 37 积分
新手上路, 积分 13, 距离下一级还需 37 积分
积分
13
加为好友
发送消息
访问家园
0
286
电梯直达
[提问]
妹子求助!!!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
点赞
26
哪些同学觉得很赞!
lori棒棒糖
觉得很赞
昵昵妹
觉得很赞
潜意式
觉得很赞
龙猫1212
觉得很赞
大大大表哥
觉得很赞
依仔101
觉得很赞
西卡
觉得很赞
一品数码
觉得很赞
热爱生活热爱家
觉得很赞
我叫大帅比
觉得很赞
举报
使用道具
|
回复
共0个回复 最后回复于 2017-2-6 23:19
返回列表
B
Color
Image
Link
Quote
Code
Smilies
高级模式
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表