毛玻璃态卡片悬停效果

这篇具有很好参考价值的文章主要介绍了毛玻璃态卡片悬停效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果展示

毛玻璃态卡片悬停效果,CSS,css3,前端

毛玻璃态卡片悬停效果,CSS,css3,前端

页面结构组成

页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。

卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。

CSS3 知识点

  • 响应式
  • 绝对布局
  • filte 属性的 invert 值使用
  • backdrop-filter 属性

实现卡片基础布局

<div class="card">
  <div class="img_box">
    <img src="./images/Baseball.png" />
  </div>
  <div class="content">
    <div>
      <h3>棒球</h3>
      <p>
        一种团体球类运动,由人数最少为9人的两支队伍在一个扇形的棒球场进行攻击与守备。
        <a href="#">阅读更多</a>
      </p>
    </div>
  </div>
</div>
.container .card {
  position: relative;
  display: flex;
  height: 250px;
  background: #fff;
  border-radius: 20px;
  margin: 30px 0;
  width: 45%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

实现卡片图片样式

.container .card .img_box {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
  transition: 0.5s ease-in-out;
}

.container .card .img_box img {
  max-width: 100px;
  filter: invert(1);
  transition: 0.5s ease-in-out;
}

添加卡片动画效果

.container .card:hover .img_box {
  height: 150px;
  width: 150px;
  left: -75px;
  top: calc(50% - 75px);
  border-radius: 10px;
}

.container .card:hover .img_box img {
  max-width: 75px;
}

响应式样式添加

@media (max-width: 992px) {
  .container .card {
    width: 300px;
    height: auto;
    flex-direction: column;
    background: transparent;
    margin: -20px 0;
    box-shadow: none;
  }
  .container .card .img_box {
    position: relative;
    border-radius: 20px;
  }
  .container .card .img_box,
  .container .card:hover .img_box {
    width: 80%;
    height: 200px;
    top: 100px;
    left: 10%;
  }
  .container .card:hover .img_box {
    top: 80px;
  }
  .container .card .img_box img,
  .container .card:hover .img_box img {
    max-width: 100px;
  }
  .container .card .content {
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: none;
    border-radius: 20px;
    padding: 20px 40px 40px;
    border-top: 100px solid #fff;
  }
}

完整代码下载

完整代码下载文章来源地址https://www.toymoban.com/news/detail-728433.html

到了这里,关于毛玻璃态卡片悬停效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UI小姐姐说我用CSS实现毛玻璃效果的样子很帅

    123123123123123123123123123123123123123123123123123123123123123123123123123123123123 模糊了吗?确实模糊了。但是有毛玻璃效果吗?没有,毛都没有。我们看下 用backdrop-filter是什么效果的。 .card { margin: 100px auto; width: 300px; height: 300px; position: relative; border: 1px solid #000; color: white; backdrop-f

    2024年04月12日
    浏览(38)
  • 毛玻璃动画交互效果

    从上述的效果展示页面结构来看,页面布局都是比较简单的,只是元素的动画交互比较麻烦。 第一个动画交互是两个圆相互交错来回运动。第二个动画交互是三角绕着圆进行 360 度旋转。 animation animation-delay 绝对定位布局 第一个动画是两个圆来回交互运动。 第二个动画交互

    2024年02月07日
    浏览(40)
  • react native 毛玻璃效果

    https://docs.expo.dev/versions/latest/sdk/blur-view/ https://github.com/expo/expo/issues/6613     参考链接: https://chat.xutongbao.top/

    2024年02月09日
    浏览(45)
  • OpenCV轻松入门(六)——简单图片处理【马赛克、毛玻璃、浮雕效果】

    马赛克效果 马赛克指现行广为使用的一种图像(视频)处理手段,此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果,因为这种模糊看上去有一个个的小格子组成,便形象的称这种画面为马赛克。其目的通常是使之无法辨认。 下面,我们来介绍一下实现马赛克的思

    2024年04月14日
    浏览(45)
  • 在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

    backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理,模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色(RGB值为0, 0, 0),并且通过/符号后面的透明度值(32%不透明度)使背

    2024年04月09日
    浏览(50)
  • CSS悬停卡片翻转明信片效果源码附注释

    运行效果演示: HTML页面代码:

    2024年02月07日
    浏览(47)
  • 毛玻璃用户卡交互

    从效果展示可以看到,此效果都是比较常规的。主要的核心就是卡片的悬停效果。 backdrop-filter 回顾 transition transform 完整代码下载

    2024年02月08日
    浏览(46)
  • Canvas绘制毛玻璃背景分享海报

    最近重新设计了分享海报,用毛玻璃作为背景,使整体更有质感,如果没有用到canvas,毛玻璃效果其实很好实现,给元素添加一个滤镜即可(比如:filter: blur(32px)),但是实践的过程中发现,canvas在IOS端一直没有效果,查了一个文档发现IOS端不支持filter。。。有点想骂人。。

    2024年02月12日
    浏览(37)
  • 3D 毛玻璃晶质见证卡

    从上面的效果展示来看,页面主要成员是一张卡片,并且卡片上有三个小矩形,而小矩形上会展示对应的内容。 当鼠标悬停在卡片上时,卡片会随着鼠标的移动而改变视角。 transform-style 属性的 preserve-3d 值运用 transform 属性的 translateZ 值运用 VanillaTilt.js 与 translateZ 的 3D 视角

    2024年02月06日
    浏览(40)
  • Unity CommandBuffer实现毛玻璃特效

    特效可以用于一般物体,也可以应用于UI。一直想在UI中实现这么个效果,现在终于实现了。 效果如下: 应用于场景中的屏物体 应用于UI 调节Shader的参数,可以调整背景模糊和扭曲的程度,也可以调整毛玻璃的颜色,还可也换法线和纹理贴图。 原理 用到是 CommandBuffer ,其实

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包