目的:理解transition属性,2D变形的使用,熟练运用transition属性,transform属性实现过渡及变形效果
内容:当鼠标移上第一张图像时,产生直角边框过渡为圆角边框的效果
当鼠标移上第二张图像时,产生逐渐放大的过渡效果
当鼠标移上第三张图像时,产生图片旋转的过渡效果
当鼠标移上第四张图像时,产生图片透明度逐渐变暗效果
当鼠标移上四张图像的任意一图像时,都伴随着盒子阴影的过渡效果
图片第一行:样式
图片第二行:代码效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡与变形的综合应用</title>
<style>
/* 定义 大盒子 ,修改盒子的 内外边距 ,并将背景颜色设为 黑色 */
.main{
width: 1110px;
height: 250px;
margin: 0 auto;
background-color:black;
}
/*定义四个盒子,修改其相关属性,并设置为 左浮动 */
.box{
width: 240px;
height: 200px;
margin-left: 25px;
padding: 0;
float: left;
}
/*第一个盒子,修改其相关属性,添加背景图*/
.spring{
border:5px solid white;
padding: 0px;
width: 160px;
height: 160px;
position: relative;
margin: 15px 10px 0px 20px;
float: left;
background-image: url(picture/spring.jpg);
background-size: cover;
/*将直角边框修改为圆角边框*/
border-radius: 10px;
/*变化的过渡时间*/
transition: 2s;
}
/*鼠标移动上方时,第一个盒子的圆角边框在2s内变为圆形边框*/
.spring:hover{
border-radius: 50%;
/*边框阴影效果*/
box-shadow:white 0 0 30px;
}
/*第二个盒子,修改其相关属性,添加背景图*/
.summer{
border:5px solid white;
padding: 0px;
width: 160px;
height: 160px;
position: relative;
margin: 15px 10px 0px 20px;
float: left;
overflow: hidden;
/*background-image: url(picture/summer.jpg);*/
background-size: cover;
/*将直角边框修改为圆角边框*/
border-radius: 10px;
/*变化的过渡时间*/
transition: 3s;
}
/*边框阴影效果*/
.summer:hover{
box-shadow: white 0 0 30px;
}
/*设置图片过渡时间*/
.sum{
transition: all 3s;
}
/*图片放大原来1.4倍 */
.sum:hover{
transform: scale(1.4);
}
/*第三个盒子,修改其相关属性,添加背景图*/
.autumn{
border:5px solid white;
padding: 0px;
width: 160px;
height: 160px;
position: relative;
margin: 15px 10px 0px 20px;
float: left;
background-image: url(picture/autumn.jpg);
background-size: cover;
/*将直角边框修改为圆角边框*/
border-radius: 10px;
/*变化的过渡时间*/
transition: 3s;
}
/*鼠标移动上方时,第三个盒子逆时针旋转45°*/
.autumn:hover{
transform: rotate(-45deg);
/*边框阴影效果*/
box-shadow:white 0 0 30px;
}
/*第四个盒子,修改其相关属性,添加背景图*/
.winter{
border:5px solid white;
padding: 0px;
width: 160px;
height: 160px;
position: relative;
margin: 15px 10px 0px 20px;
float: left;
overflow: hidden;
background: url(picture/winter.jpg) cover;
/*将直角边框修改为圆角边框*/
border-radius: 10px;
/*变化的过渡时间*/
transition: 3s;
}
/*边框影阴效果*/
.winter:hover{
box-shadow:white 0 0 30px;
}
/* 图片过渡时间 */
.win{
transition:all 3s;
}
/*鼠标移动上方时,第四个盒子的透明度变为原来的0.6*/
.win:hover{
filter: alpha(opacity=60);
--moz-opacity: 0.6;
opacity: 0.6
}
/*设置一个小盒子加入字体,并设置为左浮动*/
.letter{
color: white;
margin-top: 15px ;
margin-left:70px;
margin-bottom: 0px;
margin-right: 0px;
padding: 5px;
width: 70px;
height: 15px;
float: left;
}
/*该字体比其他字体长,单独设置*/
.displacement{
color: white;
margin-top: 15px ;
margin-left:45px;
margin-bottom: 0px;
margin-right: 0px;
padding: 5px;
width: 115px;
height: 15px;
float: left;
}
</style>
</head>
<body>
<div class="main"><!-- 最外层盒子 -->
<div class="box"><!-- 第二层盒子 -->
<div class="letter">SHAPE</div>
<div class="spring">
</div>
</div>
<div class="box">
<div class="displacement">DISPLSCEMENT</div>
<div class="summer">
<img class="sum" src="picture/summer.jpg"/>
</div>
</div>
<div class="box">
<div class="letter">POSITION</div>
<div class="autumn">
</div>
</div>
<div class="box">
<div class="letter">COLOR</div>
<div class="winter">
<img class="win" src="picture/winter.jpg"/>
</div>
</div>
</div>
</body>
</html>