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 设计大奖的优秀作品,帮助 ...
随机推荐
- BZOJ1642: [Usaco2007 Nov]Milking Time 挤奶时间
1642: [Usaco2007 Nov]Milking Time 挤奶时间 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 525 Solved: 30 ...
- delphi 通过控件的handle取得控件
例子代码如下: vartsg:TstringGrid;begintsg:=Tstringgrid(FindControl(handle));//正常使用TstringGrid//tsg......./ ...
- 下载cppunit
cppunit的官方地址:http://sourceforge.net/projects/cppunit 方式一:下载打包好的版本 下载地址:http://sourceforge.net/projec ...
- Java学习日记-10 集合
集合(Collection) 1. 什么是集合? 集合是一组对象组成的一个整体,又称为容器,集合类属于java.util包.集合不同于数组的地方在于,一是它的容量是可变的,二是集合中只能存储对象,不能 ...
- 安全控件开发原理分析 支付宝安全控件开发 C++
浏览器安全控件是如果支付宝一样结合web程序密码数据安全处理的程序,采用C++语言开发 通常的安全控件分为两种,一种是指支持IE内核的浏览器,一种支持所有内核的浏览器,支付宝采用的是支持所有内核的浏览 ...
- 如何计算Java对象占用了多少空间？
在Java中没有sizeof运算符,所以没办法知道一个对象到底占用了多大的空间,但是在分配对象的时候会有一些基本的规则,我们根据这些规则大致能判断出来对象大小. 对象头 对象的头部至少有两个WORD, ...
- java中集合杂记
HashSet类按照哈希算法来存取集合中的对象,具有很有的性能.当HashSet向集合中加入一个对象时,会调用对象的hashCode()方法获得哈希码,然后根据这个哈希码进一步计算出对象在集合中的存放 ...
- lesson4:使用锁Lock来解决重复下单的问题
demo源码:https://github.com/mantuliu/javaAdvance 中的类Lesson4IndependentLock 在上一节中,我们分析了Lock的源代码并一起实践了粗粒 ...
- table标签
table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...
- ASP.NET-FineUI开发实践-8(二)
把上回的做一些改进 1.点击grid2的行改变TriggerBox1的值 var v = $(item).find('.x-grid-cell-Name div.x-grid-cell-inner') ...