过渡和变形

最新推荐文章于 2024-11-04 23:25:00 发布

睡不醒的凉白开

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量114

点赞数 3

分类专栏： CSS+HTML 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_51472673/article/details/121686215

版权

CSS+HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写在前面

第一次发文章，有很多因素的影响。主要可以借助这个平台，记录自己的学习。今天又是学习人。

正文

网页前端的学习已经快要结束，感觉自己掌握的一般般。要想学好网页，一定要多做练习，当你开始动手去实践的时候，你就迈出了很重要的一步。

在做效果的时候我出现了很多问题，但主要都体现在自己对属性的不熟悉，然后就一步一步进行，一点一点的去查资料，最后基本上实现了效果。

这是当鼠标点在图片上时，图片会发生的变换效果。

这是鼠标离开所有图片的静态效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title>过渡和变形</title>
    <style>
        .biankuang{
            width:860px;
            height:230px;
            border:black solid 2px;
            background-color: black;
        }
       
        .p1{
            width:150px;
            height:150px;
            border-radius: 5px;
            border:white solid 4px;
            position:fixed;
            top:65px;
            left:60px;
            box-shadow: #ffffff 0 0 5px;
            transition-duration: 2s;
        }
        .p1:hover{  
              transition-property: border-radius;
              border-radius: 50%;
            }  
        .w1{ 
            color:white;
            font-size: 13px;
            font-weight: 20px;
            position:fixed;
            top:30px;
            left:110px;
        }
     
	   
        .p2{ width:150px;
            height:150px;
            border-radius: 5px;
            border:white solid 4px;
            position:fixed;
            top:65px;
            left:260px;
            box-shadow: #ffffff 0 0 10px;
            overflow: hidden;
        }
         .img2{  
                display:block;
                cursor:pointer; 
                 
                transition: all 0.4s;  
            }  
             .img2:hover{  
                transform-origin: 10px 10px;
                transform: scale(1.5);
            }  
        .w2{ 
            color:white;
            font-size: 13px;
            font-weight: 20px;
            position:fixed;
            top:30px;
            left:290px;
        }
        .p3{ 
            width:150px;
            height:150px;
            border-radius: 5px;
            border:white solid 4px;
            position:fixed;
            top:65px;
            box-shadow: #ffffff 0 0 10px;
            left:460px;
            
        }
        .img3{  
                display:block;
                cursor:pointer;   
                transition: all 0.4s;  
            }  
             .img3:hover{  
            transform-origin:70% 50%;
                transform: rotate(10deg);
            }  
    
        .w3{ 
            color:white;
            font-size: 13px;
            font-weight: 20px;
            position:fixed;
            top:30px;
            left:500px;
        }
        .p4{width:150px;
            height:150px;
            border-radius: 5px;
            border:white solid 4px;
            position:fixed;
            top:65px;
            left:660px;
            box-shadow: #ffffff 0 0 10px;
            overflow: hidden;
        }
        .img4{  
                display:block;
                cursor:pointer;   
                transition: all 0.4s;  
            }  
             .img4:hover{  
                filter: grayscale(100%);
            }  
    
        .w4{ 
            color:white;
            font-size: 13px;
            font-weight: 20px;
            position:fixed;
            top:30px;
            left:710px;
        }

 
    </style>
    </head>
    <body>
        <div class="biankuang">
                <div class="w1">SHAPE</div>
                <div class="p1">
                    <img src="images/image1.jpg"  width="150" class="p1" >
                </div>
                <div class="w2">DISPLACEMENT</div>
                <div class="p2">
                    <img src="images/image2.jpg"  width="150"  class="img2" >
                </div>
                <div class="w3">POSITION</div>
                <div class="img3">
                <div class="p3">
                    <img src="images/image3.jpg"  width="150" >
                </div>
                </div>
                <div class="w4">COLOR</div>
                <div class="p4">
                    <img src="images/image4.jpg"  width="150"  class="img4" >
                </div>
        </div>
    </body>
</html>

这是完整的代码

小结

写的代码还是有点问题，有点冗余。另外，也可以利用表格去实现效果。但是在这我没有写

先这样吧，再见了。大家也要一起加油哦！