关于HTML简单缩放和旋转样式

最新推荐文章于 2023-11-16 11:32:30 发布

逸风

最新推荐文章于 2023-11-16 11:32:30 发布

阅读量271

点赞数

分类专栏： HTML响应式文章标签： HTML响应式

本文链接：https://blog.csdn.net/qq_43740174/article/details/103023921

版权

HTML响应式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

body主体就写四个li

第一个
第二个
第三个
第四次

    </ul>
</div>
在css样式里面写入
*{
    padding: 0px;
    margin: 0px;
}
div ul{
    display: flex;
    flex-flow: row ;
    list-style: none;
}
li{
    height: 200px;
     line-height: 200px;
     border-radius: 20px;
     margin: 50px;
     border-radius: 20px;
}

.demo{
    background: blue;
}

.demo:hover{
    transform: scale(1.5,1.5) rotate(360deg);
     transition: all 3s ease 0.1s;
     
    
     border-radius: 20px;
}
.dem1{
    background:blueviolet;
}
.dem1:hover{
    transform: scale(1.5,1.5) rotate(360deg);/*这里是关于缩放和旋转的方向*/
     transition: all 3s ease 0.1s;/* 这里是过渡的写法*/
    
     border-radius: 20px;
}
.dem2{
    background:greenyellow;
}
.dem2:hover{
    transform: scale(1.5,1.5) rotate(360deg);
     transition: all 3s ease 0.1s;
    
     border-radius: 20px;
}
.dem3{
    background:green;
}
.dem3:hover{
    transform: scale(1.5,1.5) rotate(360deg);
     transition: all 3s ease 0.1s;
    
     border-radius: 20px;
}