实验：过渡与变形

最新推荐文章于 2024-06-17 09:49:21 发布

Zdmzb

最新推荐文章于 2024-06-17 09:49:21 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/Zdmzb/article/details/105114010

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   #hei{
    width: 700px;
    height: 200px;
    background: black;
   }
     div[id^=text]{
    text-align: center;
    font-family: "微软雅黑";
    color: white;
    font-size:10px;
    display:inline-block;
    margin: 10px 55px 10px 62px;
     }
     div[id^=img]{
    width: 100px;
    height: 100px;
    border-radius: 4px;
    border:solid 4px white;
    display: inline-block;
    margin-left: 20px;
     }
     #img1{
       background-image: url(1.png);
       background-size: 100px;
       transition: 3s ease;
     }
     #img1:hover{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:solid 4px white;
    box-shadow: rgba(255,255,255,0.5) 10px 7px 10px;  
 1    }
     #img2{
       background-image: url(2.png);
       background-size: 100px;
       transition: 3s ease;
     }
     #img2:hover{
    border-radius: 4px;
       border:solid 4px white;
    transform: scale(1.1); 
    box-shadow: rgba(255,255,255,0.5) 10px 7px 10px;
     }
     #img3{
       background-image: url(3.png);
       background-size: 100px;
       transition: 3s ease;
     }
     #img3:hover{
       width: 100px;
       height: 100px;
    transform:rotate(360deg);
       border:solid 4px white;
    box-shadow: rgba(255,255,255,0.5) 10px 7px 10px;
     }
     #img4{
       background-image: url(4.png);
       background-size: 100px;
       transition: 3s ease;
     }
     #img4:hover{
       width: 100px;
       height: 100px;
       opacity: 0.5;
       border:solid 4px white;
    box-shadow: rgba(255,255,255,0.5) 10px 7px 10px;
     }
  </style>
 </head>
 <body>
  <div id="hei">
   <div>
   <div id="text1">dog</div>
   <div id="text2">dog</div>
   <div id="text3">dog</div>
   <div id="text4">dog</div>
   </div>
   <div id="img1"></div>
   <div id="img2"></div>
   <div id="img3"></div>
   <div id="img4"></div>
  </div>
 </body>
</html>