HTML—盒子模型制作

最新推荐文章于 2024-06-18 20:16:03 发布

夏天YWQ

最新推荐文章于 2024-06-18 20:16:03 发布

阅读量1.8k

点赞数 59

文章标签： html 前端

本文链接：https://blog.csdn.net/YWQ13447969/article/details/137956031

版权

本文介绍了大学生如何通过CSS实现静态页面的动态效果，如标题渐变、图片变换、鼠标悬停时的颜色和遮罩效果，以及使用在线资源辅助设计过程。

摘要由CSDN通过智能技术生成

大学生作业练习之盒子模型制作，即鼠标放到指定位置相应图形出现效果改变。

先来看一下静止页面，即鼠标未动情况下的效果图。

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;
}