基于css简易实现头像更换动画效果

  已经好久没有写博客了，今天写个简单的小需求功能实现回归一下学习之路。

需求描述

  个人主页头像实现更换图像动画效果

思路

  基于两个div块 通过css样式实现该效果

模拟效果预览

具体实现

  首先，定义两个大小一样的div块，并且是父子关系，各自定义好类名，具体代码如下：

<template>
 <div class="aaa">
    <div class="bbb">
      <i class="el-icon-delete"></i>
    </div>
  </div>
</template>
<style>
.aaa {
	width: 100px;
	height:100px;
	background: red;
	.bbb {
		width: 100px;
		height: 100px;
		background: green;
	}
}
</style>

  最初的效果是这样的

  接下来我们要实现光标移入div展示删除图标"遮罩层"的效果，我们需要借助css样式中的hover，我们给外层div设置一个背景图，并且切换成圆形，并且使用flex布局使内部元素居中展示，最终代码如下

<style>
 .aaa {
    width: 100px;
    height: 100px;
    background-image: url('https://travelfirst.oss-cn-chengdu.aliyuncs.com/images/开发常用图片/14.png');
    background-size: 100% 100%; /*宽高都100%*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .bbb {
      display: none;
    }
    &:hover {
      .bbb {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: rgba(59, 60, 61, 0.5);
        cursor: pointer;
      }
    }
  }
</style>

  当光标移入前，内层div默认隐藏，当光标移入后，让其展示，通过&:hover实现。
  这样，我们就基本实现了个人主页更换图像的动画效果，后续我们再在内层div的具体标签上(如这里的i标签)绑定事件即可实现真正的功能。

真实场景展示