CSS 艺术之暗系魔幻卡牌

参考
描述
效果
支线
- HTML
- 图片
主线
- 去除元素的部分默认属性
- 定义 CSS 变量
- body
- #card
- 自定义属性
- 定义动画
- #card::before
- #card::after
- img
代码总汇

参考

项目	描述
MDN	Web 文档
搜索引擎	Bing

描述

项目	描述
Edge	109.0.1518.61 (正式版本) (64 位)

效果

注：

CSS 部分的源代码中使用了 @property 来实现自定义属性，该属性仍处于实验阶段，部分浏览器对该属性并不支持。

但请不要担心，在本示例中，你完全可以使用 CSS 变量来替代自定义属性（在此使用自定义属性仅是为了学习），完成这一操作仅需要对 CSS 源代码进行小小的更改。
具体的更改方式为：你仅需要删除 @property --color 整体并在 *（通配符选择器）选择器中定义 CSS 变量 --rotate: 90deg; 即可。如果你不明白这段话的意思，也请不要担心，请往下看吧。

支线

HTML

<!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>CSS 艺术之暗系魔幻卡牌</title><link rel="stylesheet" href="./index.css">
</head>
<body><div id="card"><img src="../R-C.jpg" alt=""></div>
</body>
</html>

图片

主线

去除元素的部分默认属性

*{/* 去除元素默认的内外边距 */margin: 0px;padding: 0px;/* 设置为 border-box 时，设置边框后，边框将会压迫内容区域。元素的宽高并不会因为边框的设置而增加。*/box-sizing: border-box;
}

定义 CSS 变量

:root {--margin: 100px;--card-height: 30vw;/* 上演一出黄金分割率的好戏 */--card-width: calc(var(--card-height) / 1.618);}

注：

:root 指向文档的根元素，对于 HTML 来说，根元素为 <html> 。由于 CSS 变量具有继承性，将 CSS 变量定义在指向 <html> 元素的选择器中，CSS 变量可以被大多数选择器（html 标签选择器 及 通配符选择器 不在范围内，三者类似与平级关系，不存在父子嵌套关系）使用。
为实现相同的效果，你也可以将变量定义在 html 标签选择器 或 通配符选择器 中。
calc() 函数内部可以进行计算。使用该函数进行加法或减法计算时，+ 或 - 的两边需要留有空格，否则将被理解为正负号。
通过变量，我们可以实现代码的复用。同时，合理的变量名称还能够提高代码的可读性。

body

body{/* 设置 body 元素的最小高度为视口（可以理解为浏览器中的可视区域）高度 。*/min-height: 100vh;/* 设置背景颜色 */background-color: #131323;/* 通过 flex 弹性布局使 body 中的元素居中显示 */display: flex;justify-content: center;align-items: center;
}

#card

#card{width: var(--card-width);height: var(--card-height);position: relative;cursor: pointer;
}

注：

你可以通过使用 CSS 提供的内置函数 var() 函数来获取 CSS 变量中的值。
将 #card 元素设置为相对定位，便于稍后基于 #card 元素创建的伪元素相对该元素进行定位。
cursor 属性用于设定当鼠标悬停在 #card 元素之上时，当 cursor 属性的值为 pointer 时，鼠标样式将被设置为如下样式：

自定义属性

@property --rotate{/* 自定义属性的默认值 */initial-value: 90deg;/* 定义自定义属性允许的语法结构，此处定义该元素仅接受角度值。    */syntax: '<angle>';/* 定义该自定义属性是否允许被其他元素所继承 */inherits: false;
}

注：

自定义属性在部分浏览器中无法正常工作，请注意使用。
该示例中，自定义属性发挥的功能可以由 CSS 变量来担任。你仅需要删除该部分代码并在 *（通配符选择器）选择器中定义 CSS 变量**--rotate: 90deg;** 即可。
如果你希望能够对 CSS 自定义属性有更深入的了解，欢迎移步至我的另一篇博客 CSS @property（CSS 自定义属性） 。

