css+js实现炫酷卡片悬浮背景动画效果代码
代码语言:html
所属分类:悬停
代码描述:css+js实现炫酷卡片悬浮背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
--background-color: #18181B;
--text-color: #A1A1AA;
--card-background-color: rgba(255, 255, 255, .015);
--card-border-color: rgba(255, 255, 255, 0.1);
--card-box-shadow-1: rgba(0, 0, 0, 0.05);
--card-box-shadow-1-y: 3px;
--card-box-shadow-1-blur: 6px;
--card-box-shadow-2: rgba(0, 0, 0, 0.1);
--card-box-shadow-2-y: 8px;
--card-box-shadow-2-blur: 15px;
--card-label-color: #FFFFFF;
--card-icon-color: #D4D4D8;
--card-icon-background-color: rgba(255, 255, 255, 0.08);
--card-icon-border-color: rgba(255, 255, 255, 0.12);
--card-shine-opacity: .1;
--card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg);
--card-line-color: #2A2B2C;
--card-tile-color: rgba(16, 185, 129, 0.05);
--card-hover-border-color: rgba(255, 255, 255, 0.2);
--card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
--card-hover-box-shadow-1-y: 5px;
--card-hover-box-shadow-1-blur: 10px;
--card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
--card-hover-box-shadow-2-y: 15px;
--card-hover-box-shadow-2-blur: 25px;
--card-hover-icon-color: #34D399;
--card-hover-icon-background-color: rgba(52, 211, 153, 0.1);
--card-hover-icon-border-color: rgba(52, 211, 153, 0.2);
--blur-opacity: .01;
}
body.light {
--background-color: #FAFAFA;
--text-color: #52525B;
--card-background-color: transparent;
--card-border-color: rgba(24, 24, 27, 0.08);
--card-box-shadow-1: rgba(24, 24, 27, 0.02);
--card-box-shadow-1-y: 3px;
--card-box-shadow-1-blur: 6px;
--card-box-shadow-2: rgba(24, 24, 27, 0.04);
--card-box-shadow-2-y: 2px;
--card-box-shadow-2-blur: 7px;
--card-label-color: #18181B;
--card-icon-color: #18181B;
--card-icon-background-color: rgba(24, 24, 27, 0.04);
--card-icon-border-color: rgba(24, 24, 27, 0.1);
--card-shine-opacity: .3;
--card-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, #EDFAF6 285deg, #FFFFFF 345deg, rgba(16, 185, 129, 0) 360deg);
--card-line-color: #E9E9E7;
--card-tile-color: rgba(16, 185, 129, 0.08);
--card-hover-border-color: rgba(24, 24, 27, 0.15);
--card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
--card-hover-box-shadow-1-y: 3px;
--card-hover-box-shadow-1-blur: 6px;
--card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
--card-hover-box-shadow-2-y: 8px;
--card-hover-box-shadow-2-blur: 15px;
--card-hover-icon-color: #18181B;
--card-hover-icon-background-color: rgba(24, 24, 27, 0.04);
--card-hover-icon-border-color: rgba(24, 24, 27, 0.34);
--blur-opacity: .1;
}
body.toggle .grid * {
transition-duration: 0s !i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0