css3照片墙+曲线阴影
css3照片墙+曲线阴影
最近在学习jquery，晚上想复习下以前学过的知识，看到网上有关于css3照片墙的，感觉挺好玩的，就做了做。（以下图片均来自网络）
一、css3照片墙
html部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3照片墙</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="content"> <img class="pic1" src="data:images/1.jpg" /> <img class="pic2" src="data:images/2.jpg" /> <img class="pic3" src="data:images/3.jpg" /> <img class="pic4" src="data:images/4.jpg" /> <img class="pic5" src="data:images/5.jpg" /> <img class="pic6" src="data:images/6.jpg" /> <img class="pic7" src="data:images/7.jpg" /> <img class="pic8" src="data:images/8.jpg" /> <img class="pic9" src="data:images/9.jpg" /> <img class="pic10" src="data:images/10.jpg" /> </div> </body> </html>
css部分：
body{
background: url(../images/bg5.jpg) no-repeat top center fixed;
background-size: 100% auto;
}
.content{
width: 900px;
height: 600px;
margin: 100px auto;
position: relative;
}
img{
width: 20%;
height: auto;
z-index: 1;
position: absolute;
padding: 10px 10px 15px 10px;
background-color: white;
border: 1px solid #ccc;
/*动画的时间*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
}
img:hover{
z-index: 2;
/*缩放倍数*/
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
/*阴影效果*/
box-shadow: 10px 10px 20px #000;
}
/*下面对每一个图片进行旋转处理*/
.pic1{
left: 100px;
top: 50px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic2{
left: 280px;
top: 60px;
-webkit-transform: rotate(100deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.pic3{
left: 450px;
top: 50px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
.pic4{
left:630px;
top: 60px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic5{
left: 130px;
top: 240px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.pic6{
left: 320px;
top: 240px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
.pic7{
left: 520px;
top: 240px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.pic8{
left: 140px;
top: 420px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
}
.pic9{
left: 330px;
top: 420px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.pic10{
left: 525px;
top: 420px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}
此时的显示结果为，当鼠标移动上去的时候，图片会回到之前的位置，并且变为原来的1.5倍
二、css3曲线阴影
html部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3中的曲线阴影效果</title> <link rel="stylesheet" type="text/css" href="css/test.css" /> </head> <body> <div class="demo sty"> <h1>曲线阴影效果</h1> </div> <ul class="box"> <li><img src="data:images/2.jpg" /></li> <li><img src="data:images/4.jpg" /></li> <li><img src="data:images/5.jpg" /></li> </ul> </body> </html>
css部分：
*{
margin: 0;
padding: 0;
list-style: none;
}
.demo{
width: 980px;
height: 200px;
margin: 50px auto;
line-height: 200px;
font-size: 24px;
text-align: center;
background-color: #fff;
}
.sty{
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),
0 0 40px rgba(0,0,0,0.1) inset;
border-radius: 10px;
}
.box{
width: 980px;
height: 300px;
margin: 0 auto;
}
.box li img{
display: block;
width: 290px;
height: 200px;
border-radius: 8px;
}
.box li{
position: relative;
float: left;
width: 290px;
height: 200px;
background-color: #fff;
padding: 5px;
margin-right: 25px;
box-shadow: 0 0px 4px rgba(0,0,0,0.3) ,
0 0 60px rgba(0,0,0,0.1) inset;
border-radius: 8px;
}
此时的效果为如下图：（只是简单的增加了圆角和一点阴影）
学完了css3中的变形和：before和：after，我们还可以增添如下代码：
//不满足之前的效果,我们还可以通过:before或是:after来增添效果
.sty:after , .sty:before{
position: absolute;
content: '';
top: 50%;
bottom: -1px;
left: 10px;
right: 10px;
background:#fff;
z-index: -1;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.box li:before{
position: absolute;
content: '';
width: 90%;
height: 80%;
left: 18px;
bottom: 11px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: skew(-12deg) rotate(-5deg);
}
.box li:after{
position: absolute;
content: '';
width: 90%;
height: 80%;
left: 18px;
bottom: 11px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: skew(12deg) rotate(5deg);
}
最终显示结果为：
css3照片墙+曲线阴影的更多相关文章
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- 【CSS3】---曲线阴影翘边阴影
效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...
- css3 曲线阴影，翘边阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- CSS3知识之阴影box-shadow
一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- CSS3的文字阴影—text-shadow
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...
随机推荐
- Log4j2常见使用示例及Syslog/Syslog-ng
准备工作 打开http://logging.apache.org/log4j/,点击左侧Download,我下载的是Apache Log4j 2 binary (zip),目前是2.0.2版本.解压后 ...
- Maven 简单配置gpg
1. 下载maven到指定目录,指定对应的gpg的执行命令所需要的属性.这里比如下载解压后的maven目录是: C:\maven-apache-3.3.2 ,那么配置文件目录是: C:\maven-a ...
- 如何判断平台工具集去做条件编译（VC++目录、预处理器定义、$(PlatformToolsetVersion)）
作者:zyl910 从VS2010开始,提供了一个平台工作集(Platform ToolSet)选项用于配制vc编译版本.到了VS2012,更是因为默认平台工具集不支持WindowsXP,导致经常需要 ...
- ActiveMQ 使用
ActiveMQ资料大全 官方文档 入门:http://activemq.apache.org/getting-started.html 常见问题:http://activemq.apache.org ...
- 【最新图文教程】WinCE5.0中文模拟器SDK(VS2008)的配置
http://www.blogbus.com/antiblood-logs/204402631.html 经过几天的查找,终于找到了一篇文章是讲VS2008 怎么集成wince5.0 的模拟器的,这里 ...
- C#怎样去掉对于用Splict分隔的数组中的空值？
string[] arrayUserId = userIds.Split(new char[] { ',' },StringSplitOptions.RemoveEmptyEntries); 可以去掉 ...
- 前端经常使用插件使用文档 以及demo
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- Linux和UNIX监控
Linux和UNIX上的数据库监控工具包括监控CPU.内存.磁盘.网络.安全性和用户的监控工具.下面罗列了我们找到的有用工具及其简单描述. ps 显示系统上运行的进程列表 top ...
- 聊聊并发（七）——Java中的阻塞队列
3. 阻塞队列的实现原理 聊聊并发(七)--Java中的阻塞队列 作者 方腾飞 发布于 2013年12月18日 | ArchSummit全球架构师峰会(北京站)2016年12月02-03日举办,了解更 ...
- WindowsStore页面导航
第一个页面:前台 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...