利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息。
这次就利用CSS实现这样一个功能:
div处主要包括两部分,一部分是图片;另一部分是链接以及脸框
<div class="remote">
<img src="war.jpg" width="900" height="600" alt="I love warcraft"/>
<ul>
<li class="卡加斯"><a href="" title="卡加斯"><span class="hotspot"></span><span class="link">卡加斯</span></a></li>
<li class="黑手"><a href="" title="黑手"><span class="hotspot"></span><span class="link">黑手</span></a></li>
<li class="基尔罗格"><a href="" title="基尔罗格"><span class="hotspot"></span><span class="link">基尔罗格</span></a></li>
<li class="耐奥祖"><a href="" title="耐奥祖"><span class="hotspot"></span><span class="link">耐奥祖</span></a></li>
<li class="古尔丹"><a href="" title="古尔丹"><span class="hotspot"></span><span class="link">古尔丹</span></a></li>
<li class="格罗玛什"><a href="" title="格罗玛什"><span class="hotspot"></span><span class="link">格罗玛什</span></a></li>
<li class="杜隆坦"><a href="" title="杜隆坦"><span class="hotspot"></span><span class="link">杜隆坦</span></a></li>
</ul>
</div>
大致的方法就是手动把hotspot这个span定位到每个脸对应的位置,可以在F12控制台中调整。当鼠标悬浮在链接上时,就会显示这个框:
.remote {
width: 900px;
height: 600px;
position: relative;
}
.remote ul {
margin:;
padding:;
list-style-type: none;
}
.remote a .hotspot{
position: absolute;
/*display: block;*/
width: 50px;
height: 60px;
}
.remote .卡加斯 a .hotspot {
top: 200px;
left: 165px;
}
.remote .黑手 a .hotspot {
top: 115px;
left: 205px;
}
.remote .基尔罗格 a .hotspot {
top: 210px;
left: 230px;
}
.remote .耐奥祖 a .hotspot {
top: 180px;
left: 575px;
}
.remote .古尔丹 a .hotspot {
top: 280px;
left: 645px;
}
.remote .格罗玛什 a .hotspot {
top: 160px;
left: 470px;
}
.remote .杜隆坦 a .hotspot {
top: 170px;
left: 345px;
}
.remote a .link {
position: absolute;
display: block;
width: 10em;
right: -11em;
cursor: pointer;
}
.remote .卡加斯 a .link {
top:;
}
.remote .黑手 a .link {
top: 1.2em;
}
.remote .基尔罗格 a .link {
top: 2.4em;
}
.remote .耐奥祖 a .link {
top: 3.6em;
}
.remote .古尔丹 a .link {
top: 4.8em;
}
.remote .格罗玛什 a .link {
top: 6em;
}
.remote .杜隆坦 a .link {
top: 7.2em;
}
.remote a:hover .hotspot,
.remote a:focus .hotspot{
border: 1px solid #fff;
}
.remote a:hover .link,
.remote a:focus .link{
color:#0066FF;
}
查看视频观察效果!
利用CSS制作脸书的更多相关文章
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
- 利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- css制作三角形,下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- CSS制作响应式正方形及其应用
CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...
随机推荐
- es6的foreach循环遍历
forEach forEach是Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: 结果: 这段代码相当于: for (var k = 0, length = array.length ...
- ffmpeg第三方库编译记录
最近在研究ffmpeg的编译,之前使用的Ubuntu,需要安装虚拟机,非常麻烦,所以后来改研究在Windows平台编译. 一开始遇到很多挫折,参考了网上很多的帖子,但要么不全要么内容已过期,经过我的反 ...
- Web实现音频、视频通信
Google开源实时通信项目WebRTC Google正式开源了WebRTC实时通信项目,希望浏览器厂商能够将该技术内建在浏览器中,从而使Web应用开发人员能够通过HTML标签和JavaScript ...
- JS数组的sort排序
数组sort方法排序var aa=[6,2,1,5]//默认是从小到大排序aa.sort()[1, 2, 5, 6] //下面也是从小到大排序aa.sort(function(a,b){return ...
- 洛谷【P1601】A+B Problem(高精)
题目传送门:https://www.luogu.org/problemnew/show/P1601 高精度加法板子.我们灵性地回忆一波小学学加法列竖式的场景(从\(6\)岁开始口算从未打过草稿的大佬请 ...
- Android 开发:开源库Speex支持arm64的动态库文件
随着处理器制造工艺的不断进步,和Android系统的不断发展,最近出了arm64-v8a的架构,由于项目中用到了speex的第三方语音编解码的动态库,其他架构的处理器暂不用说,一切正常,唯独到arm6 ...
- Ajax知识点整理
一.javascript原生Ajax 1.简介 Ajax是Asynchronous JavaScript+XML(异步JavaScript和XML)的缩写. 该名称诞生于XML还是数据传输首选格式的时 ...
- Fortify代码扫描解决方案
Fortify扫描漏洞解决方案: Log Forging漏洞: 1.数据从一个不可信赖的数据源进入应用程序. 在这种情况下,数据经由getParameter()到后台. 2. 数据写入到应用程序或系统 ...
- spring扩展点之四:Spring Aware容器感知技术,BeanNameAware和BeanFactoryAware接口,springboot中的EnvironmentAware
aware:英 [əˈweə(r)] 美 [əˈwer] adj.意识到的;知道的;觉察到的 XXXAware在spring里表示对XXX感知,实现XXXAware接口,并通过实现对应的set-XXX ...
- shell入门-sed-1
sed这个工具比grep复杂一点,功能比grep复杂一点 功能也能指定匹配的行,不能颜色显示 sed 基础功能 [root@wangshaojun ~]# sed -n '10'p 1.txtuucp ...