来自歪果仁的CSS曲线卡片 + 动态模糊舒展渐变动画

最新推荐文章于 2024-08-23 11:10:08 发布
最新推荐文章于 2024-08-23 11:10:08 发布
阅读量15 收藏
点赞数
文章标签： css 前端
原文链接：https://mp.weixin.qq.com/s/ZiY8c5mFuclc_2OEwktUJQ
版权

在这里插入图片描述

html代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Design | CSS Cards</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="imgBx" style="--img: url(../images/img1.jpg)"></div>
        <div class="content">
          <h3>New Design<br><span>2 Hours ago</span></h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem error iure sequi neque animi!
            Harum?</p>
        </div>
      </div>
      <div class="card">
        <div class="imgBx" style="--img: url(../images/img2.jpg)"></div>
        <div class="content">
          <h3>CSS Only<br><span>5 Hours ago</span></h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem error iure sequi neque animi!
            Harum?</p>
        </div>
      </div>
    </div>
  </body>
</html>

css代码



body {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
  font-family: 'Poppins', sans-serif;
}

.container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 50px;
}

.container .card {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 40px;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
  transition: 0.5s;
  overflow: hidden;
}

.container .card:hover {
  height: 420px;
}

.container .card .imgBx {
  position: relative;
  width: 100%;
  height: 260px;
  background-color: #555;
  background-image: var(--img);
  background-size: 100%;
  background-position: center;
  transition: 0.5s;
  filter: blur(25px);
}


.container .card:hover .imgBx{
  background-size: 120%;
  filter: blur(0);
}

.container .card .imgBx::before {
  content: '';
  position: absolute;
  bottom: -40px;
  width: 100%;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
}

.container .card .imgBx::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 40px;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color:transparent;
  border-radius: 50%;
  box-shadow: 75px 70px 0 40px #fff;
}


.container .card .content {
  position: relative;
  top: -40px;
  padding: 0 30px;
  transition: 0.5s;
  z-index: 10;
}



.container .card .content h3 {
  position: relative;
  font-size: 1.25em;
  color: #333;
}

.container .card .content h3 span {
  position: absolute;
  bottom: -15px;
  font-weight: 400;
  font-size: 0.65em;
  opacity: 0.75;
}

.container .card .content p {
  position: relative;
  opacity: 0;
  transition: 0.5s;
  color: #333;
}


.container .card:hover .content p {
  opacity: 1;
  transition-delay: 0.2s;
}

转自公众号： 枫瑞博客网
如有侵权 请联系删除

