一、效果展示

二、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {background-color: black;}.box {width: 250px;height: 300px;border-radius: 50%;border: 4px solid white;overflow: hidden;position: relative;box-shadow: 0 0 30px skyblue;display: inline-block;margin: 10px;}/* 遮罩层 */.box .cover {position: absolute;background-color: black;/* 遮罩层尺寸设置和box一样 */width: 250px;height: 300px;border-radius: 50%;opacity: 0;                 /* 隐藏 */transform: scale(0);        /* 缩放效果 */transition: all 1s ease;  /* 所有动画1s内完成 *//* 设置文字展示 */font-size: 50px;line-height: 300px;text-align: center;font-family: "楷体";}/* 鼠标经过时的遮罩层 */.box:hover .cover {opacity: 0.5;transform: scale(1);       /* 当鼠标经过时有个从0~1的缩放效果 */}/* 调整路飞图片的展示 */.box #lufei_img {height: 100%;position: absolute;left: -15px;}/* 调整索隆图片的展示 */.box #suolong_img {height: 100%;position: absolute;left: -50px;}/* 调整娜美图片的展示 */.box #namei_img {height: 100%;position: absolute;left: -20px;}.box #wusupu_img {height: 100%;position: absolute;left: -30px;}.box #shanzhi_img {height: 100%;position: absolute;left: -20px;}</style></head><body><div class="box"><img src="./img/cover_lufei.png" alt="" id="lufei_img"><div class="cover" style="color: red;">路飞</div></div><div class="box"><img src="./img/cover_suolong.png" alt="" id="suolong_img"><div class="cover" style="color: green;">索隆</div></div><div class="box"><img src="./img/cover_namei.png" alt="" id="namei_img"><div class="cover" style="color: orange;">娜美</div></div><div class="box"><img src="./img/cover_wusuopu.png" alt="" id="wusupu_img"><div class="cover" style="color: seagreen;">乌索普</div></div><div class="box"><img src="./img/cover_shanzhi.png" alt="" id="shanzhi_img"><div class="cover" style="color: yellow;">山治</div></div></body>
</html>

【前端小实战】遮罩层动画效果相关推荐

css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
浏览器中遮罩层镂空效果的多种实现方法
前端开发中我们有时候会做到页面遮罩层镂空的效果,那什么是页面遮罩层镂空效果,我们先来看一看下图的这个效果.下图是我昨天在实际工作中完成的页面效果: 做这个效果的时候有以下注意的地方: 1.兼容IE7及 ...
css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
小程序遮罩层（阻止事件穿透）
小程序遮罩层(阻止事件穿透) 若弹出层没有滚动事件直接在蒙板上加catchtouchmove="preventTouchMove" 即可 <view class=&quo ...
Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果
功能分析: 1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中: 2.小火箭挂载在手机窗体 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
html5鼠标滑过图片图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法在页面中引入boot ...
html 将图片镂空,遮罩层镂空效果的多种实现方法
先看看效果 [ 方法一:截图模拟实现 ] 原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上. 优点:原理简单:兼容性好,可以兼容到IE6.IE7:可以同时实现镂空多个. 缺点 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...

【前端小实战】遮罩层动画效果

文章目录

一、效果展示

二、完整代码

【前端小实战】遮罩层动画效果相关推荐

最新文章

热门文章