Dark magic card of CSS art

two moons 2023-01-25 21:22:32 阅读数:596

darkmagiccardcssart

CSS Dark magic card of art

参考
描述
效果
支线
- - HTML
  - 图片
主线
代码总汇

参考

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

描述

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

效果

注：

CSS used in some of the source code @property to implement custom properties,This property is still experimental,Some browsers do not support this attribute.

兼容性

但请不要担心,在本示例中,你完全可以使用 CSS Variables to replace custom properties（Using custom attributes here is just for learning）,Only the pair is needed to do this CSS Minor changes to the source code.
The specific change method is as follows：You just need to delete @property --color Whole and in *（通配符选择器）选择器中定义 CSS 变量（--rotate: 90deg;）即可.If you don't understand what this passage means,也请不要担心,请往下看吧.

支线

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 Dark magic card of art</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="card">
<img src="../R-C.jpg" alt="">
</div>
</body>
</html>

图片

主线

Remove some of the default attributes of the element

*{

/* Remove the default inner and outer margins of the element */
margin: 0px;
padding: 0px;
/* 设置为 border-box 时,After setting the border,Borders will oppress 内容区域.The width and height of the element will not increase due to the setting of the border. */
box-sizing: border-box;
}

定义 CSS 变量

:root {

--margin: 100px;
--card-height: 30vw;
/* Put on a good show of the golden ratio */
--card-width: calc(var(--card-height) / 1.618);
}

注：

:root Points to the root element of the document,对于 HTML 来说,根元素为 <html> .由于 CSS Variables are inherited,将 CSS Variables are defined at pointing to <html> element's selector,CSS Variables can be used by most selectors（html 标签选择器 及 通配符选择器 不在范围内,The three are similar and equal,There is no parent-child nesting relationship,无法 html 元素中的 CSS 变量）使用.
to achieve the same effect,You can also define variables in html 标签选择器 或 通配符选择器 中.
calc() Calculations can be performed inside the function.When using this function for addition or subtraction calculations,+ 或 - Spaces are required on both sides of the ,Otherwise it will be interpreted as a plus or minus sign.
通过变量,We can achieve code reuse.同时,Reasonable variable names can also improve code readability.

body

body{

/* 设置 body The minimum height of the element is the viewport （可以理解为浏览器中的可视区域） 高度 . */
min-height: 100vh;
/* 设置背景颜色 */
background-color: #131323;
/* 通过 flex Elastic layout enables 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 Elements are set to relative positioning,Easy to base on later #card The pseudo-elements created by the element are positioned relative to that element.
cursor Property used to set when the mouse is hovered over #card when above the element,The mouse style will be set as below：

自定义属性

@property --rotate{

/* 自定义属性的默认值 */
initial-value: 90deg;
/* Defines the syntax structures allowed for custom attributes, This element is defined here to only accept angle values. */
syntax: '<angle>';
/* Define whether this custom attribute is allowed to be inherited by other elements */
inherits: false;
}

注：

Custom attributes don't work properly in some browsers,请注意使用.
该示例中,The functions performed by custom attributes can be determined by CSS variable to serve.You just need to delete this part of the code and in *（通配符选择器）选择器中定义 CSS 变量（--rotate: 90deg;）即可.
If you want to be able to CSS Custom attributes for a deeper understanding,欢迎移步至我的另一篇博客 CSS @property（CSS 自定义属性） .

定义动画

@keyframes edge{

from{

--rotate: 0deg;
}
to{

--rotate: 360deg;
}
}

The animation will be custom properties --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%;
/* Set border fillet radius */
border-radius: 0.5vw;
/* Specifies the animation to use for the current element,and will animate that 持续时间设置为 3.5s,The animation speed remains the same, The animation can be played an unlimited number of times. */
animation: edge 3.5s linear infinite;
}

注：

when using pseudo-elements,必须指定 content 属性的值,Otherwise the pseudo-element will not function properly.
linear-gradient() function to create a gradient background,The first parameter of this function is the direction of the gradient,Subsequent values specify the elements to be used during the gradient.
position 的属性值为 absolute 时,The element will follow the positioned closest to the element（position The property value of is not the default value static）的父级元素进行定位.
position The property value of is not the default value static 的元素,可以通过使用 z-index property to adjust the element's position within the context.简单来说,With this attribute you can decide which element overrides which element,The larger the value of this attribute is,The closer the element is to the upper layer（Can also be the top tier）.

分析：

We isolate this element for observation：

The area ratio of this pseudo-element #card Elements are slightly larger,Press the element on #card 的下方,with the appropriate offset,You can get a streamer border effect.

#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 Attributes can add filters to the current element,blur() Function used to properly offset the pixels within the element,to produce a blurred effect.

效果：

We isolate this element for observation：

We can take advantage of the shimmer caused by the pixel shift produced during the blurring process（边缘）来为 #card Elements add magic.This element is also located at #card 元素之下.

img

/* 设置图片宽高,Make it take up the entire parent element（#card) */
img{

width: 100%;
height: 100%;
}

代码总汇

only here CSS 部分的完整代码,HTML Part of the complete code has been given earlier in this article,请留意.

*{

/* Remove the default inner and outer margins of the element */
padding: 0px;
/* 设置为 border-box 时,After setting the border,Borders will oppress 内容区域.The width and height of the element will not increase due to the setting of the border. */
box-sizing: border-box;
}
:root {

--margin: 100px;
--card-height: 30vw;
/* Put on a good show of the golden ratio */
--card-width: calc(var(--card-height) / 1.618);
}
body{

/* 设置 body The minimum height of the element is the viewport （可以理解为浏览器中的可视区域） 高度 . */
min-height: 100vh;
/* 设置背景颜色 */
background-color: #131323;
/* 通过 flex Elastic layout enables 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;
/* Defines the syntax structures allowed for custom attributes, This element is defined here to only accept angle values. */
syntax: '<angle>';
/* Define whether this custom attribute is allowed to be inherited by other elements */
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%;
/* Set border fillet radius */
border-radius: 0.5vw;
/* Specifies the animation to use for the current element,and will animate that 持续时间设置为 3.5s,The animation speed remains the same, The animation can be played an unlimited number of times. */
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;
}
/* 设置图片宽高,Make it take up the entire parent element（#card) */
img{

width: 100%;
height: 100%;
}

版权声明：本文为[two moons]所创，转载请带上原文链接，感谢。 https://qdmana.com/2023/025/202301252120253875.html

《 Computer graduation project topic selection recommendation based on nodejs+Vue360 student dormitory system