定义动画

@keyframes edge{from{--rotate: 0deg;}to{--rotate: 360deg;}
}

该动画将自定义属性 --rotate 的值由 0deg 逐渐增加至 360deg 。

#card::before

#card::before{content: '';width: 104%;height: 102%;background: linear-gradient(var(--rotate), rgb(44, 251, 255), rgb(81, 154, 255), rgb(97, 57, 242));position: absolute;z-index: -1;top: -1%;left: -2%;/* 设置边框圆角半径 */border-radius: 0.5vw;/* 为当前元素指定使用的动画，并将该动画的持续时间设置为 3.5s，动画速度保持不变，动画播放次数为无限次。*/animation: edge 3.5s linear infinite;
}

注：

使用伪元素时，必须指定 content 属性的值，否则该伪元素将无法正常发挥作用。
linear-gradient() 函数用于创建渐变背景，该函数的第一个参数为渐变的方向，后续的值指定渐变过程中需要使用到的元素。
position 的属性值为 absolute 时，该元素将依照最靠近该元素的已定位（position 的属性值不为默认值 static）的父级元素进行定位。
position 的属性值不为默认值 static 的元素，可以通过使用 z-index 属性来调整该元素在上下文中的位置。简单来说，通过该属性你可以决定哪个元素覆盖哪个元素，该属性的值越大，该元素就越是靠近上层（也可以成为最上层）。

分析：

我们将该元素单独抽离出来进行观察：

该伪元素的面积比 #card 元素稍大，将该元素压在 #card 的下方，通过适当的偏移，就能得到一个具有流光的边框效果。

#card::after

#card::after{content: '';width: 80%;height: 100%;background: linear-gradient(var(--rotate), rgb(44, 251, 255), rgb(81, 154, 255), rgb(97, 57, 242));position: absolute;top: 5%;left: 10%;filter: blur(5vw);z-index: -1;/* 使用动画 */animation: edge 3.5s linear infinite;
}

注：

filter 属性可以为当前元素添加滤镜，blur() 函数用于将元素中的像素进行适当的偏移，以产生到模糊的效果。

效果：

我们将该元素单独抽离出来进行观察：

我们可以利用模糊过程中产生的像素偏移导致的微光（边缘）来为 #card 元素添加魔法。该元素同样位于在 #card 元素之下。

img

/* 设置图片宽高，使其占据整个父级元素（#card) */
img{width: 100%;height: 100%;
}

代码总汇

此处仅有 CSS 部分的完整代码，HTML 部分的完整代码已在本文前面给出，请留意。

*{/* 去除元素默认的内外边距 */padding: 0px;/* 设置为 border-box 时，设置边框后，边框将会压迫内容区域。元素的宽高并不会因为边框的设置而增加。*/box-sizing: border-box;
}:root {--margin: 100px;--card-height: 30vw;/* 上演一出黄金分割率的好戏 */--card-width: calc(var(--card-height) / 1.618);}body{/* 设置 body 元素的最小高度为视口（可以理解为浏览器中的可视区域）高度 。*/min-height: 100vh;/* 设置背景颜色 */background-color: #131323;/* 通过 flex 弹性布局使 body 中的元素居中显示 */display: flex;justify-content: center;align-items: center;
}#card{width: var(--card-width);height: var(--card-height);position: relative;cursor: pointer;
}/* 定义自定义属性 --rotate */
@property --rotate{/* 自定义属性的默认值 */initial-value: 90deg;/* 定义自定义属性允许的语法结构，此处定义该元素仅接受角度值。    */syntax: '<angle>';/* 定义该自定义属性是否允许被其他元素所继承 */inherits: false;
}/* 定义动画 */
@keyframes edge{from{--rotate: 0deg;}to{--rotate: 360deg;}
}#card::before{content: '';width: 104%;height: 102%;background: linear-gradient(var(--rotate), rgb(44, 251, 255), rgb(81, 154, 255), rgb(97, 57, 242));position: absolute;z-index: -1;top: -1%;left: -2%;/* 设置边框圆角半径 */border-radius: 0.5vw;/* 为当前元素指定使用的动画，并将该动画的持续时间设置为 3.5s，动画速度保持不变，动画播放次数为无限次。*/animation: edge 3.5s linear infinite;
}#card::after{content: '';width: 80%;height: 100%;background: linear-gradient(var(--rotate), rgb(44, 251, 255), rgb(81, 154, 255), rgb(97, 57, 242));position: absolute;top: 5%;left: 10%;filter: blur(5vw);z-index: -1;/* 使用动画 */animation: edge 3.5s linear infinite;
}/* 设置图片宽高，使其占据整个父级元素（#card) */
img{width: 100%;height: 100%;
}

