CSS 一个好玩的卡片“开卡效果”

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

CSS 一个好玩的卡片“开卡效果”,前端杂记,css,javascript,前端,卡片,HTML文章来源地址https://www.toymoban.com/news/detail-692437.html

CSS 一个好玩的卡片“开卡效果”,前端杂记,css,javascript,前端,卡片,HTML


一、用到的一些CSS技术

  • 渐变 conic-gradient
  • box-shadow
  • clip-path
  • 变换、过渡 transformtransition
  • 动画 animation @keyframes
  • 伪类、伪元素 :hover::before::after
  • 绝对布局
  • 。。。

clip-path 生成网站
https://techbrood.com/tool?p=css-clip-path

二、实现效果

CSS 一个好玩的卡片“开卡效果”,前端杂记,css,javascript,前端,卡片,HTML

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片测试</title>

  <style>
    body{
      margin: 0;
      padding: 0;
      height: 100vh;
    }
    .wrapper{
      position: relative;
      background: #222222;
      height: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 100px;
      padding: 10px;
      flex-wrap: wrap;
    }

    .wrapper .card-box{
      position: relative;
      width: 240px;
      height: 360px;
      text-align: center;
      box-shadow: 0 0 0 14px #080808,
      0 24px 56px var(--clr);  
      background-color: var(--clr);

    }
    .wrapper .card-box .title.text{
      line-height: 4em;
    }

    .wrapper .card-box .text{
      line-height: 19em;
      letter-spacing: 8px;
      font-weight: 900;
      transform: scale(0);
      transition: 1.2s;
      filter: blur(4px);
    }
    .wrapper .card-box:hover .text{
      transform: scale(1);
      filter: blur(0);

    }

    .wrapper .card-box .mask{
      position: absolute;
      inset: 20px;
      box-shadow: 0 0 0 18px #080808;
    }


    .wrapper .card-box .icon{
      height: 100px;
      width: 100px;
      border-radius: 50%;
      margin: auto;
      position: absolute;
      inset: 0;
      border: 3px solid white;
      background: conic-gradient(var(--clr), green, var(--clr), yellow, var(--clr));
      transform: translateY(180px) scale(.1);
      opacity: 0;
      transition: all .8s 0s;

    }


    .wrapper .card-box:hover .icon{
      transition-delay: .4s;
      animation: 3s linear 1.05s infinite spin;
      transform: translateY(0) scale(1);

      opacity: 1;

    }

    @keyframes spin {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }

    .wrapper .card-box .mask span,
    .wrapper .card-box .mask::after,
    .wrapper .card-box .mask::before{
      background: #161616;
      position: absolute;
      inset: 0;
      transition: .25s;
      clip-path: polygon(0 0, 50% 40%, 100% 0);
    }
    .wrapper .card-box:hover .mask span{
      transition-delay: 0;
      clip-path: polygon(0 0, 50% 0%, 100% 0);

    }


    .wrapper .card-box .mask::before{
      transition-delay: .2s;
      clip-path: polygon(0 0, 40% 50%, 50% 100%, 0% 100%);
      content: "";
    }
    .wrapper .card-box:hover .mask::before{
      clip-path: polygon(0 0, 0 100%, 50% 100%, 0% 100%);

    }

    .wrapper .card-box .mask::after{
      transition-delay: .4s;
      clip-path: polygon(100% 0, 60% 50%, 50% 100%, 100% 100%);
      content: "";
    }
    .wrapper .card-box:hover .mask::after{
      clip-path: polygon(100% 0, 100% 100%, 50% 100%, 100% 100%);

    }

  </style>
</head>
<body>

  <div class="wrapper">
    <div class="card-box" style="--clr: red;">
      <h3 class="title text">啥也没有<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

    <div class="card-box" style="--clr: blue;">
      <h3 class="title text">啥也不是<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

    <div class="card-box" style="--clr: violet;">
      <h3 class="title text">啥也啥也<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

  </div>
  
</body>
</html>

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

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

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

相关文章

  • 前端学习记录~2023.7.17~CSS杂记 Day9

    由于有很多知识非常符合直觉或者和其他语言有通用性,因此个人觉得不需要全部记下来,本篇只记录一些个人觉得需要注意或单独记忆的知识点。 同时为了提高效率和减少对不重要内容的时间投入,会考虑更加精简。 相比前两篇,本篇更详细记录了浮动、定位和多列布局

    2024年02月17日
    浏览(43)
  • 前端学习记录~2023.7.16~CSS杂记 Day8

    由于有很多知识非常符合直觉或者和其他语言有通用性,因此个人觉得不需要全部记下来,本篇只记录一些个人觉得需要注意或单独记忆的知识点。 同时为了提高效率和减少对不重要内容的时间投入,会考虑更加精简。 相比上一篇总览,本篇更详细记录了正常布局流、弹性

    2024年02月17日
    浏览(35)
  • 前端学习记录~2023.7.15~CSS杂记 Day7

    由于有很多知识非常符合直觉或者和其他语言有通用性,因此个人觉得不需要全部记下来,本篇只记录一些个人觉得需要注意或单独记忆的知识点。 同时为了提高效率和减少对不重要内容的时间投入,会考虑更加精简 本篇是布局概览,下一篇会把各部分再详细整理。 本篇主

    2024年02月16日
    浏览(38)
  • CSS实现一个交互感不错的卡片列表

    横向滚动 鼠标悬停时突出显示 默认堆叠展示 鼠标悬停时,完整展示当前块+适当旋出效果 移动端样式优化、磁吸效果 美化滚动条 flex 布局 css 简单变换+过渡 transform、transition 渐变色函数 linear-gradient … 伪类、伪元素 滚动条、::after、 ::before …

    2024年02月11日
    浏览(41)
  • 前端常用js、css效果

    效果 主要整理了几个常用的,方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下移动 樱花飘落 添加插件sakura.js就可以了,不用什么代码

    2024年02月02日
    浏览(42)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 分享一个CSS的垂帘效果

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 先上效果图: 再上代码: 代码直接粘贴到html页面就能使用,顺滑的不可言说

    2024年02月01日
    浏览(54)
  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具,可

    2024年02月12日
    浏览(39)
  • 如何使用CSS实现一个平滑过渡效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月12日
    浏览(47)
  • 前端必学的CSS3波浪效果演示

    使用 translateX 和 translateZ 属性创建波浪效果: 使用场景: 适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。 可以用于创建具有起伏效果的海浪、水面波纹等效果。 优点: 通过3D变换,可以实现更加真实的波浪效果。 可以通过调整 translateX 和 translateZ 的值来控制波浪

    2024年02月02日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包