前端实训-遮罩+遮罩动画

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>遮罩</title><style>.box{background-color: #5F9EA0;position: absolute;top: 0px;left: 0px;line-height: 0px;}.cover{position: absolute;left: 0px;bottom: 0px;height: 100%;width: 100%;/*设置透明度需要用rgba这个函数第四个参数为透明度范围（0~1），1为实体，0为透明*/background-color: rgba(167,192,220,0.5);/*做动态遮罩，先让原来的全部遮盖，再让他消失，再做下面的操作*/display: none;}/*动态遮罩*/.box:hover .cover{/*父级的尾类控制子集的属性*/display: block;}</style></head><body><div class='box'><img src="img/61454401f855cf5ed64747a6ac04bae5.webp"><div class='cover'></div></div></body>
</html>

遮罩动画

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{height: 200px;width: 200px;position: relative;line-height: 0px; /*取消小边界*/}.box>img{height: 100%;width: 100%;}.box1{height: 200px;width: 500px;position: relative;line-height: 0px;   /*取消小边界*/}.box1>img{height: 100%;width: 100%;}.box .cover{background-color: rgba(255,255,255,0.3);height: 0%;width: 100%;position: absolute;top: 0px;left: 0px;transition: all 500ms;    /*所有的属性发生变化*/}.box:hover .cover{/*鼠标移上去hover事件*/height: 100%;}.box1 .coverleft{background-color: rgba(255,255,255,0.3);height: 100%;width: 50%;position: absolute;top: 0px;left: 0px;transition: all 500ms; /*所有的属性发生变化*/}.box1:hover .coverleft{/*鼠标移上去hover事件*/width: 0%;}.box1 .coverright{background-color: rgba(255,255,255,0.3);height: 100%;width: 50%;position: absolute;top: 0px;right: 0px;transition: all 500ms; /*所有的属性发生变化*/}.box1:hover .coverright{/*鼠标移上去hover事件*/width: 0%;}.box1 .covertop{background-color: rgba(255,255,255,0.3);height: 50%;width: 100%;position: absolute;top: 0px;transition: all 500ms; /*所有的属性发生变化*/}.box1:hover .covertop{/*鼠标移上去hover事件*/height: 0%;}.box1 .coverbottom{background-color: rgba(255,255,255,0.3);height: 50%;width: 100%;position: absolute;bottom: 0px;transition: all 500ms;    /*所有的属性发生变化*/}.box1:hover .coverbottom{/*鼠标移上去hover事件*/height: 0%;}.box2{height: 200px;width: 600px;line-height: 0px;position: relative;}.box2>img{/*box2下的img高度宽度都是100%*/height: 100%;width: 100%;}.rl_cover{position: absolute;left: 50%;height: 100%;width: 0px;top: 0px;background-color: rgb(255,255,255);opacity: 0.8;/*整体的透明度*/transition: all 0.5s;}.box2:hover .rl_cover{width: 100%;left: 0px;opacity: 0;}.tb_cover{position: absolute;left: 0px;height: 0px;width: 100%;top: 50%;background-color: rgb(255,255,255);opacity: 0.8;/*整体的透明度*/transition: all 0.5s;}.box2:hover .tb_cover{height: 100%;top: 0px;opacity: 0;}</style></head><body><div class='box'><img src='img/product.jpg'/><div class='cover'></div></div><div class='box1'><img src='img/QQ截图20210628163750.png'/><div class='coverleft'></div><div class='coverright'></div><div class='covertop'></div><div class='coverbottom'></div></div><!--双重遮罩--><div class='box2'><img src='img/QQ截图20210628163750.png'/><div class='rl_cover'></div><div class='tb_cover'></div></div></body>
</html>

前端实训-遮罩+遮罩动画相关推荐

Web前端实训两天记录
文章目录 Web前端实训两天记录实训前言 HTML+CSS基础知识第一天内容 01.html 02.html 03.html 04.html 05.html 第二天内容 01边框.html 02内 ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript
web前端实训大作业:餐饮网站设计--美食城(5个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
前端实训-----摆弄形状、浮动，高度塌陷等
1.摆弄形状代码 HTML文件 <html><head><title>摆弄形状</title><!-- 我们应该在此<head>标记中 ...
web前端实训作业 html+css+javascript 水果超市网页设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
小学期前端实训笔记（2）-css【菜狗级】
CSS css基本语法选择器{属性:值属性:值 } 选择器:选中页面中的标签. 属性:设置标签的特性,特征. 值:与属性相对应的值. 三种形式行内样式在HTML标签上,使用style的属性设置c ...
计算机软硬件作品构思报告,计算机方面的实训报告
仅供参考: 实训项目任务书项目名称:动画设计制作系别: 计算机工程系专业: 数字媒体设计班级: 1 3 1 /132 学生姓名: 指导教师: ### 北信 2004 年 12 月 19 ...
元宇宙何以赋能教育丨虚拟动力高校动作捕捉与虚拟实训室解决方案
智慧· 教育体系随着智慧教育体系不断创新,越来越多高校以元宇宙教育发展方向为研究切入点,深入探索教育新模式.教育资源分配研究.课堂沉浸度研究.虚拟实验场景研究和硬件技术创新研究等问题,探索新型教 ...
php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
【实训总结】Python从入门到前端知识小结，再到Flask框架搭建在线书城~
实训小结:Python入门到爬虫 Python实训一.基础入门 1. 行业 2. 搭建开发环境 3.如何使用PyCharm创建一个Python项目 4. 如何在Pycharm创建的Python项目中 ...

前端实训-遮罩+遮罩动画

前端实训-遮罩+遮罩动画相关推荐

最新文章

热门文章