效果图

鼠标移动到名片前

鼠标移动到名片后

小名片代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<style>
.card{width:250px;height:400px;background-color:#f7f5ec;margin:100px auto;overflow:hidden;position:relative;
}
.card:hover{box-shadow:0 0 0 2px #ee0000;
}
.header{width:130px;height:130px;background-color:#eb3f2f;border-radius:50%;margin:20px auto;position:absolute;left:0;right:0;
}
.header:before{content:"";width:100%;height:0;background-color:#eb3f2f;position:absolute;transform:scale(3);border-radius:50%;bottom:150px;opacity:0.4;transition:all 0.3s;
}
.card:hover .header:before{height:100%;
}
.header img{width:130px;height:130px;border-radius:50%;transition:0.3s;
}
.card:hover .header img{transform:scale(0.7);box-shadow:0 0 0 14px #fcf5ec;
}
.about{position:absolute;top:210px;text-align:center;width:100%;
}
.about .title{font-size:25px;
}
.about .post{display:block;
}
.card:hover .about{color:#eb3f2f;
}
.contact{width:100%;height:30px;background-color:#ee0000;position:absolute;bottom:-30px;text-align:center;transition:all 0.3s;
}
.contact li{display:inline-block
}
.contact li a{color:#fff;padding:7px
}
.contact li a:hover{color:#ee0000;background-color:#fff;
}
.card:hover .contact{bottom:0;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<img src="img/1.jpg"></div>
<div class="about">
<span class="title">小刚</span>
<span class="post">你好啊</span></div>
<div class="contact">
<li><a href=“##” class="fa fa-qq"></a></li>
<li><a href=“##” class="fa fa-weixin"></a></li>
<li><a href=“##” class="fa fa-weibo"></a></li>
<li><a href=“##” class="fa fa-steam"></a></li></div>
</div>
</body>
</html>

html+css小名片代码相关推荐

点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
简单小程序代码_小程序该如何运营
小型程序升级有三种最重要的方法: 1.借助微信附近小程序功能实现客户扩展大家可能都知道,微信平台具有附近小程序的功能.此功能使用户可以查看周围五公里范围内的所有小程序. 正是由于这个原因,一旦商人完 ...
css左右布局代码_如何使用CSS位置来布局网站（带有示例代码）
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
c语言小游戏代码矿井逃生_如何选择编程语言和逃生教程炼狱
c语言小游戏代码矿井逃生 A few weeks ago, I posted about my experience attempting to learn JavaScript, C#, Pytho ...
Bootstrap【第二章】全局CSS之排版代码表格
前言:今天要学习的是Bootstrap的全局CSS之排版&代码&表格一张图概括今天的内容: 一.排版 1.1.页面主题 1.段落突出:通过.lead类可以让段落突 ...
CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
html数字拼图游戏,JavaScript_JS写的数字拼图小游戏代码[学习参考]，复制代码代码如下:html - phpStudy...
JS写的数字拼图小游戏代码[学习参考] 复制代码代码如下: 拼图 td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100 ...

html+css小名片代码

HTML+css小名片效果

效果图

小名片代码

html+css小名片代码相关推荐

最新文章

热门文章