CSS 艺术之暗系魔幻卡牌相关推荐

探索区块链C端市场艺术品、卡牌、音乐皆可NFT
国内NFT(也即非同质代币)热潮持续升级,零幺宇宙.腾讯.阿里等公司纷纷入局NFT市场.自8月份以来,NFT的应用场景也在进一步拓宽,从最初的艺术品向卡牌.音乐.体育等领域延伸.业内专家普遍认为,国内 ...
Css动画效果旋转卡牌
这次我们来实现一个用css动画效果敲打出来一个旋转卡牌的小案列. 首先把img图片框架敲打出来,给它一个div标签,里面包裹六个img标签. 放进去图片之后,然后给图片设置一下css样式. 设置tra ...
卡牌特效: svg不规则倒计时动效
导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果.前端项目中,往往使用css来完成动画,像倒计时效果也可以使用 ...
效果最接近《羊了个羊》（卡牌堆叠游戏）的开源代码微信小程序开源了
⭐零.教程概述效果最接近<羊了个羊>(卡牌堆叠游戏)的开源代码,有数据库和关卡. 我写的程序是指卡牌堆叠游戏 ,效果与羊了个羊一致.本教程有已有两个版本. 本来是想着Fork多一点的时 ...
在WebGL场景中管理多个卡牌对象的实验
这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本 ...
《皇室战争》游戏设计师：顶级卡牌竞技游戏的‘平衡之道’
本文转自:https://news.cnblogs.com/n/565584/ 2016 年,芬兰的 Supercell 再次成为全球手游收入冠军,目前该公司在线的 4 款游戏里,表现最好的是< ...
【WEB项目】魔法卡牌
样式分析从图中我们可以看出,本项目是将鼠标移入图片中,则图片将一张一张展开,实现一个很炫酷的效果框架分析不难发现,此页面由11张图片组成,并且在未展开前,所有图片堆叠在一起,由此可见,此页面是在 ...
效果最接近《羊了个羊》（卡牌堆叠游戏）的开源代码
⭐零.教程概述效果最接近<羊了个羊>(卡牌堆叠游戏)的开源代码,有数据库和关卡. 我写的程序是指卡牌堆叠游戏 ,效果与羊了个羊一致.本教程有两个版本 PHP 使用 PHP + H5 + ...
用js写卡牌游戏（一）
用js写卡牌游戏(一) 不想看废话的点这直接看代码的点这废话(前言) 现在游戏多了,不过总是感觉不太对自己的口味,每个游戏都感觉和自己想象中的要差了那么一点点,所以我决定尝试着自己写一个游戏. 因 ...

CSS 艺术之暗系魔幻卡牌

CSS 艺术之暗系魔幻卡牌

参考

描述

效果

支线

HTML

图片

主线

去除元素的部分默认属性

定义 CSS 变量

body

#card

自定义属性

定义动画

#card::before

#card::after

img

代码总汇

CSS 艺术之暗系魔幻卡牌相关推荐

最新文章

热门文章