图片过度与变形的综合运用

最新推荐文章于 2024-10-06 23:37:55 发布

syc暮云。

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量207

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/zzfr_llex/article/details/105122418

版权

2、图片的主网页

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>我的图片</title>
 <link rel="stylesheet" type="text/css" href="css/第七周作业样式表.css">
 </head>
 <body>
  <div class="box">
  <div class="p">
  shape
  <div class="b">
   <img src="img/头像1.jpg" alt="" />
  </div>
  </div>
  <div class="p">
  displacement
  <div class="b">
  <img src="img/头像4.jpg" alt="" />
  </div>
  </div>
  <div class="p">
  position
  <div class="b">
   <img src="img/头像3.jpg" alt="" />
   </div>
  </div>
  <div class="p">
  color
  <div class="b">
   <img src="img/头像2.jpg" alt="" />
   </div>
  </div>
  </div>
 </body>
 </body>
</html>

2、图片的一些样式

.box{
   width:800px;
   height:250px;
   background-color:#000000;
   margin:100px auto;
  }
  .box .p{
   width:150px;
   height: 150px;
   margin-left: 30px;
   margin-top: 30px;
   font-size:12px;
   color:hotpink;
   text-align: center;
   float:left;
  }
  .box .p .b{
   width:150px;
   height: 150px;
   margin-top: 10px;
   border:5px solid black;
   border-radius:5px;
  }
  .box .p .b img{
   width:150px;
   height:150px;
  }
  .box .p:nth-child(1) .b:hover{
   border-radius:30%;
  }
  .box .p .b{
   width:150px;
   height: 150px;
   margin-top: 10px;
   border:5px solid white;
   border-radius:5px;
   transition:all 0.5s;
  }
  .box .p .b img{
   width:150px;
   height: 150px;
   transition: all 0.5s;
  }
  .box .p:nth-child(2) .b img:hover{
   transform: scale(2);
  }
  .box .p .b{
   width:150px;
   height: 150px;
   margin-top: 10px;
   border:5px solid black;
   border-radius:5px;
   transition:all 0.5s;
   overflow: hidden;
  }
  .box .p:nth-child(3) .b:hover{
   transform:rotate(30deg);
  }
  .box .p:nth-child(4) .b img:hover{
   filter:grayscale(100%)
  }
  .box .p .b:hover{
   box-shadow:0px 0px 40px plum;
  }