一些常见的CSS效果实现【合集】

鼠标移动到一个元素上，另一个元素样式改变

如上图所示，鼠标hover在红色方块，蓝色方块样式改变
实现代码:蓝色方块必须写在在红色方块里面。

    <style>
      .box1{
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .box1:hover .box2{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 30px;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: -100px;
        /* transition 设置动画过渡 */
        transition: 1s  linear; 
      }
    </style>
    
    // 蓝色方块必须写在在红色方块里面
<div class="box1" >
  <div class="box2"></div>
</div>