HTMLCSS:旋转的动态卡片

news2024/11/14 11:02:25

效果演示

这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画,增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。

HTML

  <div class="card">
      <h3>前端Hardy</h3>
  </div>

CSS

html,body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow: hidden;
    background: #f7d6ff;
    background-image: linear-gradient(to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);
}

.card {
    width: 190px;
    height: 254px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
}

.card h3 {
    z-index: 1;
    color: white;
    font-size:  1em;
}

.card::before {
    content: '';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
}

@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card::after {
    content: '';
    position: absolute;
    background: #07182E;
    ;
    inset: 5px;
    border-radius: 15px;
}
html, body:
  • width: 100vw: 宽度设置为视口宽度的100%。
  • height: 100vh: 高度设置为视口高度的100%。
  • display: flex: 使用 Flexbox 布局。
  • justify-content: center: 水平居中。
  • align-items: center: 垂直居中。
  • margin: 0: 移除外边距。
  • overflow: hidden: 隐藏溢出的内容。
  • background: 设置背景颜色和渐变,从左上到右下的渐变色。
.card: 定义卡片的样式。
  • width: 190px: 宽度为190像素。
  • height: 254px: 高度为254像素。
  • background: #07182E: 背景颜色为深蓝色。
  • position: relative: 相对定位。
  • display: flex: 使用 Flexbox 布局。
  • place-content: center: 水平居中。
  • place-items: center: 垂直居中。
  • overflow: hidden: 隐藏溢出的内容。
  • border-radius: 20px: 圆角为20像素。
.card h3: 定义卡片内标题的样式。
  • z-index: 1: 堆叠顺序为1。
  • color: white: 文本颜色为白色。
  • font-size: 1em: 字体大小为1em。
.card::before: 背景动画。
  • content: “”: 伪元素的内容为空。
  • position: absolute: 绝对定位。
  • right: 0: 靠右对齐。
  • top: 0: 顶部对齐。
  • height: 7px: 高度为7像素。
  • width: 45px: 宽度为45像素。
  • border-radius: 4px: 圆角。
  • box-shadow: 创建多个阴影效果,模拟加载器的动画效
.card::after: 用于增加额外的样式效果。
  • content: ‘’: 伪元素的内容为空。
  • position: absolute: 绝对定位。
  • background: #07182E: 背景颜色为深蓝色。
  • inset: 5px: 内边距为5像素。
  • border-radius: 15px: 圆角为15像素。
动画
  • @keyframes rotBGimg: 定义名为 rotBGimg 的关键帧动画,用于旋转背景。from: 从0度开始,to: 旋转到360度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236470.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入Pillow:处理图像下载中的意外挑战

在当今数字化时代&#xff0c;获取和处理图像数据已经成为了许多应用程序的核心功能。从社交媒体到电子商务&#xff0c;图像的获取和处理对于用户体验至关重要。下载图片不仅能够丰富我们的内容&#xff0c;还能够通过分析图像数据为我们的应用提供更多价值。然而&#xff0c;…

管理 Elasticsearch 变得更容易了,非常容易!

作者&#xff1a;来自 Elastic Ken Exner Elasticsearch 用户&#xff0c;我们听到了你的心声。管理 Elasticsearch 有时会变得很复杂&#xff0c;面临的挑战包括性能调整、问题检测和资源优化。我们一直致力于简化你的体验。今天&#xff0c;我们宣布了自收购 Opster 以来的一…

Linux挖矿病毒(kswapd0进程使cpu爆满)

一、摘要 事情起因:有台测试服务器很久没用了&#xff0c;突然监控到CPU飙到了95以上&#xff0c;并且阿里云服务器厂商还发送了通知消息&#xff0c;【阿里云】尊敬的xxh: 经检测您的阿里云服务&#xff08;ECS实例&#xff09;i-xxx存在挖矿活动。因此很明确服务器中挖矿病毒…

【go从零单排】迭代器(Iterators)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;迭代器的实现通常不是通过语言内置的迭代器类型&#x…

(混乱版)数据冒险-ld,sub和and

第一张图没有数据转发 从这张图来看&#xff0c;如果没有数据转发机制&#xff0c;流水线的执行会出现更多的停顿。这种情况下&#xff0c;数据依赖只能通过**插入停顿周期&#xff08;stalls&#xff09;**来解决。具体分析如下&#xff1a; 指令序列 ld r1, 0(r2)&#xf…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

