基于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标签)绑定事件即可实现真正的功能。

真实场景展示

基于css简易实现头像更换动画效果相关推荐

【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
css 毛玻璃_CSS实现雨滴动画效果
今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. 其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果一滴雨雨滴的效果就很巧 ...
html制作的动态粒子图像,一种基于AnimateCC+Canvas的随机粒子动画效果设计
潘博摘要:粒子动画是一种应用广泛的动画效果,也有不同的制作方法.Animate CC是Flash的延续和发展,在动画制作方面功能强大,而Canvas是HTML5在网页中绘制图形.制作动画的核心元素. ...
web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...