大学生作业练习之盒子模型制作,即鼠标放到指定位置相应图形出现效果改变。
先来看一下静止页面,即鼠标未动情况下的效果图。
1.我们让标题“桌面壁纸”先来实现渐变效果。
2.八张图片出现相同形状变换。
3.“点击有惊喜”区域鼠标放上去出现颜色变化。
4.下面4张图片鼠标放上去呈现底图,呈现遮罩效果。
(给大家分享一个配色方案网站:在线配色方案表,网页配色设计软件,致力于为设计师提供色彩灵感 - 91在线配色神器 (91join.com),还有一个花式半径在线生成器网站:Fancy Border Radius Generator 通过它可以随意设置宽、高,以及能过鼠标拖拽来改变8个角的数值,这样就可以很方便的查看变化。)
成品图依次如下:
这里的 <link href="css属性.css" type="text/css" rel="stylesheet">是引入css样式,代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<link rel= "stylesheet" type="text/css" href="css属性.css">
</head>
<body>
<p>桌面壁纸</p>
<div class="one">
<img src="images/1.jpg" alt="1" />
<img src="images/2.jpg" alt="2" />
<img src="images/3.jpg" alt="3" />
<img src="images/4.jpg" alt="4" />
<img src="images/5.jpg" alt="5" />
<img src="images/6.jpg" alt="6" />
<img src="images/7.jpg" alt="7" />
<img src="images/8.jpg" alt="8" />
</div>
<div class="two">点击有惊喜</div>
<div class="three">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS样式:
@charset "utf-8";
/* CSS Document */
body{
background-color:#C0E0C6;
text-align: center;
}
.one{
width: 95%;
margin: 0 auto;
}
img{
width: 20%;
height: 150px;
opacity: 0.5;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
/*transition: all 3s;*/
}
img:hover{
opacity: 1.0;
border-radius: 61% 39% 70% 30% / 57% 48% 52% 43% ;
box-shadow: 5px 5px 10px 2px #c06c84 inset,-5px -5px 10px 2px #35477d inset;
}
p{
width: 300px;
margin: 0 auto;
font-size: 50px;
font-family: "微软雅黑";
font-weight: bold;
color:#ed8d8d;
text-align: center;
letter-spacing: 20px;
margin-bottom: 10px;
}
p:hover{
color: transparent;
-webkit-background-clip:text;
background-image: linear-gradient(50deg,#8a1253 0%,#c51350 30%, #e8751a 60%,#fda403 100%);
}
.two{
color:#537780;
background-color:#66c6ba;
cursor: pointer;
width: 150px;
height: 50px;
margin: 0 auto;
padding: 15px 10px;
line-height: 50px;
text-align: center;
font-size: 25px;
border-radius: 25px;
box-shadow: 0 6px #b8b0b0;
}
.two:hover{
background-color:#7dace4;
/*transition: all 1s;*/
}
.two:active{
background-color: #7dace4;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.three{
width: 95%;
margin: 25px auto;
}
.three span{
display: inline-block;
width:20%;
height: 170px;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
background-image: url("images/A6.jpg");
background-size: 100% 100%;
}
.three span:nth-child(1):hover{
background-image:url("images/9.jpg");
background-size: 100% 100%;
}
.three span:nth-child(2):hover{
background-image:url("images/A2.jpg");
background-size: 100% 100%;
}
.three span:nth-child(3):hover{
background-image:url("images/A3.jpg");
background-size: 100% 100%;
}
.three span:nth-child(4):hover{
background-image:url("images/A4.jpg");
background-size: 100% 100%;
}
.three span:nth-child(5):hover{
background-image:url("images/A5.jpg");
background-size: 100% 100%;
}
.three span:hover{
border-radius: 30px;
box-shadow: 3px 3px 3px 2px grey;
}
图片大家可以根据自己的喜好自行进行添加的哈~