陈钇谷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
歪果仁网站自制Windows 11
TheBlueMarble的博客
11-21 574
天哪，和真的一模一样！ 首先，外观方面，还是挺不错的，“控制中心”的位置改变了，轻点网络小图标，就会有一个全新的“控制中心”。里边儿比Windows 10要简洁一点，还有个“Theme”按键，点一下就可以切换为“深色模式”： 其次，APP方面，“Store”是能点开的，里边儿的APP目不暇接： 就是不能下载???? 但它配备一个VS Code，还是能运行的那种： 下面来看一看“开始”菜单： 这里软件挺多的，但只有10%左右的才能打得开...... 桌面上有一个“Spootify”,..
大一学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)-咖啡 6页
11-21 146
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐 美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计与制作 | 美食主题网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
web前端期末大作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript
网页设计与制作
11-17 433
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
歪果仁眼中的中国科技界必须知道的7件事
天地会珠海分舵
09-08 1753
注：本文来自Medium， 中文版由天地会珠海分舵编译。文章中有些观点可能存在偏颇，请读者自行决断。 中国是个神奇的国度，有很多东西是坏果仁所不知道的。以下列出在中国科技界你必须知道的7个事实。中国13亿人中有一半没有网络接入一个正在打电话的农民所用的是功能机，而非智能手机。根据最近的一次研究，47.9%的中国人是没有接入互联网的。但中国的一些互联网初创企业及一些大企业却跟投资人和客户说，他们的目标
【英文】当歪果仁说"thank you"，怎样回答才地道？
小白兔的窝
03-23 4071
如果你做了一件很值得感激的事情，外国朋友感激对你说：Thank you!这时你该如何回答呢？You're welcome？但是！据美国新闻聚合类网站Buzzfeed介绍，对于母语是英文的老外来说，回答you're welcome其实是个误会…听到 you’re welcome，歪果仁的真实感受其实是…虽然在美国，大家还是能遇到在Thank you后回答you're welcome的人。但是听到这句...
服务器遭遇挖矿脚本入侵，歪果仁玩的真花
王声声的博客
03-21 1897
【代码】服务器遭遇挖矿脚本入侵，歪果仁玩的真花。
Git歪果仁
tterminator的专栏
09-27 364
一、目标本博文中介绍的git操作要达到的目标为：使用同一分支，回滚到之前的某一历史版本A，但是还保留从该历史版本A到当前版本的提交历史。 例如分支master有如下提交历史： 要达到的目标为：回滚到commit 1，但是还要保存commit 2和commit 3的提交历史，也即再次提交时，提交历史为： commit 1—> commit 2—>commit 3—>commit 4二、具体操
二狗与歪果仁 java I/O 字符流
weixin_44413364的博客
04-16 148
直接放代码： 边打边学 可能引起你的恐惧的代码那里已经标记好。最下面已经给你解释好了那段标记的代码。恐惧了就看一下解释。激励一下自己。 //做法一: 一次读一个字符,默认字符编码是OS默认编码，本程序是gbk import java.io.*; public class IOStreamTest { public static void ...
前端学习之CSS
weixin_44362089的博客
10-20 2753
前段端学习之CSS,层叠样式表，HTML，三种方式
AutoJs源码-QQ模仿歪果仁语调
11-15
AutoJs源码-QQ模仿歪果仁语调。本资源购买前提醒：本源码都是实际autojs项目模板，安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己...
歪果仁的MD6键盘手柄电路图
10-25
在电子游戏领域，控制器的设计与功能至关重要，而“歪果仁的MD6键盘手柄电路图”提供了一种独特的设计思路，旨在为Sega MD（Mega Drive）游戏机打造一个非单片机驱动的键盘手柄。这种设计基于数字电路技术，虽然未经...
又一个歪果仁的MD手柄电路图
10-25
标题中的“又一个歪果仁的MD手柄电路图”表明这是一个关于SEGA Mega Drive（简称MD）游戏机手柄的电路设计，由非中国籍的设计师创作。MD手柄通常具有6个按键，这也是标签中提到的关键点，通常包括A、B、C、X、Y、Z六...
歪果仁设计的很复杂的MD6键手柄电路图
10-25
2. **微控制器（MCU）**：可能有一个或多个微控制器，作为整个手柄的中央处理器，负责接收和处理来自各个按键的输入信号，并可能与游戏主机通信。 3. **编码器**：可能包含专门的编码器IC，用于将物理按键的机械...
歪果仁的中文课本长啥样？
08-19
歪果仁的中文课本长啥样？
CSS——弹性盒（flex）
Fan_web的博客
08-16 1509
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 575
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
只用一个 HTML 元素可以写出多少形状？——伪元素篇（下）
Conan9912345的博客
08-21 708
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
CSS 中处理文本溢出并隐藏它
最新发布
m0_64036296的博客
08-23 146
要在 CSS 中处理文本溢出并隐藏它，通常会用到以下几个属性。我们可以通过对每个属性的作用进行详细说明，并提供一个全面的使用案例。
夏威夷果开口机设计国外研究现状
05-20
关于夏威夷果开口机的设计，国外已经有一些研究现状。目前，主要的研究方向是通过机械力、热力学、声学等方面的研究，探索夏威夷果开口机的设计与优化。以下是一些具体的研究成果： 1. 机械力方面的研究：加拿大的一项研究使用了一种新型的夏威夷果开口机，通过机械力的作用将夏威夷果从外壳中分离出来，同时尽量减少损坏夏威夷果仁的情况。 2. 热力学方面的研究：美国的一项研究提出了一种新型的夏威夷果开口机，利用高压水蒸汽对夏威夷果仁进行加热，使其外壳松动，从而实现夏威夷果的开口。 3. 声学方面的研究：英国的一项研究使用了一种新型的夏威夷果开口机，通过声波的作用将夏威夷果从外壳中分离出来，该方法具有高效、快速的特点。 总的来说，国外的研究主要集中在夏威夷果开口机的设计与优化方面，通过不同的方法实现夏威夷果的开口，提高夏威夷果的开口率和产量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值