css3制作经验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

hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52

hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52
hui52

css3制作惊艳hover切换效果的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 超链接hover切换效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta na ...

  4. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  5. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  6. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  7. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  8. css3 手机端翻屏切换效果

    原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserv ...

  9. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

随机推荐

  1. 文本标记器vi

    在打开某一类文件时,遇到了vi,当时不知是什么东西,鼠标,包括键盘上的键在文本上都没有用,后来才知道那是vi 参考文档

  2. Leetcode: Number of Segments in a String

    Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...

  3. navicat----------局域网数据库：如何让navicat链接局域网其他的数据库。

    1.方法很简单了,找到被链接的数据库,打开以后有一个自带的mysql数据库,打开以后下面有一个user表,把里面的第一条数据的第一个字段改成% 百分号,然后保存,重启服务器,搞定 2.如果是linux ...

  4. Python的文本数据

    字符串的一些方法! 1.text.endswith(".jpg")        如果字符串是以给定子字符串结尾的,就返回值True. 2. text.upper():       ...

  5. zw版·全程图解Halcon控件安装（delphi2007版）

    zw版·全程图解Halcon控件安装(delphi2007版) delphi+halcon,这个组合,可以说是图像分析的神级配置,无论是开发效率,还是运行实在是太高了,分分钟秒杀c+opencv,py ...

  6. VS2010 支持 CSS3

    在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网下载 CSS 3 Intellisense Schema ...

  7. Entity Framework && Lambda

    Lambda表达式详细总结 C# 代码了解委托.匿名方法.Lambda 表达式和闭包本质 将使用了C# Lambda表达式的程序集反编译后,我们发现,它实际上和匿名方法没有什么不同.Lambda的输入 ...

  8. Dynamics AX 2012 R2 在AIF服务契约中使用DateTime

    Reinhard在AIF中使用DateTime作为服务契约的参数,与DotNet程序进行交互时,总是因为时区的问题,导致DotNet提交的System.DateTime与AIF中接收的DateTime ...

  9. <Interview problem>二进制加法

    闲来无事,搜集一些有趣的面试题,以及解决方案,有些代码可能会自己写, 有些网上有比较完整的方案了,就直接把代码拷贝过来,描述一下解题思路. Given two binary strings, retu ...

  10. mysql查看存储过程

    查询数据库中的存储过程 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE' 方法 ...