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 设计大奖的优秀作品,帮助 ...
随机推荐
- mybatis insertUseGeneratedKeys
mybatis中的一个坑:预期:传入的Record中会生动填入在db中生成的id值. 使用 insertUseGeneratedKeys插入数据时,如果id字段不是AUTO_INCREMENT,则不 ...
- 【HDOJ】1243 反恐训练营
LCS. /* 1243 */ #include <cstdio> #include <cstring> #include <cstdlib> #define MA ...
- Signing key has not been configured
Signing key has not been configured.https://dev.openwrt.org/changeset/38284 Add package signing key ...
- BZOJ1674: [Usaco2005]Part Acquisition
1674: [Usaco2005]Part Acquisition Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 259 Solved: 114[Sub ...
- 深入JS系列学习3
深入JS系列学习3 深入理解JavaScript系列(9):根本没有"JSON对象"这回事! 很多JavaScript开发人员都错误地把JavaScript对象字面量(Object ...
- cf701C They Are Everywhere
Sergei B., the young coach of Pokemons, has found the big house which consists of n flats ordered in ...
- AWK中几个变量
学习AWK语言 https://awk.readthedocs.org/en/latest/chapter-one.html http://www.ibm.com/developerworks/cn/ ...
- Java学习日记-2.2 增强后的switch-case
switch-case语句的基本格式 switch(expression){ case condition1: ... break; case condition2: ... break; case ...
- [LeetCode] 187. Repeated DNA Sequences 解题思路
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- 微信/易信公共平台开发（二）：自定义菜单的PHP实现(提供源码)
微信把公众号分成订阅号和服务号两种,服务号可以自定义菜单, 菜单大大方便了用户操作. 比如:公众服务号 "中国南方航空" 的自定义菜单如下图: 点菜单就可以直接进入操作了,方便! ...