制作在线简历(二)——基本信息
2023-02-18 16:47:25 时间
一、头像
1、先在顶部来个头像,头像再做几个动画特效,就是鼠标移上去的时候边框转180°,需要注意的是图片不能随着边框也转动
所以得把图片和边框放在两个标签中,两个标签都用绝对定位来控制位置,我以前也做过一些动画的记录,可以在《CSS3中的动画效果记录》查看到。
<header>
<img src="img/avatar.jpg" />
<a href="javascript:void(0)"></a>
</header>
a标签和img标签的宽度和高度是一样的,这是为了在圆形边框中包住头像,transition就是用来做动画,边框颜色有两种,左边和上边是橙色,右边和下边是棕色的。:first-child是一个选择器。以前对选择器做些过记录,可以在《CSS选择器的一些记录》查看到。
.menu_container section:first-child > header{
margin: 10px auto;
width: 200px;
height: 200px;
position: relative;
}
.menu_container section:first-child > header a{
position: absolute;
z-index: 1;
display: block;
border: 10px solid #072256;
border-left-color:#E07514;
border-top-color:#E07514;
border-radius: 50%;
width: 180px;
height: 180px;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
-moz-transition:all .5s ease-in;
-o-transition:all .5s ease-in;
}
.menu_container section:first-child > header a:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu_container section:first-child > header img{
width: 180px;
height: 180px;
border-radius: 50%;
display: block;
position: absolute;
top:10px;
left: 10px;
}
我还做了个响应式的CSS,用来控制a标签、img标签和header标签的宽度高度。
@media screen and (max-width: 680px) {
.menu_container section:first-child > header{
width: 100px;
height: 100px;
}
.menu_container section:first-child > header a{
border-width: 5px;
width: 90px;
height: 90px;
}
.menu_container section:first-child > header img{
width: 90px;
height: 90px;
top:5px;
left: 5px;
}
}
二、表格信息
1、做个列表信息,这里面用到了个选择器。一开始是用table实现的,但是发现用table做响应式的话有点困难,后面就用flex布局了。在媒体查询的时候再变成block布局。
.user_info{ width:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; padding-top:10px; overflow:hidden; } @media screen and (max-width: 680px) { .user_info{ display:block; font-size:1.6rem; } }
2、接下来要做一个动画,就是移到懒羊羊这里做个效果。如下图所示:
<a href="javascript:void(0)"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> 懒羊羊 </a>
原理就是用span做四根白线,要绝对定位的,a标签设置为相对定位,在加点动画上去就行了,麻烦的地方就是四根白线的位置定位。
.user_info > span > a .line{ position:absolute; -moz-transition:all .4s ease; -o-transition:all .4s ease; -webkit-transition:all .4s ease; transition:all .4s ease; } .user_info > span > a:hover .line{ background:#fff; } .user_info > span > a .line-top{ width:0px; height:1px; left:-110%; top:-2px; } .user_info > span > a:hover .line-top{ width:100%; left:-2px; padding-left:3px; } .user_info > span > a .line-right{ width:1px; height:0px; right:-2px; top:-110%; } .user_info > span > a:hover .line-right{ height:100%; top:-2px; } .user_info > span > a .line-bottom{ width:1px; height:0px; left:-2px; bottom:-110%; } .user_info > span > a:hover .line-bottom{ height:100%; bottom:1px; } .user_info > span > a .line-left{ width:0px; height:1px; right:-110%; bottom:-2px; } .user_info > span > a:hover .line-left{ width:100%; right:-2px; bottom:1px; padding-right:3px; }
源码下载:
相关文章
- 云图说|“真人?机器?傻傻分不清!” WAF Bot管理,带你慧眼辨“精”!
- 7个获取访问者真实IP的方法,速学!!!
- 如何消灭飞机的“黑色十分钟”,AI来帮忙
- 干货分享丨玩转物联网IoTDA服务系列四-智能网关
- 眼见为实,华为鲲鹏架构服务器生态大揭秘
- 云上自动化 vs 云上编排
- 干货分享丨玩转物联网IoTDA服务系列五-智能家居煤气检测联动
- 【DevCloud·敏捷智库】如何利用故事点做估算
- Presto性能调优的五大技巧
- Kubernetes的拐点助推器:左手开源,右手边缘计算
- 挑战10的1,143,913次方种算法组合:这都不是事儿!
- 【小白学YOLO】YOLOv3网络结构细致解析
- 数据湖应用解析:Spark on Elasticsearch一致性问题
- 【小白学YOLO】一文带你学YOLOv1 Testing
- 【API进阶之路】因为不会创建云服务器,我被实习生摆了一道
- 实操案例:字符串哈希表操作
- k8s极简史:K8s多集群技术发展的历史、现状与未来
- 高价值干货:这可能是你见过最全的网络爬虫总结
- 【DevCloud·敏捷智库】如何利用用户故事了解需求
- 项目管理:如何显性管理并提升Story分解能力