超链接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 ...
随机推荐
- Java通过过滤器修改header
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- token的解码及 判断值不为空的方法
token 的解码要使用插件:jwt-decode 判断值不为空的方法: function isEmpty(value){ return ( value === undefined || value ...
- Flume-几种拓扑结构
一.串联 Flume Agent 连接 这种模式是将多个 flume 顺序连接起来了,从最初的 source 开始到最终 sink 传送的目的存储系统.此模式不建议桥接过多的 flume 数量,flu ...
- 解决android sdk docs帮助文档打开慢的问题
解决android sdk docs帮助文档打开慢的问题 转https://blog.csdn.net/yang5726685/article/details/80543849 经查是因为本地文档中的 ...
- OGG ERRORS 总结
OGG ERRORS 总结 */--> OGG ERRORS 总结 Table of Contents 1. libnnz11.so 2. 00446 2.1. missing filename ...
- Spring Boot_打造企业级微信点餐系统_汇总贴
2019更新版 Spring Boot双版本(1.5/2.1) 打造企业级微信点餐系统 H:\BaiDu\微服务0830\2019微服务时代Spring Boot双版本(1.5-2.1) 打造企业级 ...
- chrome下常用插件
1.xdebug helper 配合PhpStorm使用调试PHP 2.json-handle 格式化JSON返回数据 3.website ip 查看当前网站IP 4.host switch plus ...
- 1. Linux基本操作和基本命令
常用快捷键: Ctrl + d : 结束符 Ctrl + c : 中断前台进程 Ctrl + z : 将前台进程停止掉 创建终端: 创建终端标签:Ctrl + Shift + t; 切换标签: A ...
- 【CodeForces - 939A】Love Triangle（模拟）
Love Triangle Descriptions: 正如你所知道的,没有男性飞机也没有女性飞机.然而,地球上的每一个平面都喜欢另一个平面.地球上有n个平面,编号从1到n,编号i的平面喜欢编号fi的 ...
- ReDOS攻击
正则表达式拒绝服务攻击(Regular Expression Denial of Service)当开发人员编写的正则表达式存在缺陷时,攻击者可以构造特殊的字符串来大量消耗服务器资源,最终造成拒绝服务 ...