超链接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 ...
随机推荐
- Netfilter 之 table、rule、match、target
概述 本文主要分析table,rule,match,target的作用和其数据结构之间的关系,为后面的匹配流程做铺垫,通过本文中代码流程的分析,可以得到如下的关系图: 详细分析 table iptab ...
- 多目标优化算法（一）NSGA-Ⅱ（NSGA2）（转载）
多目标优化算法(一)NSGA-Ⅱ(NSGA2) 本文链接:https://blog.csdn.net/qq_40434430/article/details/82876572多目标优化算法(一)NSG ...
- .netcore多语言解决方案
这里本文使用Microsoft.AspNetCore.Localization来实现多语言的解决方案 默认是包含这个包的,所有不需要再额外安装 首先需要注入我们需要的服务 1.在startup.cs中 ...
- 【转载】网页JS获取当前地理位置（省市区）
眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...
- 在jsp页面如何获得url参数
方法一:当一个url过来时,如:http://localhost:8080/pro/demo/hello.jsp?name=john,在hello.jsp页面,我们可以这样得到name的值: < ...
- RDD的cache 与 checkpoint 的区别
问题:cache 与 checkpoint 的区别? 关于这个问题,Tathagata Das 有一段回答: There is a significant difference between cac ...
- 数学建模python matlab 编程(椭圆声学原理画图证明，解析几何)
证明,在椭圆形的音乐厅内,从一个椭圆的一个焦点发出声音,则另一个焦点听到的声音是最大的. 分析:证明,从椭圆的一个焦点任意发射的直线经过反射后,并经过另一个焦点. 画图,过一个焦 ...
- Vim/gVim 中文显示为乱码的解决办法
打开vimrc文件,在vim的安装目录下可以找到该文件,或在windows下是在vim/gvim下输入:edit $vim/_vimrc. 在文件的末尾添加一句 "set fileencod ...
- python中计时模块timeit的使用方法
timeit 模块: timeit 模块定义了接受两个参数的 Timer 类.两个参数都是字符串. 第一个参数是你要计时的语句或者函数. 传递给 Timer 的第二个参数是为第一个参数语句构建环境的导 ...
- MATLAB实现图像的代数运算
目录 1.使用求补运算对各类图像进行处理 2.利用imlincomb函数将图像的灰度值放大1.5倍 3.利用imlincomb函数计算两幅图像的平均值. 4.图像的加法运算 5.利用imnoise函数 ...