shodan[3](泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面&#xff0c;了解网络安全领域的见闻&#xff0c;了…

【OD-支持在线评测】数字涂色(100分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1081 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

k8s 上如何跑 Dolphins 模型

接着上一篇的介绍&#xff0c;这一篇就来跑跑 Dolphins 模型&#xff0c;本篇会记录&#xff0c;跑模型常见的阬点。 1 在 k8s 上创建 pod 将外部数据挂载在 pod 里&#xff0c;并申请 gpu 资源。同时修改代码里对应的引入数据的路径 # dolphins.yaml apiVersion: v1 kind: …

如何避免数据倾斜

1、数据倾斜的表现 数据倾斜是由于数据分布不均匀&#xff0c;造成数据大量的集中到一点&#xff0c;造成数据热点的现象。 主要表现&#xff1a;任务进度长时间维持在 99%或者 100%的附近&#xff0c;查看任务监控页面&#xff0c;发现只有少量 reduce 子任务未完成&#xff0…

计算机网络综合题

IP数据报的划分 CRC差错检测 冗余码的计算 因此&#xff0c;余数是1110&#xff0c;传输的数为11010110111110。在传输过程中最后两位变成o&#xff0c;接收端能够发现&#xff0c;因为11010110111110除以10011余数不为0。 子网划分 暴力求解法 &#xff08;定长子网划分大量…

O-RAN前传Spilt Option 7-2x

Spilt Option 7-2x 下行比特处理上行比特处理相关文章&#xff1a; Open Fronthaul wrt ORAN 联盟被称为下层拆分(LLS)&#xff0c;其目标是提高电信市场的灵活性和竞争力。下层拆分是指无线电单元(RU) 和分布式单元(DU) 之间的拆分。 O-RAN前传接口可以在 eCPRI 上传输。eCPR…

淘酒屋殷卓荣窖主高端客户私享答谢晚宴暨意大利摩罗斯酒庄之夜

一边是热爱&#xff0c;一边是事业&#xff0c;鱼与熊掌兼得淘酒屋殷卓荣窖主答谢晚宴圆满结束 淘酒屋殷卓荣窖主高端 VIP 客户私享答谢晚宴暨意大利摩罗斯酒庄品鉴之夜在广州四季酒店 99 楼圆满举办 2024 年 11 月 8 日晚&#xff0c;一场别开生面的淘酒屋殷卓荣窖主高端 VI…

SQL EXISTS谓词

谓词时返回值为真值&#xff08;true、false或unknown&#xff09;的函数。EXISTS与其他谓词不同&#xff0c;它接受的参数是行的集合。 输入值为一行的谓词叫做“一阶谓词”&#xff08;例如>、<、 及 LIKE等&#xff09;&#xff1b;输入值为行的集合的谓词叫做“二阶…

鸿蒙进阶-属性动画

hello大家好啊&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习鸿蒙中的动画属性。 先来说说动画~ 属性值的变化&#xff0c;通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】&#xff0c;反之这个过程将在一瞬间完成&#xff0c;用户体验不好&#xff…

算法每日练 -- 双指针篇(持续更新中)

介绍&#xff1a; 常见的双指针有两种形式&#xff0c;一种是对撞指针&#xff08;左右指针&#xff09;&#xff0c;一种是快慢指针&#xff08;前后指针&#xff09;。需要注意这里的双指针不是 int* 之类的类型指针&#xff0c;而是使用数组下标模拟地址来进行遍历的方式。 …

RHCE的学习(11)

第八章 防火墙 什么是防火墙 防火墙是位于内部网和外部网之间的屏障&#xff0c;它按照系统管理员预先定义好的规则来控制数据包的进出。 分类&#xff1a; 硬件防火墙&#xff1a;由厂商设计好的主机硬件&#xff0c;其操作系统主要以提供数据包数据的过滤机制为主&#xff…

Java开发配置文件的详情教程配置文件类型

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

ffmpeg:视频字幕嵌入(GPU加速)

实现方案 参考指令 ffmpeg -i input_video.mp4 -vf "subtitlessubtitles.srt" output_video.mp4 解决因文件名称复杂导致的指令执行失败问题&#xff08;引号给文件框起来&#xff09; ffmpeg -i "A.mp4" -vf "subtitlesB.srt" "c.mp4&qu…