制作ico 和 网站标志的小图标：www.bitbug.net
分享按钮(bShare分享)：www.bshare.cn/
一、css3变形 (transform)
语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
1、rotate(旋转)
1）rotateX(180deg) 等于 rotate3d(1,0,0,180deg) 沿x轴旋转180deg
2）rotateY(180deg) 等于 rotate3d(0,1,0,180deg) 沿y轴旋转180deg
3）rotateZ(180deg) 等于 rotate3d(0,0,1,180deg) 沿z轴旋转180deg
4）rotate(180deg) 不指定轴时，是2d平面的旋转，正值顺时针，负值逆时针
注：rotate旋转的单位为deg，同时旋转是按照线去转动的。
demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,hr,td,input,textarea{
margin:0;
padding:0;
}
body{
padding-top: 100px;
}
.box{
width: 200px;
height: 100px;
border-radius: 20px;
background: greenyellow;
text-align: center;
line-height: 100px;
font-size: 20px;
margin:20px auto;
transition: all 1s;
}
.box1{
transform-origin: bottom;
}
.box1:hover{
transform:rotateX(180deg);
/*transform:rotate3d(1,0,0,180deg);*/
}
.box2{
transform-origin: right;
}
.box2:hover{
/*transform:rotateY(180deg);*/
transform:rotate3d(0,1,0,180deg);
}
.box3{
background: pink;
transform-origin:50% 100%;/*也可以用左右 上下来表示旋转点*/
}
.box3:hover{
transform:rotateZ(180deg);
}
.box4{
/*transform-origin: 100% 0;*/
}
.box4:hover{
transform:rotate(-180deg);
}
</style>
</head>
<body>
<div class="box box1">沿x轴旋转</div>
<div class="box box2">沿y轴旋转</div>
<div class="box box3">沿z轴旋转</div>
<div class="box box4">旋转</div>
</body>
</html>
案例：
1）反转纸牌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: black;
}
.box {
width: 171px;
height: 283px;
position: relative;
}
.box img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
/* 隐藏反转元素的背面,要把每个元素要看成又厚度的 */
backface-visibility: hidden;
}
.box img:first-child {
transform: rotateY(180deg);
}
.box:hover img:first-child {
/* 因为浏览器 无法识别在转180 ，只能转到0或者360*/
transform: rotateY(0deg);
/* 转完之后 要让下面的上拉 */
z-index:1;
}
/* 让遮盖图转到后面去 */
.box:hover img:last-child{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/a2.png" alt="">
<img src="./images/a1.png" alt="">
</div>
</body>
</html>
2.scale(缩放)
1） scaleX(1.5) 等于 scale3d(1.5,1,1) 沿x轴缩放，默认值为1，大于1放大，小于1缩小，为0时类似于隐藏
2）scaleY(0.5) 等于 scale3d(1,0.5,1) 沿y轴缩放
3）scaleZ(1.5) 等于 scale3d(1,1,1.5) 沿z轴缩放
4）scale(1.5) 不指定轴时，x轴和y轴同时缩放，设置为负值时翻转加缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<style>
.box {
width: 200px;
height: 100px;
background: pink;
text-align: center;
font-size: 22px;
margin: 20px auto;
transition: all 1.2s;
}
.boxOne:hover {
transform: scaleX(0);
/*这样就隐藏了，为负的时候 为缩小*/
}
.boxTwo {
/* 设置缩放轴线 */
transform-origin: bottom;
background: chartreuse;
}
.boxTwo:hover {
/* 为1的时候，大小 不动 */
transform: scaleY(2);
}
.boxThree:hover {
/* 这个在这髋部出来 效果 */
transform: scaleZ(3);
}
.boxFours {
background: cornflowerblue;
transform-origin: 100% 0;
/*这样就是点，而不是线了*/
}
.boxFours:hover {
transform: scale(2);
}
.ball {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
border-bottom-left-radius: 0;
margin: 20px auto;
transition: all 1s;
/* 改变变形的 中心点 */
transform-origin: left bottom;
}
.ball:hover {
transform: scale(4);
}
</style>
</head>
<body>
<div class="box boxOne">延X轴缩小</div>
<div class="box boxTwo">延Y轴放大</div>
<div class="box boxThree">延Z轴放大</div>
<div class="box boxFours">不指定轴,x,y,z同时 进行(但是z看不到)</div>
<div class="ball"></div>
</body>
</html>
3.skew(倾斜)
1）skewX(30deg) 沿x轴倾斜
2）skewY(-30deg) 沿y轴倾斜
3）skew(30deg) 不指定轴时，默认沿x轴倾斜
4）transform:skew(30deg,30deg); 等于 transform:skewX(30deg) skewY(30deg); x轴和y轴同时倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜</title>
<style>
.box{
width:200px;
height:100px;
background: burlywood;
margin:60px auto;
text-align: center;
}
.box1{
transform: skewX(30deg);
}
.box2{
transform: skewY(30deg);
}
.box3{
transform: skew(10deg,40deg);
}
</style>
</head>
<body>
<div class="box box1">X</div>
<div class="box box2">Y</div>
<div class="box box3">X Y同时</div>
</body>
</html>
注：skew倾斜的单位为deg,他没有3D的写法。同时 倾斜也可以改变中心的 和 线
4.translate(位移)
1)translateX(100px) 等于 translate3d(100px,0,0) 沿x轴位移，正值向右，负值向左
2)translateY(100px) 等于 translate3d(0,100px,0) 沿y轴位移，正值向下，负值向上
3)translateZ(100px) 等于 translate3d(0,0,100px) 沿z轴位移，正值向前，负值向后
4)translate(100px) 不指定轴时，默认沿x轴位移
5)transform:translate(100px,100px); 等于 transform:translateX(100px) translateY(100px);
x轴和y轴同时位移
demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位移</title>
<style>
*{
margin:0;
padding:0;
}
body{
padding-top: 200px;
}
.box{
width: 200px;
height: 100px;
background: pink;
text-align: center;
font-size: 20px;
margin:20px auto;
transition: all 1s;
}
.box1:hover{
/*transform:translateX(-300px);*/
transform:translate3d(-300px,0,0);
}
.box2:hover{
/*transform:translateY(-300px);*/
transform:translate3d(0,-300px,0);
}
.box3:hover{
/* z轴就是前后关系了 */
transform:translateZ(100px);
}
.box4:hover{
/*transform:translate(200px,200px);*/
transform:translateX(100px) translateY(100px);
}
</style>
</head>
<body>
<div class="box box1">沿x轴位移</div>
<div class="box box2">沿y轴位移</div>
<div class="box box3">沿z轴位移</div>
<div class="box box4">位移</div>
</body>
</html>
案例
1）划过遮挡层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>划过div，展示遮挡层</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:280px;
height:180px;
position:relative;
/* 让划过的那个隐藏 */
overflow: hidden;
}
.box img{
width:100%;
height:100%;
}
.text{
width:180px;
height:80px;
background: rgba(255,0,0,.7);
text-align: center;
line-height:80px;
color: white;
position: absolute;
left:0;
top:0;
right:0;
bottom: 0;
margin: auto;
}
/* 划过的时候，下来一个框,要遮挡的多高，他就多高 */
.back{
width:280px;
height:180px;
background-color: pink;
text-align: center;
color: white;
position: absolute;
left: 0;
top: 0;
/* 所以这块 不能display:none; 所以要用位移 */
/* 让它从上下来，给y轴为负，（下、左右 参看它） */
transform:translateY(-100%);
/* 谁要有过程，就给谁加,他是动画的时间 */
transition: all .5s;
}
/* 划过父，改变子的变化 */
.box:hover .back{
/* 回到没有位移 */
transform:translateY(0);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic1.jpg" alt="">
<div class="text">我是网页常见动画</div>
<div class="back">
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度
</div>
</div>
</body>
</html>
2）下面这个是复杂一点的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两张图片左右划入div</title>
<style>
body{
background-color: rgb(128, 0, 128);
}
.box{
width:300px;
height:200px;
position: relative;
}
.imgs{
width:300px;
height:200px;
}
.text{
width:300px;
height:200px;
background: rgb(255, 192, 203,.9);
opacity:.6;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height:260px;
transition: all .6s;
opacity: 0;
}
.circular{
position: absolute;
left: 112px;;
top: 40px;
transform: translateX(-90px);
transition: all .6s;
opacity: 0;
}
.big{
position: absolute;
left:132px;
top: 60px;
transform: translateX(90px);
transition: all .6s;
opacity: 0;
}
/* 给整体划过 */
.box:hover .circular{
transform: translateX(0);
opacity: 1;
}
.box:hover .big{
transform: translateX(0);
opacity: 1;
}
.box:hover .text{
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic2.jpg" alt="" class="imgs">
<div class="text">这块要是三个盒子，不能放zai 一个div中</div>
<img src="./images/circular.png" alt="" class="circular">
<img src="./images/big.png" alt="" class="big">
</div>
</body>
</html>
在动画效果中的显示隐藏，都是opacity 0 和 1的切换
5.使用动画居中元素
★ 使用css3变形的方式实现未知大小的元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
★ 使用css3变形的方式实现未知大小的子元素在父元素中水平垂直都居中
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
二、改变变形元素的中心点位置
语法：transform-origin:left|center|right|百分比 top|center|bottom|百分比;
三、变形综合
我们经常需要将多种变形综合使用，顺序不同，有可能效果不同
eg1:
transform:rotate(360deg) scale(2);
transform:scale(2) rotate(360deg);
放大和旋转顺序不同，效果相同
eg2:
transform:translateX(100px) rotate(360deg);
旋转和位置 顺序不同，效果不同（所以要先位移 后旋转）
原因：元素在旋转的过程中三根轴线也在跟着发生旋转
四、设置元素变形的类型
语法：transform-style:flat(默认值，2d变形)|preserve-3d(3d变形);
只要是3d变形，都必须加上 这句话。
五、3d透视或井深
语法：perspective:数值+单位;
父元素{perspective:1000px;}
给变形的子元素{transform:perspective(700px) rotateY(30deg);}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d透视或井深</title>
<style>
.box{
width: 1000px;
border:1px solid black;
display: flex;
margin-top: 60px;
perspective: 500px;
justify-content: center;
}
.box a{
width: 100px;
height: 300px;
margin-right: 20px;
transform-style: preserve-3d;
transform:rotateY(30deg);
}
.box a:nth-child(1){
background: red;
transform:perspective(1500px) rotateY(30deg);
}
.box a:nth-child(2){
background: orange;
}
.box a:nth-child(3){
background: yellow;
}
.box a:nth-child(4){
background: green;
}
.box a:nth-child(5){
background: pink;
}
.box a:nth-child(6){
background: blue;
transform:perspective(200px) rotateY(30deg);
}
</style>
</head>
<body>
<div class="box">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</body>
</html>
立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 200px;
height: 200px;
/* xaing dui 定位 */
position: relative;
transform-style: preserve-3d;
/* div向前位移，是为了 让我们看见变形的空间 */
transform:rotateX(-15deg) rotateY(15deg);
}
a {
text-decoration: none;
display:block;
width:200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size:20px;
color: white;
/* 绝对定位 */
position: absolute;
top:0;
left: 0;
transform-style: preserve-3d;
opacity: .5;
}
div a:nth-child(1) {
background: red;
transform: translateZ(100px);
}
div a:nth-child(2) {
background: orange;
transform: translateZ(-100px) rotateY(180deg);
}
div a:nth-child(3) {
background: gray;
transform: rotateY(-90deg) translateZ(100px);
}
div a:nth-child(4) {
background: green;
transform: rotateY(90deg) translateZ(100px);
}
div a:nth-child(5) {
background: purple;
transform: rotateX(90deg) translateZ(100px);
}
div a:nth-child(6) {
background: blue;
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div>
<a href="#">前</a>
<a href="#">后</a>
<a href="#">左</a>
<a href="#">右</a>
<a href="#">上</a>
<a href="#">下</a>
</div>
</body>
</html>
六、transition动画
语法： transition:过渡属性 过渡时间 过渡延迟执行时间 过渡方式;
1、1.transition-property(过渡属性)
取值：
none 默认值，没有属性发生过渡
all 所有发生变化的css属性都添加过渡
transition:all 1s;
ident 指定发生变化的css属性列表
transition:transform 3s,background 2s,border-radius 1s;
2、transition-duration(过渡所需时间)
取值：
0 默认值，不发生过渡
time 正值，单位为s
3、transition-delay(过渡延迟时间)
取值：
0 默认值，不延迟
正值 按照设置的时间延迟执行动画
负值 设置时间前的动画将会被截断
4、transition-timing-function(过渡方式)
取值：
ease 默认值，缓解效果
linear 线性效果（匀速运动）
ease-in 渐显效果（加速运动）
ease-out 渐隐效果（减速运动）
ease-in-out 渐显渐隐效果（慢-快-慢）
案例
1）旋转正方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition过渡动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width:80px;
height:80px;
background: pink;
margin:100px auto;
/* 这个是指定 一样的时间 */
/* transition: all 1s; */
/* 指定 旋转、颜色和放大是不一样的时间 */
transition: transform 2s,background .2s ,border-radius 3s;
/* 过渡延迟 */
transition-delay:3s;
}
div:hover{
transform: rotate(360deg) scale(3);
border-radius: 50%;
background: purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2)过渡方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡方式</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:80px;
height:80px;
margin-top:20px;
background: pink;
}
.box:hover{
transform: translateX(300px) rotate(360deg);
}
.box1{
/* 这个是默认值 */
transition:all 5s ease;
}
.box2{
transition:all 5s linear;
}
.box3{
transition:all 5s ease-in;
}
.box4{
transition:all 5s ease-out;
}
.box5{
transition:all 5s ease-in-out;
}
</style>
</head>
<body>
<div class="box box1">ease</div>
<div class="box box2">linear</div>
<div class="box box3">ease-in</div>
<div class="box box4">ease-out</div>
<div class="box box5">ease-in-out</div>
</body>
</html>
七、animation动画
语法：animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放状态 动画执行方式 动画运动方向 动画时间之外的状态;
案例
1）一直旋转的正方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation动画</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 80px;
height: 80px;
margin:100px auto;
background: pink;
/*
给谁 动画，就要给谁加上 下面定义的名称
动画默认执行一次
执行次数 为正，不能为负
*/
animation: cartoonName 6s infinite;
}
/*
定义动画关键帧 ：
动画关键帧 都是从0开始，到100% 结束
给谁 动画，就要给谁加上 下面定义的名称
*/
@keyframes cartoonName{
0%{
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(360deg) scale(2);
}
100%{
transform: rotate(0deg) scale(1);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
◆ 在设置animation动画之前首先要定义好动画关键帧，语法如下：
@keyframes 动画名称{ 或 @keyframes 动画名称{
0%{ from{
color:red; color:red;
... ...
} }
10%{ 10%{
color:blue; color:blue;
} }
... ...
100%{ to{
color:yellow; color:yellow;
} }
} }
/* 给要动画的元素写 */
展示动画的元素{
animation: 动画名称 6s infinite;
}
注： @keyframes兼容写法如下：
@-webkit-keyframes 动画名称{
}
1、animation-name(动画名称)
animation:动画名称 2s;
注：animation中的动画名称必须要和定义关键帧的动画名称一致
2、animation-duration(动画执行一次所需时间)
取值：
0 默认值，表示动画不执行
time 正值，单位为s
3、animation-delay(动画在执行之前延迟时间)
取值：
0 不延迟
正值 按照设置的时间延迟执行动画
负值 设置时间前的动画将会被截断
4、animation-iteration-count （动画播放次数）
取值
0 不播放动画
number 正整数，按照设置的次数播放动画
infinite 无限循环播放
5、animation-play-state（动画播放状态）
取值
running 默认值，运动
paused 暂停
.box{animation:动画名称 4s infinite;}
/* 注：给一个划过 就停止。*/
.box:hover{animation:动画名称 4s infinite paused;}/*搬过来 多加一个参数*/
6、animation-timing-function (动画播放方式)
取值
ease 缓解运动
linear 匀速运动
ease-in 加速运动
ease-out 渐隐效果（减速运动）
ease-in-out 渐显渐隐效果（慢-快-慢）
step-start 马上转跳到动画结束状态或下一帧的状态（中间没有过程，可以做一个 动画小人）
注：人物运动 动画效果demo
step-end 保持动画开始时的状态，当动画结束时，马上转跳到动画结束时的状态
steps(n,start|end) n代表动画分几个阶段完成
7、animation-direction（动画运动的方向）
取值
normal 正常方向运动
reverse 与normal方向相反
alternate 正反方向交替运动，奇数次正方向，偶数次反方向
alternate-reverse 奇数次反方向，偶数次正方向
8、animation-fill-mode（动画时间之外的状态）
取值
none 默认值，不设置动画时间之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 遵循forwards和backwards两个规则(其实他只遵循了forwards原则)
★ transition和animation的区别：
I.transition动画需要触发条件
animation动画不需要触发条件，页面加载完成后自动执行
II.transition动画触发一次执行一次，再次执行需要再次触发
animation动画可以指定播放次数或无限循环播放
III.transition动画只有开始和结束两个状态，不能设置中间的状态
animation动画可以像flash一样设置动画关键帧
扩展：倒影或镜像
语法：-webkit-box-reflect:left|right|above(上)|below(下) 偏移量 渐变;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒影</title>
<style>
html,body{
height:100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
img{
/* 谷歌自己研发的，所以要加前缀 (下面还使用了 渐变) */
-webkit-box-reflect:below 1px linear-gradient(rgba(255,255,255,0) 20%,rgba(255,255,255,1) 60%);
}
</style>
</head>
<body>
<div>
<img src="./images/pic1.jpg" alt="">
</div>
</body>
</html>
★ 使用border属性实现三角效果，方法如下：
元素{
width:0;
height:0;
border:5px solid transparent;
border-top-color:red;
}
八、DEMO
1、照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转相册</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
}
/*
1、加个背景
2、给其一个 固定的容器
3、给其图片一个 定位，让它重叠，变成一个图片
4、按照3d去布局
5、让其沿Y轴旋转
6、给容器加旋转 动画
7、加一个 沿X轴转，这样 才能竖着
8、划过的时候 暂停
*/
body{
/* zhe个是渐变 */
background:linear-gradient(#09ffeb 0%,#000 75%) ;
display: flex;
justify-content: center;
align-items: center;
}
/* 给其一个 固定的容器 */
div{
width:160px;
height:300px;
position: relative;
transform-style: preserve-3d;
transform:rotateX(-20deg);
/* 让rong 器转，所以 给图片加 */
/* animation:动画名 时间 匀速旋转 一直转 */
animation:image 14s linear infinite ;
}
/* 划过的时候 暂停 */
div:hover{
animation:image 14s linear infinite paused;
}
div img{
width:160px;
height:300px;
position: absolute;
top:0;
left: 0;
border-radius:20px;
transform-style: preserve-3d;
/* 给图片一个渐变 */
-webkit-box-reflect:below 3px linear-gradient(rgba(255,255,255,0) 51%,rgba(255,255,255,1) 77%);
}
/* 沿Y轴转 */
@keyframes image{
0%{
/* 没写X转，必须要加前面，先加x */
transform:rotateX(-20deg) rotateY(0deg);
}
100%{
transform:rotateX(-20deg) rotateY(360deg);
}
}
/* ——————————————————————————————————————————————————————————————————— */
div img:nth-child(1){
/* 找到相邻的，一点点 去调Z轴的距离 */
transform:rotateY(0deg) translateZ(235px);
}
div img:nth-child(2){
transform:rotateY(40deg) translateZ(235px);
}
div img:nth-child(3){
transform:rotateY(80deg) translateZ(235px);
}
div img:nth-child(4){
transform:rotateY(120deg) translateZ(235px);
}
div img:nth-child(5){
transform:rotateY(160deg) translateZ(235px);
}
div img:nth-child(6){
transform:rotateY(200deg) translateZ(235px);
}
div img:nth-child(7){
transform:rotateY(240deg) translateZ(235px);
}
div img:nth-child(8){
transform:rotateY(280deg) translateZ(235px);
}
div img:nth-child(9){
transform:rotateY(320deg) translateZ(235px);
}
/* 最后转回360，也就复位到0，所以 不用写，与第一个 相对了 */
</style>
</head>
<body>
<div>
<img src="images/p1.jpg" alt="">
<img src="images/p2.jpg" alt="">
<img src="images/p3.jpg" alt="">
<img src="images/p4.jpg" alt="">
<img src="images/p5.jpg" alt="">
<img src="images/p6.jpg" alt="">
<img src="images/p7.jpg" alt="">
<img src="images/p8.jpg" alt="">
<img src="images/p9.jpg" alt="">
</div>
</body>
</html>
