css土豆案例

最新推荐文章于 2024-07-25 14:15:14 发布
最新推荐文章于 2024-07-25 14:15:14 发布
阅读量111 收藏
点赞数
分类专栏： css 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxllxl211/article/details/127176742
版权 
<style>
        .tudou{
            position: relative;
            width: 444px;
            height: 320px;
            background-color: aquamarine;
            margin: 80px auto;
        }

        .tudou .t{
            width: 100%;
            height: 100%;
        }
        
        .mask{
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%; 
            background: rgba(0, 0, 0, .3) url(../css5定位/images/arr.png) no-repeat center;
        }

        /* 当鼠标经过土豆盒子，就让里面的遮罩层显示出来 */
        .tudou:hover  .mask{
            /* 显示元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudou">
        <img class="t" src="../css5定位/images/tudou.jpg" alt="">
        <div class="mask">
            <!-- <img class="t1" src="../css5定位/images/arr.png" alt=""> -->
        </div>
        
    </div>

运行结果：
在这里插入图片描述

lxl211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
土豆案例
weixin_43340289的博客
07-24 220
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
CSS显示隐藏元素案例——土豆网视频显示隐藏遮蔽罩
qq_43623147的博客
12-13 688
鼠标不移动到图片上不显示遮蔽罩鼠标移动到图片上显示遮蔽罩和播放标志 <div class="tudou"> <div class="mask"> <img src="images/tudou.jpg" alt=""> </div> .tudou { position: relative; width: 44px; height: 320px; margin: 30px auto; backgroun
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2028
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
前端学习（295）：媒体查询语法
歌谣的博客
01-02 256
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
CSS案例：土豆网鼠标经过显示遮罩
icemwj的博客
09-17 932
案例：土豆网鼠标经过显示遮罩 目的： 练习元素的显示与隐藏 练习元素的定位 核心原理： 原先半透明的黑色遮罩看不见， 鼠标经过大盒子，就显示出来。 遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。 鼠标经过显示遮罩的效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿土豆网显示隐藏遮罩案例
CSS课堂案例12-土豆网鼠标经过显示遮罩
一只小白657的博客
10-24 366
案例 鼠标经过时，显示一个黑色半透明的遮罩 目的 练习元素的显示和隐藏 练习元素的定位 核心原理： 原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来 遮罩的盒子不占有位置，就需要用绝对定位和display配合使用 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
土豆案例。。
m0_46548202的博客
12-02 682
土豆案例 核心原理： 原先半透明的黑色遮罩看不见， 鼠标经过 大盒子，就显示出来。 遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
CSS3卡通DIY马铃薯土豆表情特效代码
03-20
同时，这也是学习和实践CSS3及jQuery的一个好案例，可以帮助开发者深入理解这两者如何协同工作，创造出富有创意的网页元素。 总结一下，"CSS3卡通DIY马铃薯土豆表情特效代码"是一个结合了CSS3新特性和jQuery库的...
CSS3卡通DIY马铃薯土豆表情代码.zip
07-04
【CSS3卡通DIY马铃薯土豆表情代码】是一个利用jQuery和CSS3技术实现的创新性特效，旨在创建可互动的、生动有趣的卡通马铃薯表情。这个项目展示了如何通过编程方式来绘制图形，为网页增加趣味性和用户体验。在本案例...
纯javascript仿做土豆网豆单列表载入图片特效.zip
11-09
项目可能没有使用CSS预处理器或JavaScript库如jQuery，而是直接使用原生JavaScript编写，因此对于想要学习原生JS的开发者来说，这是一个很好的实践案例。 【标签】"css3 前端代码" 表明项目中也使用了CSS3技术，这...
沙发土豆
02-15
8. **构建工具**：为了自动化构建过程，项目可能使用Webpack或Parcel等工具，它们可以编译JavaScript、CSS、图片等资源，并进行代码压缩、合并，提高页面加载速度。 9. **响应式布局**：为了适应各种屏幕尺寸，项目...
jQuery+CSS3实现的卡通DIY马铃薯土豆表情效果源码.zip
11-06
该资源是一个基于jQuery和CSS3技术实现的卡通DIY马铃薯土豆表情效果的源代码。这个项目旨在提供一种互动的、用户可自定义的马铃薯表情制作工具，通过结合JavaScript库jQuery的强大功能和CSS3的新特性，为网页添加...
flex：1
m0_47999208的博客
07-25 386
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 956
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 306
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
css更改图片颜色
最新发布
程序员
07-25 192
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
css 作业 2
没有 bug 的代码是不完美的！
07-25 725
写完了
CSS相关记录
oThrowsException的博客
07-24 789
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
js html css案例
12-25
整个案例的编写过程中，我遇到了一些挑战，比如在CSS中如何实现页面的响应式布局，以及在JavaScript中如何实现页面元素的动态交互效果等。但是，通过不断的学习和摸索，我最终成功地完成了整个案例，并且取得了不错...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值