Css3案例
<!DOCTYPE html>
<html>
<meta charset=utf->
<head>
<style>
body{
backgound:#f9f9f9;
}
.img{
position: absolute;
width: 300px;
height: 200px;
border:10px solid #ccc;
overflow:hidden; }
.img img{
width:%;
height:%;
transition:all .3s ease;
}
.img:hover img{
-webkit-transform:scale(1.5);
}
.back{
z-index:;
background-color: rgba(,,, );
position: absolute;
top: ;
left: ;
height:%;
text-align: center;
color: #;
-webkit-transition:all .5s ease; }
.back h2{
text-align:center;
color:#;
-webkit-transition:all .5s ease;
background-color: rgba(,,, 0.5);
height:30px;
position: relative;
top: -55px;
}
.back p{
position: relative;
bottom: -130px;
-webkit-transition:all .5s ease;
} .back:hover h2{
text-align:center;
color:#fff;
top:;
} .back:hover p{
text-align:center;
color:#fff;
bottom:;
} .info{
background-color: rgba(,,,.);
padding:5px;
color:#fff;
text-decoration: none;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=);
opacity: ; -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.back:hover a{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=);
opacity: ;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
} .back:hover{
background-color: rgba(,,,.);
} </style>
</head>
<body> <div class="img"> <img src="1.jpg">
<div class="back">
<h2>Hover Style #</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div> </div> </body>
</html>
<!DOCTYPE html>
<html>
<meta charset=utf->
<head>
<style>
body{
backgound:#f9f9f9;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 2px 1px 5px #ccc;
-moz-box-shadow: 2px 1px 5px #ccc;
box-shadow: 2px 1px 5px #ccc;
cursor: default;
background: #fff;
} .mask{
width: 360px;
height: 470px;
background: rgba(,,, 0.7);
position: absolute;
top: 0px;
left: 0px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
transform: translate(265px, 145px) rotate(45deg); } .view:hover .mask{ left: -249px;
top: -313px; }
.content{
position:absolute;
top:;
left:;
width:%;
height:%;
z-index:;
}
.content h2{
position: absolute;
top: -80px;
width: %;
right: -310px;
color:#fff;
transition: all .2s ease-in-out;
} .content:hover h2{
top:;
left:;
}
.content p{
position: absolute;
width: %;
bottom: -100px;
color:#fff;
right: -319px;
transition: all .5s ease-in-out;
} .content:hover p{
bottom:;
left:;
}
.info{
text-decoration: none;
color:#fff;
background: rgba(, , , 0.8);
padding:10px;
position: relative;
top: -40px;
transition: all .9s ease-in-out;
} .vide:hover a{
top:60px; } </style>
</head>
<body> <div class="view view-second">
<img src="1.jpg"> <div class="mask"></div> <div class="content vide">
<h2>Hover Style #</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div> </div> </body>
</html>
Css3案例的更多相关文章
- 15款HTML5/CSS3案例展示，导航，日历，钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- css3 鼠标悬浮动画效果
CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...
- Web前端业界氛围极好的群——鬼懿IT
鬼群简介 鬼懿IT主群号:,鬼懿IT-成长群:181368696 , 创建于2005年12月 ,聚集的业内人事包括:阿当,大漠,辣妈,崔凯,Rei,周裕波,司徒正美,丸子,鬼森林,寒冬,franky, ...
- JS 经验总结
1.IE中div的高度是content+padding+border之和,其它的是content的高度 2.一个标签里面只有一个属性,class='cls1 cls2' 3.同一页面不能出现相同的id ...
- 国外优秀的UI设计资源库收集
国外优秀的UI设计资源库 网站设计或者说UI设计对于Web上的运用是非常的关键,一个站做得好不好,能不能吸引人的眼球,设计占了不低的地位,但话又说回来,Web前端人员又有多少人是设计专业毕业,具有这方 ...
- CSS3选择器的研究，案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
随机推荐
- rabbitMQ入门
1 安装 1.1 首先 arbbitmq是用爱尔兰这种语言去编写的,所以,需要这种语言支持,那就需要下载以下几个包去安装来搭建环境 下载并安装erlang,http://www.erlang.org/ ...
- 产生文件命令touch,echo,cat<<EOF>test,less,more,tail,head
. 输出命令 echo,cat,管道(|),tee,重定向(>, >>)等 . 创建一个文件:用 touch.echo.cat.tee, 重定向(>, >>)等 [ ...
- Centos6.5 qt 安装
1,centos linux系统必须预先以安装x Server(KDE or GNOME) 2,wget http://download.qt-project.org/official_release ...
- Silverlight 中 TreeView 的数据绑定
方法一:Silverlight使用XAML标记语言来编写,如果不使用XAML强大的绑定功能,实在是罪过.通过使用绑定,可以将UI与视图模型层分离,有利于系统的维护.作为Silverlight中比较有代 ...
- ASPNET登陆总结
昨天晚上看了视频,今天早上起来就凭着记忆与视频里的代码试着做了一个登陆,基本功能是实现了. 0x0:首先,第一步是做一个界面....直接扒别人做好的页面.....各种改改路径啥的,用浏览器打开,恩,发 ...
- [Design Pattern] Front Controller Pattern 简单案例
Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...
- Flask+Mysql搭建网站之网页设计
不得不说,本人极度讨厌网页设计,感觉太麻烦了.不过整好啦还蛮有成就感的. 关于网页设计,现在流行的是扁平化设计. http://www.bootcss.com/ http://www.bootcss. ...
- Python之路【第一篇】：Python前世今生
Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...
- motan源码分析八：涉及到底层的客户端调用
之前我们分析了客户端调用服务端的源码,但是没有涉及到通讯层和序列化层,本文将之前讲过的内容做一次串联. 1.上层通过动态代理调用refer的call,每个refer又对应一个nettyclient,下 ...
- myeclipse快捷键收集整理
Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...