超链接hover切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>css3制作经验hover切换效果</title>
<style type="text/css">
body, html {
margin:0; padding:0; overflow:hidden; height:100%; width:100%; background:orange; font-size:12px;
}
.clear {
clear:both;
}
.container {
width:100px; height:100px; position:relative; overflow:hidden; text-shadow:0px 0px 5px orange; text-align:center; line-height:100px; font-size:2rem; float:left; margin-left:20px; margin-top:20px;
}
.container .before, .container .after {
width:100%; height:100%; border-radius:50%; position:absolute; top:0px; left:0px; transition-duration:0.35s; -webkit-transition-duration:0.35s; -moz-transition-duration:1s; -o-transition-duration:1s;
}
/*默认行为*/
.container .before {
background:white; left:0px; color:black;
}
.container .after {
background:black; left:100%; color:#fff;
}
.container:hover .before {
left:-100%;
}
.container:hover .after {
left:0%;
}
/*demo1 由左而右*/
.container.demo1 .before {
left:0px;
}
.container.demo1 .after {
left:-100%;
}
.container.demo1:hover .before {
left:100%;
}
.container.demo1:hover .after {
left:0%;
}
/*demo2 由上而下*/
.container.demo2 .before {
left:0px;
}
.container.demo2 .after {
top:-100%; left:0px;
}
.container.demo2:hover .before {
top:100%; left:0px;
}
.container.demo2:hover .after {
top:0%;
}
/*demo3 由下而上*/
.container.demo3 .before {
left:0px;
}
.container.demo3 .after {
top:100%; left:0px;
}
.container.demo3:hover .before {
top:-100%; left:0px;
}
.container.demo3:hover .after {
top:0%;
}
/*demo4 扁的由下而上*/
.container.demo4 .before {
left:0px;
}
.container.demo4 .after {
top:100%; left:0px;
}
.container.demo4:hover .before {
height:0px;
}
.container.demo4:hover .after {
top:0%;
}
/*demo5 扁的由上而下*/
.container.demo5 .before {
left:0px;
}
.container.demo5 .after {
top:-100%; left:0px;
}
.container.demo5:hover .before {
height:0px; top:100%;
}
.container.demo5:hover .after {
top:0%;
}
/*demo6 扁的由左而右*/
.container.demo6 .before {
left:0px;
}
.container.demo6 .after {
top:0%; left:-100%;
}
.container.demo6:hover .before {
width:0px; left:100%;
}
.container.demo6:hover .after {
left:0%;
}
/*demo7 扁的由右而左*/
.container.demo7 .before {
left:0px;
}
.container.demo7 .after {
top:0%; left:100%;
}
.container.demo7:hover .before {
width:0px;
}
.container.demo7:hover .after {
left:0%;
}
/*demo8 */
.container.demo8 .before {
left:0px;
}
.container.demo8 .after {
left:0%; -webkit-transform:scale(0);
}
.container.demo8:hover .before {
-webkit-transform:scale(0);
}
.container.demo8:hover .after {
-webkit-transform:scale(1);
}
/*demo9 */
.container.demo9 .before { }
.container.demo9 .after {
top:100%; left:100%;
}
.container.demo9:hover .before {
width:0%; height:0%;
}
.container.demo9:hover .after {
left:0%; top:0%;
}
/*demo10 */
.container.demo10 .before { }
.container.demo10 .after {
top:100%; left:-100%;
}
.container.demo10:hover .before {
width:0%; height:0%;
}
.container.demo10:hover .after {
left:0%; top:0%;
}
/*demo11 */
.container.demo11 .before { }
.container.demo11 .after {
top:-100%; left:-100%;
}
.container.demo11:hover .before {
width:0%; height:0%;
}
.container.demo11:hover .after {
left:0%; top:0%;
}
/*demo12 */
.container.demo12 .before { }
.container.demo12 .after {
top:-100%; left:100%;
}
.container.demo12:hover .before {
width:0%; height:0%;
}
.container.demo12:hover .after {
left:0%; top:0%;
}
</style>
</head>
<body>
<div class="clear">
<div class="container">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo1">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo2">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo3">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
</div>
<!--第二行-->
<div class="clear" >
<div class="container demo4">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo5">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo6">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo7">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
</div>
<div class="clear">
<div class="container demo8">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
</div>
<div class="clear">
<div class="container demo9">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo10">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo11">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
<div class="container demo12">
<div class="before">
hui52
</div>
<div class="after">
hui52
</div>
</div>
</div>
</body>
</html>
笔记链接：http://www.w3cfuns.com/blog-5460917-5403445.html
超链接hover切换效果的更多相关文章
- css3制作惊艳hover切换效果
css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- 【jQuery Demo】图片切换效果整理
图片的切换效果有很多,比较常见的有水平滚动.垂直滚动.淡入淡出等.我们接下来一一实现这些效果. 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: <div id="conta ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
随机推荐
- Oracle中根据列名找到所属的表
oracle中如何根据一个字段名查找出所属的表名? 用如下语句, select * from user_tab_columns where column_name='列名', 例子:select * ...
- 微信小程序之状态管理A
其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面 大概就是这样子 为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...
- 【Makefile】Makefile的自动化变量$@、$^ 、$<等
所谓自动化变量,就是这种变量会把“模式”中所定义的一系列的文件自动地挨个取出,直至所有的符合模式的文件都取完了.这种自动化变量只应出现在规则的命令中. $@ 表示规则中的目标文件集.在模式规则中,如果 ...
- LC 454. 4Sum II
Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...
- 直连路由onlink
根据路由器学习路由信息.生成并维护路由表的方法包括直连路由(Direct).静态路由(Static)和动态路由(Dynamic).直连路由:路由器接口所连接的子网的路由方式称为直连路由:非直连路由:通 ...
- python基础知识（属性property）
属性property property != 类属性和实例属性 访问计算后所得的值 返回所存储的值 创建用于计算的属性 @proper ...
- Python爬虫：scrapy 的运行流程和各模块的作用
scrapy的运行流程 爬虫 -> 起始URL封装Request -> 爬虫中间件 -> 引擎 -> 调度器(Scheduler): 缓存请求, 请求去重 调度器 -> ...
- Docker 面试题
Docker 面试题 Docker? Docker是一个容器化平台,它以容器的形式将您的应用程序及其所有依赖项打包在一起,以确保您的应用程序在任何环境中无缝运行. CI(持续集成)服务器的功能是什么? ...
- dfs入门-cogs1640[黑白图像]
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vxSmxkeqa [题目描述] 输入一个n×n的黑白图像(1表示黑色,0表示白色),任务 ...
- JavaScript 控制台打印window对象
示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...