css3制作惊艳hover切换效果

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

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

学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
超链接hover切换效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta na ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
分针网—IT教育：使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
css3 手机端翻屏切换效果
原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserv ...
css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

随机推荐

Echarts3 使用教程
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
VMware下安装虚拟机Ubuntu14.04 Server设置桥接方式
我本地的采用的上网方式的拨号上网,IP段是一公网下的通过路由设置的局域网,网段182.18.1.* 本地连接包含以下: 其中无线上网卡的.WMware桥接是自定义的局域网IP段:192.168.253 ...
网站和Web应用程序的区别
新建项目里面的(ASP.NET Web 应用程序)主要是做B/S系统的,与winform的开发方式类似.新建网站(ASP.NET 网站)是主要开发网站的.其实你只要跟着教程做就行了.具体区别如下(借鉴 ...
python IDE
提供给开发者 10 款最好的 Python IDE http://www.oschina.net/news/57468/best-python-ide-for-developers vim windo ...
大数阶乘（C/C++）
高精度的运算在Java中是很容易实现的,就像 a + b Problem 一样,因为Java提供了相应的类库和API:但是在 C/C++ 当中就没有那么现成的类和API来让你调用了.本着“自己动手,丰 ...
曲线提取数据Engauge Digitizer
可导出CSV格式数据其它参考: http://blog.sina.com.cn/s/blog_4ae65b4d0100z8cg.html 其它曲线提取数据的软件还有: GetData.Windig ...
CentOS更新软件
列出所有可更新的软件清单命令:yum check-update 安装所有更新软件命令:yum update 仅安装指定的软件命令:yum install <package_name> 仅更 ...
创建一个叫做People的类：属性：姓名、年龄、性别、身高行为：说话、计算加法、改名编写能为所有属性赋值的构造方法；（2）创建主类：创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80；让该对象调用成员方法：说出“你好！” 计算23+45的值将名字改为“李四”
package com.chuoji; public class People { private String name; private int age; private String sex; ...
Python3基础 sum,range 计算1到100的和
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
1106 c程序的推导过程

css3制作惊艳hover切换效果

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

随机推荐

热门专题