├── .gitignore
├── icss
    ├── src
    │   ├── assets
    │   │   └── img
    │   │   │   ├── favicon.ico
    │   │   │   └── logo.svg
    │   ├── index.ts
    │   ├── index.html
    │   ├── components
    │   │   ├── color
    │   │   │   ├── 使用filter开启悼念模式.vue
    │   │   │   ├── 使用@@selection改变选中颜色.vue
    │   │   │   ├── 使用linear-gradient()控制渐变文本.vue
    │   │   │   ├── 使用linear-gradient()控制闪烁文本.vue
    │   │   │   ├── 使用filter描绘彩色阴影.vue
    │   │   │   ├── 使用linear-gradient()控制渐变背景.vue
    │   │   │   ├── 使用box-shadow描绘彩虹色带.vue
    │   │   │   ├── 使用@nth-child()描绘信号彩带.vue
    │   │   │   ├── 使用filter雕刻高斯模糊.vue
    │   │   │   ├── 使用filter描绘动态背景.vue
    │   │   │   └── 使用filter开启暗黑模式.vue
    │   │   ├── figure
    │   │   │   ├── 使用linear-gradient()描绘方格彩带.vue
    │   │   │   ├── 使用outline描绘内部边框.vue
    │   │   │   ├── 使用conic-gradient()描绘彩色饼图.vue
    │   │   │   ├── 使用linear-gradient()描绘网格背景.vue
    │   │   │   ├── 使用linear-gradient()描绘方格背景.vue
    │   │   │   ├── 使用box-shadow裁剪聚焦区域.vue
    │   │   │   ├── 使用transform描绘动感心形.vue
    │   │   │   ├── 使用linear-gradient()描绘波浪划线.vue
    │   │   │   ├── 使用clip描绘蛇形边框.vue
    │   │   │   ├── 使用mask雕刻镂空背景.vue
    │   │   │   ├── 使用box-shadow描绘单侧投影.vue
    │   │   │   └── 使用clip-path描绘各种图形.vue
    │   │   ├── layout
    │   │   │   ├── 使用letter-spacing排版倒序文本.vue
    │   │   │   ├── 使用writing-mode排版竖向文本.vue
    │   │   │   ├── 使用float排版环绕文本.vue
    │   │   │   ├── 使用transform描绘像素边框.vue
    │   │   │   ├── 使用margin排版凸显布局.vue
    │   │   │   ├── 使用transform翻转容器内容.vue
    │   │   │   ├── 使用text-overflow控制溢出文本.vue
    │   │   │   ├── 使用overflow-x排版横向列表.vue
    │   │   │   └── 使用clip-path排版蜂窝布局.vue
    │   │   ├── behavior
    │   │   │   ├── 使用content提升反爬效果.vue
    │   │   │   ├── 使用pointer-events禁用事件触发.vue
    │   │   │   ├── 使用text-align-last对齐两端文本.vue
    │   │   │   ├── 使用attr()控制切换文本.vue
    │   │   │   ├── 使用@nth-child()选择指定元素.vue
    │   │   │   ├── 使用@hover控制悬浮边框.vue
    │   │   │   ├── 使用@not()去除无用属性.vue
    │   │   │   ├── 使用animation-delay保留动画首帧.vue
    │   │   │   ├── 使用@empty监听清空状态.vue
    │   │   │   ├── 使用attr()抓取节点属性.vue
    │   │   │   ├── 使用max-height切换自动高度.vue
    │   │   │   ├── 使用position控制吸附位置.vue
    │   │   │   ├── 使用@hover描绘鼠标跟随.vue
    │   │   │   ├── 使用@valid与@invalid校验表单内容.vue
    │   │   │   ├── 使用+或~美化选项表单.vue
    │   │   │   ├── 使用object-fit规定图像尺寸.vue
    │   │   │   ├── 使用transform模拟视差滚动.vue
    │   │   │   ├── 使用resize拉伸多列分栏.vue
    │   │   │   ├── 使用@hover定制悬浮提示.vue
    │   │   │   └── 使用+或~选择指定元素.vue
    │   │   └── component
    │   │   │   ├── 立体按钮.vue
    │   │   │   ├── 图像换色器.vue
    │   │   │   ├── 圆角进度条.vue
    │   │   │   ├── 加载指示器.vue
    │   │   │   ├── 螺纹进度条.vue
    │   │   │   ├── 条形加载条.vue
    │   │   │   ├── 专栏头像.vue
    │   │   │   ├── 星级评分.vue
    │   │   │   ├── 手风琴.vue
    │   │   │   ├── 倒影加载条.vue
    │   │   │   ├── 自动打字器.vue
    │   │   │   ├── 故障文本.vue
    │   │   │   ├── 开关按钮.vue
    │   │   │   ├── 划线跟随导航.vue
    │   │   │   ├── 气泡对话框.vue
    │   │   │   ├── 混沌加载圈.vue
    │   │   │   ├── 粘粘球.vue
    │   │   │   ├── 悬浮跟踪按钮.vue
    │   │   │   ├── 悬浮状态球.vue
    │   │   │   ├── 折叠面板.vue
    │   │   │   ├── 商城打孔票券.vue
    │   │   │   ├── 放大镜.vue
    │   │   │   ├── 标签选框.vue
    │   │   │   ├── 三维立方体.vue
    │   │   │   ├── 迭代计数器.vue
    │   │   │   ├── 悬浮视差按钮.vue
    │   │   │   ├── 心形加载条.vue
    │   │   │   ├── 滚动渐变背景.vue
    │   │   │   ├── 标签导航.vue
    │   │   │   ├── 气泡背景墙.vue
    │   │   │   └── 滚动指示器.vue
    │   └── global.d.ts
    ├── .vscode
    │   └── settings.json
    ├── package.json
    ├── brucerc.js
    └── tsconfig.json
├── icss-set
    ├── src
    │   ├── assets
    │   │   ├── img
    │   │   │   ├── favicon.ico
    │   │   │   └── logo.svg
    │   │   └── css
    │   │   │   └── global.scss
    │   ├── index.js
    │   ├── index.html
    │   └── components
    │   │   ├── color
    │   │       ├── 使用filter开启悼念模式.vue
    │   │       ├── 使用@@selection改变选中颜色.vue
    │   │       ├── 使用linear-gradient()控制渐变文本.vue
    │   │       ├── 使用filter描绘彩色阴影.vue
    │   │       ├── 使用linear-gradient()控制渐变背景.vue
    │   │       ├── 使用linear-gradient()控制闪烁文本.vue
    │   │       ├── 使用filter描绘动态背景.vue
    │   │       ├── 使用box-shadow描绘彩虹色带.vue
    │   │       ├── 使用@nth-child()描绘信号彩带.vue
    │   │       ├── 使用filter雕刻高斯模糊.vue
    │   │       └── 使用filter开启暗黑模式.vue
    │   │   ├── figure
    │   │       ├── 使用linear-gradient()描绘方格彩带.vue
    │   │       ├── 使用outline描绘内部边框.vue
    │   │       ├── 使用conic-gradient()描绘彩色饼图.vue
    │   │       ├── 使用box-shadow描绘单侧投影.vue
    │   │       ├── 使用linear-gradient()描绘网格背景.vue
    │   │       ├── 使用linear-gradient()描绘方格背景.vue
    │   │       ├── 使用box-shadow裁剪聚焦区域.vue
    │   │       ├── 使用transform描绘动感心形.vue
    │   │       ├── 使用linear-gradient()描绘波浪划线.vue
    │   │       ├── 使用clip描绘蛇形边框.vue
    │   │       ├── 使用mask雕刻镂空背景.vue
    │   │       └── 使用clip-path描绘各种图形.vue
    │   │   ├── layout
    │   │       ├── 使用letter-spacing排版倒序文本.vue
    │   │       ├── 使用writing-mode排版竖向文本.vue
    │   │       ├── 使用float排版环绕文本.vue
    │   │       ├── 使用transform描绘像素边框.vue
    │   │       ├── 使用margin排版凸显布局.vue
    │   │       ├── 使用transform翻转容器内容.vue
    │   │       ├── 使用text-overflow控制溢出文本.vue
    │   │       ├── 使用overflow-x排版横向列表.vue
    │   │       └── 使用clip-path排版蜂窝布局.vue
    │   │   ├── behavior
    │   │       ├── 使用content提升反爬效果.vue
    │   │       ├── 使用pointer-events禁用事件触发.vue
    │   │       ├── 使用text-align-last对齐两端文本.vue
    │   │       ├── 使用attr()控制切换文本.vue
    │   │       ├── 使用@nth-child()选择指定元素.vue
    │   │       ├── 使用@hover控制悬浮边框.vue
    │   │       ├── 使用@not()去除无用属性.vue
    │   │       ├── 使用animation-delay保留动画首帧.vue
    │   │       ├── 使用@empty监听清空状态.vue
    │   │       ├── 使用attr()抓取节点属性.vue
    │   │       ├── 使用max-height切换自动高度.vue
    │   │       ├── 使用position控制吸附位置.vue
    │   │       ├── 使用@hover描绘鼠标跟随.vue
    │   │       ├── 使用@valid和@invalid校验表单内容.vue
    │   │       ├── 使用+或~美化选项表单.vue
    │   │       ├── 使用transform模拟视差滚动.vue
    │   │       ├── 使用object-fit规定图像尺寸.vue
    │   │       ├── 使用resize拉伸多列分栏.vue
    │   │       ├── 使用@hover定制悬浮提示.vue
    │   │       └── 使用+或~选择指定元素.vue
    │   │   └── component
    │   │       ├── 立体按钮.vue
    │   │       ├── 图像换色器.vue
    │   │       ├── 圆角进度条.vue
    │   │       ├── 加载指示器.vue
    │   │       ├── 螺纹进度条.vue
    │   │       ├── 条形加载条.vue
    │   │       ├── 专栏头像.vue
    │   │       ├── 星级评分.vue
    │   │       ├── 手风琴.vue
    │   │       ├── 倒影加载条.vue
    │   │       ├── 自动打字器.vue
    │   │       ├── 故障文本.vue
    │   │       ├── iOS开关按钮.vue
    │   │       ├── 划线跟随导航.vue
    │   │       ├── 悬浮跟踪按钮.vue
    │   │       ├── 气泡对话框.vue
    │   │       ├── 放大镜.vue
    │   │       ├── 混沌加载圈.vue
    │   │       ├── 粘粘球.vue
    │   │       ├── 悬浮状态球.vue
    │   │       ├── 折叠面板.vue
    │   │       ├── 商城打孔票券.vue
    │   │       ├── 标签选框.vue
    │   │       ├── 三维立方体.vue
    │   │       ├── 迭代计数器.vue
    │   │       ├── 悬浮视差按钮.vue
    │   │       ├── 滚动渐变背景.vue
    │   │       ├── 心形加载条.vue
    │   │       ├── 标签导航.vue
    │   │       └── 气泡背景墙.vue
    ├── package.json
    └── brucerc.js
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist
3 | node_modules
4 | package-lock.json
5 | yarn.lock


--------------------------------------------------------------------------------
/icss/src/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JowayYoung/idea-css/HEAD/icss/src/assets/img/favicon.ico


--------------------------------------------------------------------------------
/icss-set/src/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JowayYoung/idea-css/HEAD/icss-set/src/assets/img/favicon.ico


--------------------------------------------------------------------------------
/icss/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"eslint.options": {
3 | 		"overrideConfigFile": "E:/Node/prefix/node_modules/@yangzw/bruce-std/tslint/tslintrc.vue.js"
4 | 	},
5 | 	"stylelint.customSyntax": "postcss-html"
6 | }


--------------------------------------------------------------------------------
/icss/src/index.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | 
3 | import App from "./app.vue";
4 | 
5 | import "./assets/css/reset.css";
6 | 
7 | console.log("应用构建环境：", process.env.NODE_ENV);
8 | console.log("应用运行环境：", RUN_ENV); // eslint-disable-line
9 | createApp(App).mount("#root");


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # iDea CSS
 2 | 
 3 | [在线预览](https://yangzw.vip/idea-css/)
 4 | 
 5 | - 环境：`Node v16+`
 6 | - 安装：`npm i -g @yangzw/bruce-app`
 7 | - 进入目录：`cd icss`
 8 | - 构建项目：`bruce-app b`
 9 | 
10 | 请查看[Bruce FEES](https://JowayYoung.github.io/bruce)或[@yangzw/bruce-app](https://doc.yangzw.vip/bruce/app)的文档


--------------------------------------------------------------------------------
/icss-set/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | 
3 | import "./assets/css/reset.css";
4 | import App from "./app";
5 | 
6 | console.log("项目构建环境：", process.env.NODE_ENV);
7 | console.log("项目运行环境：", RUN_ENV); // eslint-disable-line
8 | Vue.config.productionTip = false;
9 | new Vue({ render: h => h(App) }).$mount("#root");


--------------------------------------------------------------------------------
/icss-set/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "icss",
 3 | 	"version": "1.0.0",
 4 | 	"description": "",
 5 | 	"keywords": [],
 6 | 	"author": "",
 7 | 	"license": "MIT",
 8 | 	"dependencies": {
 9 | 		"vue": "2.6.11"
10 | 	},
11 | 	"devDependencies": {},
12 | 	"engines": {
13 | 		"node": ">= 12.0.0",
14 | 		"npm": ">= 6.9.0"
15 | 	}
16 | }


--------------------------------------------------------------------------------
/icss/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
 7 | 	<title>iDea CSS</title>
 8 | </head>
 9 | 
10 | <body>
11 | 	<div id="root"></div>
12 | </body>
13 | 
14 | </html>


--------------------------------------------------------------------------------
/icss-set/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
 7 | 	<title>iDea CSS</title>
 8 | </head>
 9 | 
10 | <body>
11 | 	<div id="root"></div>
12 | </body>
13 | 
14 | </html>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用filter开启悼念模式.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter开启悼念模式">
 3 | 		<img class="mourning-mode" src="https://static.yangzw.vip/codepen/car.jpg">
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .mourning-mode {
 9 | 	width: 400px;
10 | 	filter: grayscale(100%);
11 | }
12 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用filter开启悼念模式.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter开启悼念模式">
 3 | 		<img class="mourning-mode" src="https://jowayyoung.github.io/static/img/icss/car.jpg">
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .mourning-mode {
 9 | 	width: 400px;
10 | 	filter: grayscale(100%);
11 | }
12 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用linear-gradient()描绘方格彩带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘方格彩带">
 3 | 		<div class="colour-bar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .colour-bar {
 9 | 	width: 500px;
10 | 	height: 50px;
11 | 	background-image: repeating-linear-gradient(90deg, #f66, #f66 50px, #66f 50px, #66f 100px);
12 | }
13 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用linear-gradient()描绘方格彩带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘方格彩带">
 3 | 		<div class="colour-bar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .colour-bar {
 9 | 	width: 500px;
10 | 	height: 50px;
11 | 	background-image: repeating-linear-gradient(90deg, #f66, #f66 50px, #66f 50px, #66f 100px);
12 | }
13 | </style>


--------------------------------------------------------------------------------
/icss/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "icss-set",
 3 | 	"version": "1.0.0",
 4 | 	"description": "",
 5 | 	"keywords": [],
 6 | 	"author": "",
 7 | 	"engines": {
 8 | 		"node": ">=16.0.0",
 9 | 		"npm": ">=7.10.0"
10 | 	},
11 | 	"dependencies": {
12 | 		"vue": "3.2.36",
13 | 		"vue-router": "4.0.13"
14 | 	},
15 | 	"devDependencies": {
16 | 		"@types/node": "17.0.43",
17 | 		"@types/webpack-env": "1.17.0"
18 | 	},
19 | 	"license": "MIT"
20 | }


--------------------------------------------------------------------------------
/icss/src/components/figure/使用outline描绘内部边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用outline描绘内部边框">
 3 | 		<div class="outside-border"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .outside-border {
 9 | 	border: 10px dashed #f90;
10 | 	width: 300px;
11 | 	height: 300px;
12 | 	outline: 10px dashed #09f;
13 | 	outline-offset: -50px;
14 | 	background-color: #3c9;
15 | }
16 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用outline描绘内部边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用outline描绘内部边框">
 3 | 		<div class="outside-border"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .outside-border {
 9 | 	border: 10px dashed #f90;
10 | 	width: 300px;
11 | 	height: 300px;
12 | 	outline: 10px dashed #09f;
13 | 	outline-offset: -50px;
14 | 	background-color: #3c9;
15 | }
16 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用conic-gradient()描绘彩色饼图.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用conic-gradient()描绘彩色饼图">
 3 | 		<div class="pie-chart"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .pie-chart {
 9 | 	border-radius: 100%;
10 | 	width: 300px;
11 | 	height: 300px;
12 | 	background-image: conic-gradient(#f66 0 25%, #66f 25% 30%, #f90 30% 55%, #09f 55% 70%, #3c9 70% 100%);
13 | }
14 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用conic-gradient()描绘彩色饼图.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用conic-gradient()描绘彩色饼图">
 3 | 		<div class="pie-chart"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .pie-chart {
 9 | 	border-radius: 100%;
10 | 	width: 300px;
11 | 	height: 300px;
12 | 	background-image: conic-gradient(#f66 0 25%, #66f 25% 30%, #f90 30% 55%, #09f 55% 70%, #3c9 70% 100%);
13 | }
14 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用letter-spacing排版倒序文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用letter-spacing排版倒序文本">
 3 | 		<div class="reverse-text">恭喜发财</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .reverse-text {
 9 | 	padding-left: 100px; // 与letter-spacing一致
10 | 	font-weight: bold;
11 | 	font-size: 50px;
12 | 	color: #f66;
13 | 	letter-spacing: -100px; // letter-spacing最少是font-size的2倍
14 | }
15 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用letter-spacing排版倒序文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用letter-spacing排版倒序文本">
 3 | 		<div class="reverse-text">恭喜发财</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .reverse-text {
 9 | 	padding-left: 100px; // 与letter-spacing一致
10 | 	font-weight: bold;
11 | 	font-size: 50px;
12 | 	color: #f66;
13 | 	letter-spacing: -100px; // letter-spacing最少是font-size的2倍
14 | }
15 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用content提升反爬效果.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用content提升反爬效果">
 3 | 		<div class="crawler-box">
 4 | 			<p>提升反爬虫效果</p>
 5 | 			<p class="uncrawler"></p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .crawler-box {
12 | 	line-height: 2;
13 | 	font-weight: bold;
14 | 	font-size: 30px;
15 | 	color: #3c9;
16 | 	.uncrawler::after {
17 | 		content: "提升反爬虫效果";
18 | 	}
19 | }
20 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用content提升反爬效果.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用content提升反爬效果">
 3 | 		<div class="crawler-box">
 4 | 			<p>提升反爬虫效果</p>
 5 | 			<p class="uncrawler"></p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .crawler-box {
12 | 	line-height: 2;
13 | 	font-weight: bold;
14 | 	font-size: 30px;
15 | 	color: #3c9;
16 | 	.uncrawler::after {
17 | 		content: "提升反爬虫效果";
18 | 	}
19 | }
20 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用pointer-events禁用事件触发.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用pointer-events禁用事件触发">
 3 | 		<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .disabled-trigger {
 9 | 	padding: 0 20px;
10 | 	border-radius: 10px;
11 | 	height: 40px;
12 | 	background-color: #66f;
13 | 	pointer-events: none;
14 | 	line-height: 40px;
15 | 	color: #fff;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用pointer-events禁用事件触发.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用pointer-events禁用事件触发">
 3 | 		<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .disabled-trigger {
 9 | 	padding: 0 20px;
10 | 	border-radius: 10px;
11 | 	height: 40px;
12 | 	background-color: #66f;
13 | 	pointer-events: none;
14 | 	line-height: 40px;
15 | 	color: #fff;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用box-shadow描绘单侧投影.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow描绘单侧投影">
 3 | 		<div class="aside-shadow">投影</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .aside-shadow {
 9 | 	display: flex;
10 | 	justify-content: center;
11 | 	align-items: center;
12 | 	border: 1px solid;
13 | 	width: 100px;
14 | 	height: 100px;
15 | 	box-shadow: -7px 0 5px -5px #f90;
16 | 	font-weight: bold;
17 | 	font-size: 30px;
18 | 	color: #f90;
19 | }
20 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用writing-mode排版竖向文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
 3 | 		<div class="vertical-text">
 4 | 			<h3>名</h3>
 5 | 			<p>我武惟扬，<br>爱日惜力。<br>掘井及泉，<br>金榜题名。</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .vertical-text {
12 | 	writing-mode: vertical-rl;
13 | 	h3 {
14 | 		padding-left: 20px;
15 | 		font-weight: bold;
16 | 		font-size: 18px;
17 | 		color: #f66;
18 | 	}
19 | 	p {
20 | 		line-height: 30px;
21 | 		color: #66f;
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用writing-mode排版竖向文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
 3 | 		<div class="vertical-text">
 4 | 			<h3>情</h3>
 5 | 			<p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .vertical-text {
12 | 	writing-mode: vertical-rl;
13 | 	h3 {
14 | 		padding-left: 20px;
15 | 		font-weight: bold;
16 | 		font-size: 18px;
17 | 		color: #f66;
18 | 	}
19 | 	p {
20 | 		line-height: 30px;
21 | 		color: #66f;
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用linear-gradient()描绘网格背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘网格背景">
 3 | 		<div class="grid-bg"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .grid-bg {
 9 | 	width: 500px;
10 | 	height: 300px;
11 | 	background-color: #3c9;
12 | 	background-image: linear-gradient(0deg, #fff 5%, transparent 5%, transparent),
13 | 		linear-gradient(90deg, #fff 5%, transparent 5%, transparent);
14 | 	background-position: 0 0, 20px 20px;
15 | 	background-size: 20px 20px;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用linear-gradient()描绘网格背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘网格背景">
 3 | 		<div class="grid-bg"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .grid-bg {
 9 | 	width: 500px;
10 | 	height: 300px;
11 | 	background-color: #3c9;
12 | 	background-image: linear-gradient(0deg, #fff 5%, transparent 5%, transparent),
13 | 		linear-gradient(90deg, #fff 5%, transparent 5%, transparent);
14 | 	background-position: 0 0, 20px 20px;
15 | 	background-size: 20px 20px;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用linear-gradient()描绘方格背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘方格背景">
 3 | 		<div class="square-bg"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .square-bg {
 9 | 	width: 500px;
10 | 	height: 300px;
11 | 	background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
12 | 		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
13 | 	background-position: 0 0, 20px 20px;
14 | 	background-size: 40px 40px;
15 | }
16 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用linear-gradient()描绘方格背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘方格背景">
 3 | 		<div class="square-bg"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .square-bg {
 9 | 	width: 500px;
10 | 	height: 300px;
11 | 	background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
12 | 		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
13 | 	background-position: 0 0, 20px 20px;
14 | 	background-size: 40px 40px;
15 | }
16 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用@@selection改变选中颜色.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用::selection改变选中颜色">
 3 | 		<div class="select-color">
 4 | 			<p>全局选择文字颜色</p>
 5 | 			<p>全局选择文字颜色</p>
 6 | 			<p class="special">局部选择文字颜色</p>
 7 | 		</div>
 8 | 	</div>
 9 | </template>
10 | 
11 | <style lang="scss" scoped>
12 | ::selection {
13 | 	background-color: #66f;
14 | 	color: #fff;
15 | }
16 | .select-color {
17 | 	line-height: 50px;
18 | 	font-weight: bold;
19 | 	font-size: 30px;
20 | 	color: #f66;
21 | 	p.special::selection {
22 | 		background-color: #3c9;
23 | 	}
24 | }
25 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用@@selection改变选中颜色.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用::selection改变选中颜色">
 3 | 		<div class="select-color">
 4 | 			<p>全局选择文字颜色</p>
 5 | 			<p>全局选择文字颜色</p>
 6 | 			<p class="special">局部选择文字颜色</p>
 7 | 		</div>
 8 | 	</div>
 9 | </template>
10 | 
11 | <style lang="scss" scoped>
12 | ::selection {
13 | 	background-color: #66f;
14 | 	color: #fff;
15 | }
16 | .select-color {
17 | 	line-height: 50px;
18 | 	font-weight: bold;
19 | 	font-size: 30px;
20 | 	color: #f66;
21 | 	p.special::selection {
22 | 		background-color: #3c9;
23 | 	}
24 | }
25 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用text-align-last对齐两端文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用text-align-last对齐两端文本">
 3 | 		<ul class="justify-text">
 4 | 			<li>账号</li>
 5 | 			<li>密码</li>
 6 | 			<li>电子邮件</li>
 7 | 			<li>通讯地址</li>
 8 | 		</ul>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | .justify-text {
14 | 	li {
15 | 		padding: 0 20px;
16 | 		width: 100px;
17 | 		height: 40px;
18 | 		background-color: #f66;
19 | 		line-height: 40px;
20 | 		text-align-last: justify;
21 | 		color: #fff;
22 | 		& + li {
23 | 			margin-top: 5px;
24 | 		}
25 | 	}
26 | }
27 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用text-align-last对齐两端文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用text-align-last对齐两端文本">
 3 | 		<ul class="justify-text">
 4 | 			<li>账号</li>
 5 | 			<li>密码</li>
 6 | 			<li>电子邮件</li>
 7 | 			<li>通讯地址</li>
 8 | 		</ul>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | .justify-text {
14 | 	li {
15 | 		padding: 0 20px;
16 | 		width: 100px;
17 | 		height: 40px;
18 | 		background-color: #f66;
19 | 		line-height: 40px;
20 | 		text-align-last: justify;
21 | 		color: #fff;
22 | 		& + li {
23 | 			margin-top: 5px;
24 | 		}
25 | 	}
26 | }
27 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用attr()控制切换文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用attr()控制切换文本">
 3 | 		<input id="text-switch" class="text-switch" type="checkbox" hidden>
 4 | 		<label for="text-switch" data-true="展开" data-false="收起"></label>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .text-switch {
10 | 	& + label {
11 | 		cursor: pointer;
12 | 		font-weight: bold;
13 | 		font-size: 50px;
14 | 		color: #f66;
15 | 		&::after {
16 | 			content: attr(data-true);
17 | 		}
18 | 	}
19 | 	&:checked + label::after {
20 | 		content: attr(data-false);
21 | 	}
22 | }
23 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用attr()控制切换文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用attr()控制切换文本">
 3 | 		<input id="text-switch" class="text-switch" type="checkbox" hidden>
 4 | 		<label for="text-switch" data-true="展开" data-false="收起"></label>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .text-switch {
10 | 	& + label {
11 | 		cursor: pointer;
12 | 		font-weight: bold;
13 | 		font-size: 50px;
14 | 		color: #f66;
15 | 		&::after {
16 | 			content: attr(data-true);
17 | 		}
18 | 	}
19 | 	&:checked + label::after {
20 | 		content: attr(data-false);
21 | 	}
22 | }
23 | </style>


--------------------------------------------------------------------------------
/icss-set/src/assets/css/global.scss:
--------------------------------------------------------------------------------
 1 | $breakpoints: (
 2 | 	xs: "only screen and (max-width: 320px)",
 3 | 	sm: "only screen and (max-width: 400px)",
 4 | 	md: "only screen and (max-width: 500px)",
 5 | 	lg: "only screen and (max-width: 768px)"
 6 | ) !default;
 7 | @mixin autoResponse($breakpoint) {
 8 | 	$query: map-get($breakpoints, $breakpoint);
 9 | 	@if not $query {
10 | 		@error "No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
11 | 	}
12 | 	/* stylelint-disable-next-line */
13 | 	@media #{if(type-of($query) == "string", unquote($query), inspect($query))} {
14 | 		@content;
15 | 	}
16 | }


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用linear-gradient()控制渐变文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()控制渐变文本">
 3 | 		<h1 class="gradient-text">Full Stack Developer</h1>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .gradient-text {
 9 | 	background-image: linear-gradient(90deg, #f66, #f90);
10 | 	background-clip: text;
11 | 	line-height: 60px;
12 | 	font-size: 60px;
13 | 	color: transparent;
14 | 	animation: hue 5s linear infinite;
15 | }
16 | @keyframes hue {
17 | 	from {
18 | 		filter: hue-rotate(0);
19 | 	}
20 | 	to {
21 | 		filter: hue-rotate(-1turn);
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用linear-gradient()控制渐变文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()控制渐变文本">
 3 | 		<h1 class="gradient-text">Full Stack Developer</h1>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .gradient-text {
 9 | 	background-image: linear-gradient(90deg, #f66, #f90);
10 | 	background-clip: text;
11 | 	line-height: 60px;
12 | 	font-size: 60px;
13 | 	color: transparent;
14 | 	animation: hue 5s linear infinite;
15 | }
16 | @keyframes hue {
17 | 	from {
18 | 		filter: hue-rotate(0);
19 | 	}
20 | 	to {
21 | 		filter: hue-rotate(-1turn);
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用box-shadow裁剪聚焦区域.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow裁剪聚焦区域">
 3 | 		<div class="img-cliper">
 4 | 			<img src="https://static.yangzw.vip/codepen/gz.jpg">
 5 | 			<i></i>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .img-cliper {
12 | 	overflow: hidden;
13 | 	position: relative;
14 | 	img {
15 | 		width: 400px;
16 | 	}
17 | 	i {
18 | 		position: absolute;
19 | 		left: 50px;
20 | 		top: 30px;
21 | 		border-radius: 100%;
22 | 		width: 100px;
23 | 		height: 50px;
24 | 		box-shadow: 0 0 0 9999px rgba(#000, .5);
25 | 	}
26 | }
27 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用box-shadow裁剪聚焦区域.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow裁剪聚焦区域">
 3 | 		<div class="img-cliper">
 4 | 			<img src="https://jowayyoung.github.io/static/img/icss/gz.jpg">
 5 | 			<i></i>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .img-cliper {
12 | 	overflow: hidden;
13 | 	position: relative;
14 | 	img {
15 | 		width: 400px;
16 | 	}
17 | 	i {
18 | 		position: absolute;
19 | 		left: 50px;
20 | 		top: 30px;
21 | 		border-radius: 100%;
22 | 		width: 100px;
23 | 		height: 50px;
24 | 		box-shadow: 0 0 0 9999px rgba(#000, .5);
25 | 	}
26 | }
27 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/立体按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="立体按钮">
 3 | 		<button class="stereo-btn">iCSS</button>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .stereo-btn {
 9 | 	padding: 10px 20px;
10 | 	border: none;
11 | 	border-radius: 10px;
12 | 	outline: none;
13 | 	background-image: linear-gradient(#09f, #3c9);
14 | 	box-shadow: 0 10px 0 #09f;
15 | 	cursor: pointer;
16 | 	text-shadow: 0 5px 5px #ccc;
17 | 	font-size: 50px;
18 | 	color: #fff;
19 | 	transition: all 300ms;
20 | 	&:active {
21 | 		box-shadow: 0 5px 0 #09f;
22 | 		transform: translate3d(0, 5px, 0);
23 | 	}
24 | }
25 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/立体按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="立体按钮">
 3 | 		<button class="stereo-btn">iCSS</button>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .stereo-btn {
 9 | 	padding: 10px 20px;
10 | 	border: none;
11 | 	border-radius: 10px;
12 | 	outline: none;
13 | 	background-image: linear-gradient(#09f, #3c9);
14 | 	box-shadow: 0 10px 0 #09f;
15 | 	cursor: pointer;
16 | 	text-shadow: 0 5px 5px #ccc;
17 | 	font-size: 50px;
18 | 	color: #fff;
19 | 	transition: all 300ms;
20 | 	&:active {
21 | 		box-shadow: 0 5px 0 #09f;
22 | 		transform: translate3d(0, 5px, 0);
23 | 	}
24 | }
25 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/图像换色器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="图像换色器">
 3 | 		<div class="color-changer">
 4 | 			<input type="color" value="#ff6666">
 5 | 			<img src="https://static.yangzw.vip/codepen/car.jpg">
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .bruce {
12 | 	padding: 0;
13 | }
14 | .color-changer {
15 | 	overflow: hidden;
16 | 	position: relative;
17 | 	height: 100%;
18 | 	input {
19 | 		position: absolute;
20 | 		width: 100%;
21 | 		height: 100%;
22 | 		mix-blend-mode: hue;
23 | 		cursor: pointer;
24 | 	}
25 | 	img {
26 | 		width: 100%;
27 | 		height: 100%;
28 | 		object-fit: cover;
29 | 	}
30 | }
31 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/图像换色器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="图像换色器">
 3 | 		<div class="color-changer">
 4 | 			<input type="color" value="#ff6666">
 5 | 			<img src="https://jowayyoung.github.io/static/img/icss/car.jpg">
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .bruce {
12 | 	padding: 0;
13 | }
14 | .color-changer {
15 | 	overflow: hidden;
16 | 	position: relative;
17 | 	height: 100%;
18 | 	input {
19 | 		position: absolute;
20 | 		width: 100%;
21 | 		height: 100%;
22 | 		mix-blend-mode: hue;
23 | 		cursor: pointer;
24 | 	}
25 | 	img {
26 | 		width: 100%;
27 | 		height: 100%;
28 | 		object-fit: cover;
29 | 	}
30 | }
31 | </style>


--------------------------------------------------------------------------------
/icss-set/brucerc.js:
--------------------------------------------------------------------------------
 1 | /* 详情请参考文档：https://github.com/JowayYoung/bruce-cli */
 2 | module.exports = {
 3 | 	alias: {
 4 | 		"vue-router": "vue-router/dist/vue-router.min.js"
 5 | 	}, // 模块导入快捷方式
 6 | 	browserList: [], // 目标浏览器配置列表
 7 | 	errorCb: null, // 构建失败回调函数
 8 | 	eslintIgnores: [], // Eslint忽略路径列表
 9 | 	eslintRules: {}, // Eslint校验规则列表
10 | 	frame: "vue", // 开发框架
11 | 	includeModules: [], // 编译模块白名单列表(node_modules/xxx)
12 | 	openPath: "", // 开发环境下浏览器打开后显示URL路径
13 | 	proxy: {}, // 接口代理
14 | 	style: "scss", // 样式格式
15 | 	stylelintIgnores: [], // Stylelint忽略路径列表
16 | 	stylelintRules: {}, // Stylelint校验规则列表
17 | 	successCb: null, // 构建成功回调函数
18 | 	uploadOpts: null, // 上传配置函数
19 | 	useTs: false // 集成TypeScript
20 | };


--------------------------------------------------------------------------------
/icss-set/src/components/component/圆角进度条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="圆角进度条">
 3 | 		<div class="fillet-progressbar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin progress-bar($width: 100px, $height: 10px, $color: #f66, $percent: 0) {
 9 | 	border-radius: $height / 2;
10 | 	width: $width;
11 | 	height: $height;
12 | 	background-color: #ccc;
13 | 	background-image: radial-gradient(closest-side circle at $percent, $color, $color 100%, transparent),
14 | 		linear-gradient($color, $color);
15 | 	background-repeat: no-repeat;
16 | 	background-size: 100%, $percent;
17 | }
18 | .fillet-progressbar {
19 | 	@include progress-bar(500px, 10px, #66f, 50%);
20 | }
21 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/圆角进度条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="圆角进度条">
 3 | 		<div class="fillet-progressbar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin progress-bar($width: 100px, $height: 10px, $color: #f66, $percent: 0) {
 9 | 	border-radius: calc($height / 2);
10 | 	width: $width;
11 | 	height: $height;
12 | 	background-color: #ccc;
13 | 	background-image: radial-gradient(closest-side circle at $percent, $color, $color 100%, transparent),
14 | 		linear-gradient($color, $color);
15 | 	background-repeat: no-repeat;
16 | 	background-size: 100%, $percent;
17 | }
18 | .fillet-progressbar {
19 | 	@include progress-bar(500px, 10px, #66f, 50%);
20 | }
21 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用filter描绘彩色阴影.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter描绘彩色阴影">
 3 | 		<div class="avatar-shadow"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | $avatar: "https://static.yangzw.vip/codepen/thor.jpg";
 9 | .avatar-shadow {
10 | 	position: relative;
11 | 	border-radius: 100%;
12 | 	width: 200px;
13 | 	height: 200px;
14 | 	background: url($avatar) no-repeat center/cover;
15 | 	&::after {
16 | 		position: absolute;
17 | 		left: 0;
18 | 		top: 10%;
19 | 		z-index: -1;
20 | 		border-radius: 100%;
21 | 		width: 100%;
22 | 		height: 100%;
23 | 		background: inherit;
24 | 		filter: blur(10px) brightness(80%) opacity(.8);
25 | 		content: "";
26 | 		transform: scale(.95);
27 | 	}
28 | }
29 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用linear-gradient()控制闪烁文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()控制闪烁文本">
 3 | 		<p class="blink-text tac">🔥若对CSS技巧很感兴趣，请关注我喔</p>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .blink-text {
 9 | 	width: 100%;
10 | 	background-image: linear-gradient(-45deg, #f66 30%, #fff 50%, #f66 70%);
11 | 	background-size: 200%;
12 | 	background-clip: text;
13 | 	background-blend-mode: hard-light;
14 | 	font-weight: bold;
15 | 	font-size: 20px;
16 | 	color: transparent;
17 | 	animation: shine 2s infinite;
18 | 	-webkit-text-fill-color: transparent;
19 | }
20 | @keyframes shine {
21 | 	from {
22 | 		background-position: 100%;
23 | 	}
24 | 	to {
25 | 		background-position: 0;
26 | 	}
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用filter描绘彩色阴影.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter描绘彩色阴影">
 3 | 		<div class="avatar-shadow"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | $avatar: "https://jowayyoung.github.io/static/img/icss/thor.jpg";
 9 | .avatar-shadow {
10 | 	position: relative;
11 | 	border-radius: 100%;
12 | 	width: 200px;
13 | 	height: 200px;
14 | 	background: url($avatar) no-repeat center/cover;
15 | 	&::after {
16 | 		position: absolute;
17 | 		left: 0;
18 | 		top: 10%;
19 | 		z-index: -1;
20 | 		border-radius: 100%;
21 | 		width: 100%;
22 | 		height: 100%;
23 | 		background: inherit;
24 | 		filter: blur(10px) brightness(80%) opacity(.8);
25 | 		content: "";
26 | 		transform: scale(.95);
27 | 	}
28 | }
29 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用linear-gradient()控制渐变背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用linear-gradient()控制渐变背景">
 3 | 		<div class="gradient-bg">iCSS</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	padding: 0;
10 | 	height: 400px;
11 | }
12 | .gradient-bg {
13 | 	display: flex;
14 | 	justify-content: center;
15 | 	align-items: center;
16 | 	height: 100%;
17 | 	background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
18 | 	font-weight: bold;
19 | 	font-size: 100px;
20 | 	color: #fff;
21 | 	animation: move 10s infinite;
22 | }
23 | @keyframes move {
24 | 	0%,
25 | 	100% {
26 | 		background-position-x: left;
27 | 	}
28 | 	50% {
29 | 		background-position-x: right;
30 | 	}
31 | }
32 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用transform描绘动感心形.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用transform描绘动感心形">
 3 | 		<div class="heart-shape"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	padding: 150px 0 100px;
10 | }
11 | .heart-shape {
12 | 	position: relative;
13 | 	width: 200px;
14 | 	height: 200px;
15 | 	background-color: #f66;
16 | 	transform: rotate(45deg);
17 | 	&::before,
18 | 	&::after {
19 | 		position: absolute;
20 | 		left: 0;
21 | 		top: 0;
22 | 		border-radius: 100%;
23 | 		width: 100%;
24 | 		height: 100%;
25 | 		background-color: #f66;
26 | 		content: "";
27 | 	}
28 | 	&::before {
29 | 		transform: translateX(-50%);
30 | 	}
31 | 	&::after {
32 | 		transform: translateY(-50%);
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用linear-gradient()控制渐变背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用linear-gradient()控制渐变背景">
 3 | 		<div class="gradient-bg">iCSS</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	padding: 0;
10 | 	height: 400px;
11 | }
12 | .gradient-bg {
13 | 	display: flex;
14 | 	justify-content: center;
15 | 	align-items: center;
16 | 	height: 100%;
17 | 	background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
18 | 	font-weight: bold;
19 | 	font-size: 100px;
20 | 	color: #fff;
21 | 	animation: move 10s infinite;
22 | }
23 | @keyframes move {
24 | 	0%,
25 | 	100% {
26 | 		background-position-x: left;
27 | 	}
28 | 	50% {
29 | 		background-position-x: right;
30 | 	}
31 | }
32 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用linear-gradient()控制闪烁文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()控制闪烁文本">
 3 | 		<p class="blink-text tac">🔥若对CSS技巧很感兴趣，请关注我喔</p>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .blink-text {
 9 | 	width: 100%;
10 | 	background-image: linear-gradient(-45deg, #f66 30%, #fff 50%, #f66 70%);
11 | 	background-size: 200%;
12 | 	background-clip: text;
13 | 	background-blend-mode: hard-light;
14 | 	font-weight: bold;
15 | 	font-size: 20px;
16 | 	color: transparent;
17 | 	animation: shine 2s infinite;
18 | 	// -webkit-text-fill-color: transparent;
19 | }
20 | @keyframes shine {
21 | 	from {
22 | 		background-position: 100%;
23 | 	}
24 | 	to {
25 | 		background-position: 0;
26 | 	}
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用transform描绘动感心形.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用transform描绘动感心形">
 3 | 		<div class="heart-shape"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	padding: 150px 0 100px;
10 | }
11 | .heart-shape {
12 | 	position: relative;
13 | 	width: 200px;
14 | 	height: 200px;
15 | 	background-color: #f66;
16 | 	transform: rotate(45deg);
17 | 	&::before,
18 | 	&::after {
19 | 		position: absolute;
20 | 		left: 0;
21 | 		top: 0;
22 | 		border-radius: 100%;
23 | 		width: 100%;
24 | 		height: 100%;
25 | 		background-color: #f66;
26 | 		content: "";
27 | 	}
28 | 	&::before {
29 | 		transform: translateX(-50%);
30 | 	}
31 | 	&::after {
32 | 		transform: translateY(-50%);
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/加载指示器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="加载指示器">
 3 | 		<div class="loading-indicator">加载中<span></span></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .loading-indicator {
 9 | 	font-size: 16px;
10 | 	color: #09f;
11 | 	span {
12 | 		display: inline-block;
13 | 		overflow: hidden;
14 | 		height: 1em;
15 | 		line-height: 1;
16 | 		vertical-align: -.25em;
17 | 		&::after {
18 | 			display: block;
19 | 			white-space: pre-wrap;
20 | 			content: "...\A..\A.";
21 | 			animation: loading 3s infinite step-start both;
22 | 		}
23 | 	}
24 | }
25 | @keyframes loading {
26 | 	33% {
27 | 		transform: translate3d(0, -2em, 0);
28 | 	}
29 | 	66% {
30 | 		transform: translate3d(0, -1em, 0);
31 | 	}
32 | }
33 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/加载指示器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="加载指示器">
 3 | 		<div class="loading-indicator">加载中<span></span></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .loading-indicator {
 9 | 	font-size: 16px;
10 | 	color: #09f;
11 | 	span {
12 | 		display: inline-block;
13 | 		overflow: hidden;
14 | 		height: 1em;
15 | 		line-height: 1;
16 | 		vertical-align: -.25em;
17 | 		&::after {
18 | 			display: block;
19 | 			white-space: pre-wrap;
20 | 			content: "...\A..\A.";
21 | 			animation: loading 3s infinite step-start both;
22 | 		}
23 | 	}
24 | }
25 | @keyframes loading {
26 | 	33% {
27 | 		transform: translate3d(0, -2em, 0);
28 | 	}
29 | 	66% {
30 | 		transform: translate3d(0, -1em, 0);
31 | 	}
32 | }
33 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/螺纹进度条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="螺纹进度条">
 3 | 		<div class="thread-progressbar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .thread-progressbar {
 9 | 	position: relative;
10 | 	padding-right: 200px;
11 | 	width: 500px;
12 | 	height: calc(1.4142 * 20px);
13 | 	background: repeating-linear-gradient(45deg, #3c9, #3c9 10px, transparent 11px, transparent 19px, #3c9 20px) 0 0 content-box;
14 | 	animation: twill 1s linear infinite;
15 | 	&::after {
16 | 		position: absolute;
17 | 		width: 100%;
18 | 		height: 100%;
19 | 		background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
20 | 		content: "";
21 | 	}
22 | }
23 | @keyframes twill {
24 | 	to {
25 | 		background-position-y: calc(-1 * 1.4142 * 40px);
26 | 	}
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/螺纹进度条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="螺纹进度条">
 3 | 		<div class="thread-progressbar"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .thread-progressbar {
 9 | 	position: relative;
10 | 	padding-right: 200px;
11 | 	width: 500px;
12 | 	height: calc(1.4142 * 20px);
13 | 	background: repeating-linear-gradient(45deg, #3c9, #3c9 10px, transparent 11px, transparent 19px, #3c9 20px) 0 0 content-box;
14 | 	animation: twill 1s linear infinite;
15 | 	&::after {
16 | 		position: absolute;
17 | 		width: 100%;
18 | 		height: 100%;
19 | 		background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
20 | 		content: "";
21 | 	}
22 | }
23 | @keyframes twill {
24 | 	to {
25 | 		background-position-y: calc(-1 * 1.4142 * 40px);
26 | 	}
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@nth-child()选择指定元素.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:nth-child()选择指定元素">
 3 | 		<ul class="specified-scope">
 4 | 			<li>10001</li>
 5 | 			<li>10002</li>
 6 | 			<li>10003</li>
 7 | 			<li>10004</li>
 8 | 			<li>10005</li>
 9 | 			<li>10006</li>
10 | 			<li>10007</li>
11 | 			<li>10008</li>
12 | 			<li>10009</li>
13 | 			<li>10010</li>
14 | 		</ul>
15 | 	</div>
16 | </template>
17 | 
18 | <style lang="scss" scoped>
19 | .specified-scope {
20 | 	width: 300px;
21 | 	li {
22 | 		padding: 0 20px;
23 | 		height: 40px;
24 | 		line-height: 40px;
25 | 		color: #fff;
26 | 		&:nth-child(odd) {
27 | 			background-color: #f66;
28 | 		}
29 | 		&:nth-child(even) {
30 | 			background-color: #66f;
31 | 		}
32 | 		&:nth-child(n+6):nth-child(-n+10) {
33 | 			background-color: #3c9;
34 | 		}
35 | 	}
36 | }
37 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@nth-child()选择指定元素.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:nth-child()选择指定元素">
 3 | 		<ul class="specified-scope">
 4 | 			<li>10001</li>
 5 | 			<li>10002</li>
 6 | 			<li>10003</li>
 7 | 			<li>10004</li>
 8 | 			<li>10005</li>
 9 | 			<li>10006</li>
10 | 			<li>10007</li>
11 | 			<li>10008</li>
12 | 			<li>10009</li>
13 | 			<li>10010</li>
14 | 		</ul>
15 | 	</div>
16 | </template>
17 | 
18 | <style lang="scss" scoped>
19 | .specified-scope {
20 | 	width: 300px;
21 | 	li {
22 | 		padding: 0 20px;
23 | 		height: 40px;
24 | 		line-height: 40px;
25 | 		color: #fff;
26 | 		&:nth-child(odd) {
27 | 			background-color: #f66;
28 | 		}
29 | 		&:nth-child(even) {
30 | 			background-color: #66f;
31 | 		}
32 | 		&:nth-child(n+6):nth-child(-n+10) {
33 | 			background-color: #3c9;
34 | 		}
35 | 	}
36 | }
37 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/条形加载条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="条形加载条">
 3 | 		<ul class="strip-loading">
 4 | 			<li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .strip-loading {
11 | 	display: flex;
12 | 	justify-content: center;
13 | 	align-items: center;
14 | 	width: 200px;
15 | 	height: 200px;
16 | 	li {
17 | 		--time: calc((var(--line-index) - 1) * 200ms);
18 | 		border-radius: 3px;
19 | 		width: 6px;
20 | 		height: 30px;
21 | 		background-color: #f66;
22 | 		animation: beat 1.5s ease-in-out var(--time) infinite;
23 | 		& + li {
24 | 			margin-left: 5px;
25 | 		}
26 | 	}
27 | }
28 | @keyframes beat {
29 | 	0%,
30 | 	100% {
31 | 		transform: scaleY(1);
32 | 	}
33 | 	50% {
34 | 		transform: scaleY(.5);
35 | 	}
36 | }
37 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用linear-gradient()描绘波浪划线.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘波浪划线">
 3 | 		<p class="waveline-text">波浪线文字</p>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin waveline($h, $color: #f66) {
 9 | 	position: relative;
10 | 	&::after {
11 | 		position: absolute;
12 | 		left: 0;
13 | 		top: 100%;
14 | 		width: 100%;
15 | 		height: $h;
16 | 		background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
17 | 			linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
18 | 		background-size: $h * 2 $h * 2;
19 | 		content: "";
20 | 	}
21 | }
22 | .waveline-text {
23 | 	height: 20px;
24 | 	line-height: 20px;
25 | 	letter-spacing: 10px;
26 | 	@include waveline(10px);
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/条形加载条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="条形加载条">
 3 | 		<ul class="strip-loading">
 4 | 			<li v-for="v in 6" :key="v" :style="`--line-index: ${v};`"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .strip-loading {
11 | 	display: flex;
12 | 	justify-content: center;
13 | 	align-items: center;
14 | 	width: 200px;
15 | 	height: 200px;
16 | 	li {
17 | 		--time: calc((var(--line-index) - 1) * 200ms);
18 | 		border-radius: 3px;
19 | 		width: 6px;
20 | 		height: 30px;
21 | 		background-color: #f66;
22 | 		animation: beat 1.5s ease-in-out var(--time) infinite;
23 | 		& + li {
24 | 			margin-left: 5px;
25 | 		}
26 | 	}
27 | }
28 | @keyframes beat {
29 | 	0%,
30 | 	100% {
31 | 		transform: scaleY(1);
32 | 	}
33 | 	50% {
34 | 		transform: scaleY(.5);
35 | 	}
36 | }
37 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用linear-gradient()描绘波浪划线.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用linear-gradient()描绘波浪划线">
 3 | 		<p class="waveline-text">波浪线文字</p>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin waveline($h, $color: #f66) {
 9 | 	position: relative;
10 | 	&::after {
11 | 		position: absolute;
12 | 		left: 0;
13 | 		top: 100%;
14 | 		width: 100%;
15 | 		height: $h;
16 | 		background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
17 | 			linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
18 | 		background-size: $h * 2 $h * 2;
19 | 		content: "";
20 | 	}
21 | }
22 | .waveline-text {
23 | 	height: 20px;
24 | 	line-height: 20px;
25 | 	letter-spacing: 10px;
26 | 	@include waveline(10px);
27 | }
28 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/专栏头像.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="专栏头像">
 3 | 		<div class="article-avatar">
 4 | 			<p class="left">JowayYoung</p>
 5 | 			<p class="right">谈前端</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .article-avatar {
12 | 	display: flex;
13 | 	flex-flow: column wrap;
14 | 	justify-content: center;
15 | 	align-items: center;
16 | 	border-radius: 100%;
17 | 	width: 250px;
18 | 	height: 250px;
19 | 	background-color: #f66;
20 | 	box-shadow: 0 0 50px 5px rgba(#000, .2) inset;
21 | 	line-height: 50px;
22 | 	text-shadow: 5px 5px 10px rgba(#000, .5);
23 | 	font-weight: bold;
24 | 	font-size: 30px;
25 | 	color: #fff;
26 | 	.left {
27 | 		border-top: 3px solid #fff;
28 | 		text-indent: -1em;
29 | 	}
30 | 	.right {
31 | 		text-indent: 2em;
32 | 		font-size: 40px;
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/专栏头像.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="专栏头像">
 3 | 		<div class="article-avatar">
 4 | 			<p class="left">JowayYoung</p>
 5 | 			<p class="right">谈前端</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .article-avatar {
12 | 	display: flex;
13 | 	flex-flow: column wrap;
14 | 	justify-content: center;
15 | 	align-items: center;
16 | 	border-radius: 100%;
17 | 	width: 250px;
18 | 	height: 250px;
19 | 	background-color: #f66;
20 | 	box-shadow: 0 0 50px 5px rgba(#000, .2) inset;
21 | 	line-height: 50px;
22 | 	text-shadow: 5px 5px 10px rgba(#000, .5);
23 | 	font-weight: bold;
24 | 	font-size: 30px;
25 | 	color: #fff;
26 | 	.left {
27 | 		border-top: 3px solid #fff;
28 | 		text-indent: -1em;
29 | 	}
30 | 	.right {
31 | 		text-indent: 2em;
32 | 		font-size: 40px;
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用float排版环绕文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用float排版环绕文本">
 3 | 		<div class="text-wrapping">
 4 | 			<img src="https://static.yangzw.vip/codepen/thor.jpg">
 5 | 			XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .text-wrapping {
12 | 	overflow: hidden;
13 | 	width: 400px;
14 | 	height: 300px;
15 | 	font-size: 20px;
16 | 	color: #f66;
17 | 	word-break: break-all;
18 | 	img {
19 | 		float: left;
20 | 		margin: 10px;
21 | 		height: 200px;
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss/brucerc.js:
--------------------------------------------------------------------------------
 1 | /* 详情请参考文档：https://doc.yangzw.vip/bruce/app */
 2 | module.exports = {
 3 | 	alias: {}, // 快捷方式：Object
 4 | 	browsers: [], // 兼容列表：Array
 5 | 	buildErrorCb: null, // 构建失败回调函数：Function
 6 | 	buildSuccessCb: null, // 构建成功回调函数：Function
 7 | 	eslintIgnores: [], // Eslint忽略路径列表：Array
 8 | 	eslintRules: {
 9 | 		"vue/name-property-casing": ["off"]
10 | 	}, // Eslint校验规则列表：Object
11 | 	frame: "vue", // 开发框架：String
12 | 	openPages: [], // 打开页面：Array
13 | 	proxy: {}, // 接口代理：Object或Array
14 | 	proxyHost: "", // 代理域名：String
15 | 	publicPath: "", // 公共路径：String或Function
16 | 	scriptAssets: [], // 脚本资源：Array
17 | 	style: "scss", // 预设样式：String
18 | 	styleAssets: [], // 样式资源：Array
19 | 	stylelintIgnores: [], // Stylelint忽略路径列表：Array
20 | 	stylelintRules: {}, // Stylelint校验规则列表：Object
21 | 	uploadOpts: null, // 上传配置：Object或Function
22 | 	useTs: true // 集成TypeScript：Boolean
23 | };


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@hover控制悬浮边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:hover控制悬浮边框">
 3 | 		<div class="dynamic-border">iCSS</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .dynamic-border {
 9 | 	width: 200px;
10 | 	height: 80px;
11 | 	background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px,
12 | 		linear-gradient(-90deg, #f66 2px, #f66 2px) no-repeat right top/2px 0,
13 | 		linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px,
14 | 		linear-gradient(-270deg, #f66 2px, #f66 2px) no-repeat left bottom/2px 0;
15 | 	cursor: pointer;
16 | 	line-height: 80px;
17 | 	text-align: center;
18 | 	font-weight: bold;
19 | 	font-size: 50px;
20 | 	color: #f66;
21 | 	transition: all 300ms;
22 | 	&:hover {
23 | 		background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
24 | 	}
25 | }
26 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/星级评分.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="星级评分">
 3 | 		<div class="star-rating">
 4 | 			<input v-for="v in 5" :key="v" type="radio" name="rate">
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .star-rating {
11 | 	display: flex;
12 | 	flex-direction: row-reverse;
13 | 	input {
14 | 		width: 30px;
15 | 		height: 30px;
16 | 		appearance: none;
17 | 		cursor: pointer;
18 | 		line-height: 30px;
19 | 		text-align: center;
20 | 		font-size: 30px;
21 | 		transition: all 300ms;
22 | 		&::after {
23 | 			color: #66f;
24 | 			content: "☆";
25 | 			transition: all 300ms;
26 | 		}
27 | 		&:hover {
28 | 			transform: scale(1.2);
29 | 		}
30 | 		&:checked,
31 | 		&:hover {
32 | 			&::after,
33 | 			& ~ input::after {
34 | 				color: #f66;
35 | 				content: "★";
36 | 			}
37 | 		}
38 | 	}
39 | }
40 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@hover控制悬浮边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:hover控制悬浮边框">
 3 | 		<div class="dynamic-border">iCSS</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .dynamic-border {
 9 | 	width: 200px;
10 | 	height: 80px;
11 | 	background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px,
12 | 		linear-gradient(-90deg, #f66 2px, #f66 2px) no-repeat right top/2px 0,
13 | 		linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px,
14 | 		linear-gradient(-270deg, #f66 2px, #f66 2px) no-repeat left bottom/2px 0;
15 | 	cursor: pointer;
16 | 	line-height: 80px;
17 | 	text-align: center;
18 | 	font-weight: bold;
19 | 	font-size: 50px;
20 | 	color: #f66;
21 | 	transition: all 300ms;
22 | 	&:hover {
23 | 		background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
24 | 	}
25 | }
26 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@not()去除无用属性.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:not()去除无用属性">
 3 | 		<ul class="cleared-attr">
 4 | 			<li class="first-line">
 5 | 				<span>A</span>
 6 | 				<span>B</span>
 7 | 				<span>C</span>
 8 | 				<span>D</span>
 9 | 				<span>E</span>
10 | 			</li>
11 | 			<li class="second-line">
12 | 				<span>A</span>
13 | 				<span>B</span>
14 | 				<span>C</span>
15 | 				<span>D</span>
16 | 				<span>E</span>
17 | 			</li>
18 | 		</ul>
19 | 	</div>
20 | </template>
21 | 
22 | <style lang="scss" scoped>
23 | .cleared-attr {
24 | 	li {
25 | 		height: 40px;
26 | 		line-height: 40px;
27 | 	}
28 | 	span {
29 | 		display: inline-block;
30 | 		color: #66f;
31 | 	}
32 | 	.first-line span:not(:last-child)::after {
33 | 		content: ",";
34 | 	}
35 | 	.second-line span:not(:nth-child(-n+3)) {
36 | 		display: none;
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/星级评分.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="星级评分">
 3 | 		<div class="star-rating">
 4 | 			<input v-for="v in 5" :key="v" type="radio" name="rate">
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .star-rating {
11 | 	display: flex;
12 | 	flex-direction: row-reverse;
13 | 	input {
14 | 		width: 30px;
15 | 		height: 30px;
16 | 		appearance: none;
17 | 		cursor: pointer;
18 | 		line-height: 30px;
19 | 		text-align: center;
20 | 		font-size: 30px;
21 | 		transition: all 300ms;
22 | 		&::after {
23 | 			color: #66f;
24 | 			content: "☆";
25 | 			transition: all 300ms;
26 | 		}
27 | 		&:hover {
28 | 			transform: scale(1.2);
29 | 		}
30 | 		&:checked,
31 | 		&:hover {
32 | 			&::after,
33 | 			& ~ input::after {
34 | 				color: #f66;
35 | 				content: "★";
36 | 			}
37 | 		}
38 | 	}
39 | }
40 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@not()去除无用属性.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:not()去除无用属性">
 3 | 		<ul class="cleared-attr">
 4 | 			<li class="first-line">
 5 | 				<span>A</span>
 6 | 				<span>B</span>
 7 | 				<span>C</span>
 8 | 				<span>D</span>
 9 | 				<span>E</span>
10 | 			</li>
11 | 			<li class="second-line">
12 | 				<span>A</span>
13 | 				<span>B</span>
14 | 				<span>C</span>
15 | 				<span>D</span>
16 | 				<span>E</span>
17 | 			</li>
18 | 		</ul>
19 | 	</div>
20 | </template>
21 | 
22 | <style lang="scss" scoped>
23 | .cleared-attr {
24 | 	li {
25 | 		height: 40px;
26 | 		line-height: 40px;
27 | 	}
28 | 	span {
29 | 		display: inline-block;
30 | 		color: #66f;
31 | 	}
32 | 	.first-line span:not(:last-child)::after {
33 | 		content: ",";
34 | 	}
35 | 	.second-line span:not(:nth-child(-n+3)) {
36 | 		display: none;
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用float排版环绕文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用float排版环绕文本">
 3 | 		<div class="text-wrapping">
 4 | 			<img src="https://jowayyoung.github.io/static/img/icss/thor.jpg">
 5 | 			XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .text-wrapping {
12 | 	overflow: hidden;
13 | 	width: 400px;
14 | 	height: 300px;
15 | 	font-size: 20px;
16 | 	color: #f66;
17 | 	word-break: break-all;
18 | 	img {
19 | 		float: left;
20 | 		margin: 10px;
21 | 		height: 200px;
22 | 	}
23 | }
24 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/手风琴.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="手风琴">
 3 | 		<ul class="accordion">
 4 | 			<li v-for="v in 6" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .accordion {
11 | 	display: flex;
12 | 	width: 600px;
13 | 	height: 200px;
14 | 	li {
15 | 		flex: 1;
16 | 		cursor: pointer;
17 | 		transition: all 300ms;
18 | 		&:nth-child(1) {
19 | 			background-color: #f66;
20 | 		}
21 | 		&:nth-child(2) {
22 | 			background-color: #66f;
23 | 		}
24 | 		&:nth-child(3) {
25 | 			background-color: #f90;
26 | 		}
27 | 		&:nth-child(4) {
28 | 			background-color: #09f;
29 | 		}
30 | 		&:nth-child(5) {
31 | 			background-color: #9c3;
32 | 		}
33 | 		&:nth-child(6) {
34 | 			background-color: #3c9;
35 | 		}
36 | 		&:hover {
37 | 			flex: 2;
38 | 			background-color: #ccc;
39 | 		}
40 | 	}
41 | }
42 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/手风琴.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="手风琴">
 3 | 		<ul class="accordion">
 4 | 			<li v-for="v in 6" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .accordion {
11 | 	display: flex;
12 | 	width: 600px;
13 | 	height: 200px;
14 | 	li {
15 | 		flex: 1;
16 | 		cursor: pointer;
17 | 		transition: all 300ms;
18 | 		&:nth-child(1) {
19 | 			background-color: #f66;
20 | 		}
21 | 		&:nth-child(2) {
22 | 			background-color: #66f;
23 | 		}
24 | 		&:nth-child(3) {
25 | 			background-color: #f90;
26 | 		}
27 | 		&:nth-child(4) {
28 | 			background-color: #09f;
29 | 		}
30 | 		&:nth-child(5) {
31 | 			background-color: #9c3;
32 | 		}
33 | 		&:nth-child(6) {
34 | 			background-color: #3c9;
35 | 		}
36 | 		&:hover {
37 | 			flex: 2;
38 | 			background-color: #ccc;
39 | 		}
40 | 	}
41 | }
42 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用animation-delay保留动画首帧.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用animation-delay保留动画首帧">
 3 | 		<ul class="initial-keyframe">
 4 | 			<li v-for="v in 3" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .bruce {
11 | 	padding: 150px 0;
12 | }
13 | .initial-keyframe {
14 | 	position: relative;
15 | 	width: 100px;
16 | 	height: 100px;
17 | 	li {
18 | 		position: absolute;
19 | 		border-radius: 100%;
20 | 		width: 100%;
21 | 		height: 100%;
22 | 		background-color: #3c9;
23 | 		transform: rotate(0) translate(-80px, 0);
24 | 		animation: rotate 3s linear infinite;
25 | 		&:nth-child(2) {
26 | 			animation-delay: -1s;
27 | 		}
28 | 		&:nth-child(3) {
29 | 			animation-delay: -2s;
30 | 		}
31 | 	}
32 | }
33 | @keyframes rotate {
34 | 	to {
35 | 		transform: rotate(1turn) translate(-80px, 0);
36 | 	}
37 | }
38 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用animation-delay保留动画首帧.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用animation-delay保留动画首帧">
 3 | 		<ul class="initial-keyframe">
 4 | 			<li v-for="v in 3" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .bruce {
11 | 	padding: 150px 0;
12 | }
13 | .initial-keyframe {
14 | 	position: relative;
15 | 	width: 100px;
16 | 	height: 100px;
17 | 	li {
18 | 		position: absolute;
19 | 		border-radius: 100%;
20 | 		width: 100%;
21 | 		height: 100%;
22 | 		background-color: #3c9;
23 | 		transform: rotate(0) translate(-80px, 0);
24 | 		animation: rotate 3s linear infinite;
25 | 		&:nth-child(2) {
26 | 			animation-delay: -1s;
27 | 		}
28 | 		&:nth-child(3) {
29 | 			animation-delay: -2s;
30 | 		}
31 | 	}
32 | }
33 | @keyframes rotate {
34 | 	to {
35 | 		transform: rotate(1turn) translate(-80px, 0);
36 | 	}
37 | }
38 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用transform描绘像素边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用transform描绘像素边框">
 3 | 		<div class="onepx-border normal">1px</div>
 4 | 		<div class="onepx-border thin">0.5px</div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .onepx-border {
10 | 	width: 200px;
11 | 	height: 80px;
12 | 	cursor: pointer;
13 | 	line-height: 80px;
14 | 	text-align: center;
15 | 	font-weight: bold;
16 | 	font-size: 50px;
17 | 	color: #f66;
18 | 	& + .onepx-border {
19 | 		margin-top: 10px;
20 | 	}
21 | 	&.normal {
22 | 		border: 1px solid #f66;
23 | 	}
24 | 	&.thin {
25 | 		position: relative;
26 | 		&::after {
27 | 			position: absolute;
28 | 			left: 0;
29 | 			top: 0;
30 | 			border: 1px solid #f66;
31 | 			width: 200%;
32 | 			height: 200%;
33 | 			content: "";
34 | 			transform: scale(.5);
35 | 			transform-origin: left top;
36 | 		}
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用transform描绘像素边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用transform描绘像素边框">
 3 | 		<div class="onepx-border normal">1px</div>
 4 | 		<div class="onepx-border thin">0.5px</div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .onepx-border {
10 | 	width: 200px;
11 | 	height: 80px;
12 | 	cursor: pointer;
13 | 	line-height: 80px;
14 | 	text-align: center;
15 | 	font-weight: bold;
16 | 	font-size: 50px;
17 | 	color: #f66;
18 | 	& + .onepx-border {
19 | 		margin-top: 10px;
20 | 	}
21 | 	&.normal {
22 | 		border: 1px solid #f66;
23 | 	}
24 | 	&.thin {
25 | 		position: relative;
26 | 		&::after {
27 | 			position: absolute;
28 | 			left: 0;
29 | 			top: 0;
30 | 			border: 1px solid #f66;
31 | 			width: 200%;
32 | 			height: 200%;
33 | 			content: "";
34 | 			transform: scale(.5);
35 | 			transform-origin: left top;
36 | 		}
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用clip描绘蛇形边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip描绘蛇形边框">
 3 | 		<div class="snakelike-border"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .snakelike-border {
 9 | 	position: relative;
10 | 	width: 190px;
11 | 	height: 190px;
12 | 	background-color: #3c9;
13 | 	&::before,
14 | 	&::after {
15 | 		position: absolute;
16 | 		left: -5px;
17 | 		right: -5px;
18 | 		top: -5px;
19 | 		bottom: -5px;
20 | 		border: 5px solid;
21 | 		content: "";
22 | 		animation: move 5s linear infinite;
23 | 	}
24 | 	&::before {
25 | 		border-color: #f66;
26 | 	}
27 | 	&::after {
28 | 		border-color: #66f;
29 | 		animation-delay: -2.5s;
30 | 	}
31 | }
32 | @keyframes move {
33 | 	0%,
34 | 	100% {
35 | 		clip: rect(0 200px 5px 0);
36 | 	}
37 | 	25% {
38 | 		clip: rect(0 200px 200px 195px);
39 | 	}
40 | 	50% {
41 | 		clip: rect(195px 200px 200px 0);
42 | 	}
43 | 	75% {
44 | 		clip: rect(0 5px 200px 0);
45 | 	}
46 | }
47 | </style>


--------------------------------------------------------------------------------
/icss/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"allowJs": true,
 4 | 		"allowSyntheticDefaultImports": true,
 5 | 		"baseUrl": ".",
 6 | 		"declaration": true,
 7 | 		"declarationDir": "dist",
 8 | 		"downlevelIteration": true,
 9 | 		"esModuleInterop": true,
10 | 		"experimentalDecorators": true,
11 | 		"forceConsistentCasingInFileNames": true,
12 | 		"jsx": "preserve",
13 | 		"lib": [
14 | 			"DOM",
15 | 			"DOM.Iterable",
16 | 			"ES2015",
17 | 			"ES2016",
18 | 			"ES2017",
19 | 			"ES2018",
20 | 			"ES2019",
21 | 			"ES2020",
22 | 			"ES2021",
23 | 			"ESNext"
24 | 		],
25 | 		"module": "ES6",
26 | 		"moduleResolution": "node",
27 | 		"removeComments": true,
28 | 		"paths": {
29 | 			"#/*": ["*"],
30 | 			"@/*": ["src/*"]
31 | 		},
32 | 		"sourceMap": true,
33 | 		"strict": true,
34 | 		"target": "ES6",
35 | 		"typeRoots": [
36 | 			"node_modules/@types",
37 | 			"typings"
38 | 		]
39 | 	},
40 | 	"exclude": [
41 | 		"node_modules"
42 | 	],
43 | 	"include": [
44 | 		"src"
45 | 	]
46 | }


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用filter描绘动态背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div ref="bg" class="bruce flex-ct-x" data-title="使用filter描绘动态背景">
 3 | 		<a class="dynamic-bg" @mousemove="move"></a>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	--x: 0;
10 | 	--width: 400;
11 | 	--Θ: calc(var(--x) / var(--width) * 1turn);
12 | 	padding: 0;
13 | 	background-color: #3c9;
14 | 	filter: hue-rotate(var(--Θ));
15 | }
16 | .dynamic-bg {
17 | 	overflow: hidden;
18 | 	border-radius: 25px;
19 | 	width: calc(var(--width) * 1px);
20 | 	height: 50px;
21 | 	background-color: #66f;
22 | 	box-shadow: 0 0 2px rgba(#000, .5);
23 | 	cursor: pointer;
24 | 	line-height: 50px;
25 | 	font-weight: bold;
26 | 	font-size: 18px;
27 | 	color: #fff;
28 | }
29 | </style>
30 | 
31 | <script>
32 | export default {
33 | 	mounted() {
34 | 		this.bgStyle = this.$refs.bg.style;
35 | 	},
36 | 	methods: {
37 | 		move(e) {
38 | 			this.bgStyle.setProperty("--x", e.offsetX);
39 | 		}
40 | 	}
41 | };
42 | </script>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用clip描绘蛇形边框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip描绘蛇形边框">
 3 | 		<div class="snakelike-border"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .snakelike-border {
 9 | 	position: relative;
10 | 	width: 190px;
11 | 	height: 190px;
12 | 	background-color: #3c9;
13 | 	&::before,
14 | 	&::after {
15 | 		position: absolute;
16 | 		left: -5px;
17 | 		right: -5px;
18 | 		top: -5px;
19 | 		bottom: -5px;
20 | 		border: 5px solid;
21 | 		content: "";
22 | 		animation: move 5s linear infinite;
23 | 	}
24 | 	&::before {
25 | 		border-color: #f66;
26 | 	}
27 | 	&::after {
28 | 		border-color: #66f;
29 | 		animation-delay: -2.5s;
30 | 	}
31 | }
32 | @keyframes move {
33 | 	0%,
34 | 	100% {
35 | 		clip: rect(0 200px 5px 0);
36 | 	}
37 | 	25% {
38 | 		clip: rect(0 200px 200px 195px);
39 | 	}
40 | 	50% {
41 | 		clip: rect(195px 200px 200px 0);
42 | 	}
43 | 	75% {
44 | 		clip: rect(0 5px 200px 0);
45 | 	}
46 | }
47 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用box-shadow描绘彩虹色带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow描绘彩虹色带">
 3 | 		<div class="rainbow-bar bar-1"></div>
 4 | 		<div class="rainbow-bar bar-2"></div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | $rainbow: 0 0 0 8px #f66 inset,
10 | 	0 0 0 16px #f90 inset,
11 | 	0 0 0 24px #ff3 inset,
12 | 	0 0 0 32px #3c9 inset,
13 | 	0 0 0 40px #9c3 inset,
14 | 	0 0 0 48px #09f inset,
15 | 	0 0 0 56px #66f inset;
16 | .rainbow-bar {
17 | 	width: 250px;
18 | 	&.bar-1 {
19 | 		overflow: hidden;
20 | 		position: relative;
21 | 		height: 125px;
22 | 		&::after {
23 | 			display: block;
24 | 			border-radius: 100%;
25 | 			width: 100%;
26 | 			height: 200%;
27 | 			box-shadow: $rainbow;
28 | 			content: "";
29 | 		}
30 | 	}
31 | 	&.bar-2 {
32 | 		margin: 125px 0 0 50px;
33 | 		border-radius: 100%;
34 | 		height: 250px;
35 | 		box-shadow: $rainbow;
36 | 		clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用box-shadow描绘彩虹色带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow描绘彩虹色带">
 3 | 		<div class="rainbow-bar bar-1"></div>
 4 | 		<div class="rainbow-bar bar-2"></div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | $rainbow: 0 0 0 8px #f66 inset,
10 | 	0 0 0 16px #f90 inset,
11 | 	0 0 0 24px #ff3 inset,
12 | 	0 0 0 32px #3c9 inset,
13 | 	0 0 0 40px #9c3 inset,
14 | 	0 0 0 48px #09f inset,
15 | 	0 0 0 56px #66f inset;
16 | .rainbow-bar {
17 | 	width: 250px;
18 | 	&.bar-1 {
19 | 		overflow: hidden;
20 | 		position: relative;
21 | 		height: 125px;
22 | 		&::after {
23 | 			display: block;
24 | 			border-radius: 100%;
25 | 			width: 100%;
26 | 			height: 200%;
27 | 			box-shadow: $rainbow;
28 | 			content: "";
29 | 		}
30 | 	}
31 | 	&.bar-2 {
32 | 		margin: 125px 0 0 50px;
33 | 		border-radius: 100%;
34 | 		height: 250px;
35 | 		box-shadow: $rainbow;
36 | 		clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
37 | 	}
38 | }
39 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/倒影加载条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="倒影加载条">
 3 | 		<ul class="reflect-loading">
 4 | 			<li v-for="v in 10" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | $count: 10;
11 | $color: #66f #09f;
12 | .bruce {
13 | 	padding-bottom: 150px;
14 | }
15 | .reflect-loading {
16 | 	display: flex;
17 | 	padding: 50px;
18 | 	height: 200px;
19 | 	-webkit-box-reflect: below -100px linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
20 | 	li {
21 | 		width: 20px;
22 | 		@for $i from 0 to $count {
23 | 			$args: append($color, $i * 100% / ($count - 1));
24 | 			&:nth-child(#{$i + 1}) {
25 | 				background-color: mix($args...);
26 | 				animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
27 | 				animation-delay: $i * 50ms;
28 | 			}
29 | 		}
30 | 	}
31 | }
32 | @keyframes rotate {
33 | 	0% {
34 | 		transform: rotate(-.5turn) rotateX(-1turn);
35 | 	}
36 | 	75%,
37 | 	100% {
38 | 		transform: none;
39 | 	}
40 | }
41 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/倒影加载条.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="倒影加载条">
 3 | 		<ul class="reflect-loading">
 4 | 			<li v-for="v in 10" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | $count: 10;
11 | $color: #66f #09f;
12 | .bruce {
13 | 	padding-bottom: 150px;
14 | }
15 | .reflect-loading {
16 | 	display: flex;
17 | 	padding: 50px;
18 | 	height: 200px;
19 | 	-webkit-box-reflect: below -100px linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
20 | 	li {
21 | 		width: 20px;
22 | 		@for $i from 0 to $count {
23 | 			$args: append($color, calc($i * 100% / ($count - 1)));
24 | 			&:nth-child(#{$i + 1}) {
25 | 				background-color: mix($args...);
26 | 				animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
27 | 				animation-delay: $i * 50ms;
28 | 			}
29 | 		}
30 | 	}
31 | }
32 | @keyframes rotate {
33 | 	0% {
34 | 		transform: rotate(-.5turn) rotateX(-1turn);
35 | 	}
36 | 	75%,
37 | 	100% {
38 | 		transform: none;
39 | 	}
40 | }
41 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@empty监听清空状态.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:empty监听清空状态">
 3 | 		<ul class="empty-list">
 4 | 			<li v-for="v in 10" :key="v">Data {{v}}</li>
 5 | 		</ul>
 6 | 		<ul class="empty-list"></ul>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | $empty: "https://yangzw.vip/img/empty.svg";
12 | .empty-list {
13 | 	overflow: auto;
14 | 	width: 200px;
15 | 	height: 150px;
16 | 	outline: 1px solid #3c9;
17 | 	&:empty {
18 | 		display: flex;
19 | 		justify-content: center;
20 | 		align-items: center;
21 | 		background: url($empty) no-repeat center/100px auto;
22 | 		&::after {
23 | 			margin-top: 90px;
24 | 			font-weight: bold;
25 | 			content: "没钱就没数据";
26 | 		}
27 | 	}
28 | 	& + .empty-list {
29 | 		margin-left: 20px;
30 | 	}
31 | 	li {
32 | 		padding: 0 10px;
33 | 		height: 30px;
34 | 		background-color: #09f;
35 | 		line-height: 30px;
36 | 		color: #fff;
37 | 		&:nth-child(even) {
38 | 			background-color: #f90;
39 | 		}
40 | 	}
41 | }
42 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@empty监听清空状态.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:empty监听清空状态">
 3 | 		<ul class="empty-list">
 4 | 			<li v-for="v in 10" :key="v">Data {{v}}</li>
 5 | 		</ul>
 6 | 		<ul class="empty-list"></ul>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | $empty: "https://jowayyoung.github.io/static/img/icss/empty.svg";
12 | .empty-list {
13 | 	overflow: auto;
14 | 	width: 200px;
15 | 	height: 150px;
16 | 	outline: 1px solid #3c9;
17 | 	&:empty {
18 | 		display: flex;
19 | 		justify-content: center;
20 | 		align-items: center;
21 | 		background: url($empty) no-repeat center/100px auto;
22 | 		&::after {
23 | 			margin-top: 90px;
24 | 			font-weight: bold;
25 | 			content: "没钱就没数据";
26 | 		}
27 | 	}
28 | 	& + .empty-list {
29 | 		margin-left: 20px;
30 | 	}
31 | 	li {
32 | 		padding: 0 10px;
33 | 		height: 30px;
34 | 		background-color: #09f;
35 | 		line-height: 30px;
36 | 		color: #fff;
37 | 		&:nth-child(even) {
38 | 			background-color: #f90;
39 | 		}
40 | 	}
41 | }
42 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/自动打字器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="自动打字器">
 3 | 		<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin typing($count: 0, $duration: 0, $delay: 0) {
 9 | 	overflow: hidden;
10 | 	border-right: 1px solid transparent;
11 | 	width: #{$count + 1}ch;
12 | 	font-family: Consolas, Monaco, monospace;
13 | 	white-space: nowrap;
14 | 	animation: typing #{$duration}s steps($count + 1) #{$delay}s infinite backwards,
15 | 		caret 500ms steps(1) #{$delay}s infinite forwards;
16 | 	// animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards,
17 | 	// 	caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
18 | }
19 | .auto-typing {
20 | 	font-weight: bold;
21 | 	font-size: 30px;
22 | 	color: #09f;
23 | 	@include typing(52, 5);
24 | }
25 | @keyframes caret {
26 | 	50% {
27 | 		border-right-color: currentcolor;
28 | 	}
29 | }
30 | @keyframes typing {
31 | 	from {
32 | 		width: 0;
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/自动打字器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="自动打字器">
 3 | 		<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | @mixin typing($count: 0, $duration: 0, $delay: 0) {
 9 | 	overflow: hidden;
10 | 	border-right: 1px solid transparent;
11 | 	width: #{$count + 1}ch;
12 | 	font-family: Consolas, Monaco, monospace;
13 | 	white-space: nowrap;
14 | 	animation: typing #{$duration}s steps($count + 1) #{$delay}s infinite backwards,
15 | 		caret 500ms steps(1) #{$delay}s infinite forwards;
16 | 	// animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards,
17 | 	// 	caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
18 | }
19 | .auto-typing {
20 | 	font-weight: bold;
21 | 	font-size: 30px;
22 | 	color: #09f;
23 | 	@include typing(52, 5);
24 | }
25 | @keyframes caret {
26 | 	50% {
27 | 		border-right-color: currentColor;
28 | 	}
29 | }
30 | @keyframes typing {
31 | 	from {
32 | 		width: 0;
33 | 	}
34 | }
35 | </style>


--------------------------------------------------------------------------------
/icss/src/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare module "*.jpg";
 2 | declare module "*.jpeg";
 3 | declare module "*.png";
 4 | declare module "*.gif";
 5 | declare module "*.svg";
 6 | declare module "*.webp";
 7 | 
 8 | declare module "*.ttf";
 9 | declare module "*.otf";
10 | declare module "*.eot";
11 | declare module "*.woff";
12 | declare module "*.woff2";
13 | 
14 | declare module "*.wv";
15 | declare module "*.aac";
16 | declare module "*.ape";
17 | declare module "*.mp3";
18 | declare module "*.ogg";
19 | declare module "*.wav";
20 | declare module "*.alac";
21 | declare module "*.flac";
22 | declare module "*.opus";
23 | 
24 | declare module "*.rm";
25 | declare module "*.3gb";
26 | declare module "*.asf";
27 | declare module "*.asx";
28 | declare module "*.avi";
29 | declare module "*.dat";
30 | declare module "*.flv";
31 | declare module "*.m4v";
32 | declare module "*.mkv";
33 | declare module "*.mov";
34 | declare module "*.mp4";
35 | declare module "*.vob";
36 | declare module "*.wmv";
37 | declare module "*.rmvb";
38 | 
39 | declare module "*.vue";
40 | 
41 | declare const RUN_ENV: string;


--------------------------------------------------------------------------------
/icss-set/src/components/component/故障文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="故障文本">
 3 | 		<div class="fault-text" data-text="ERROR">ERROR</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	background-color: #000;
10 | }
11 | .fault-text {
12 | 	position: relative;
13 | 	font-weight: bold;
14 | 	font-size: 100px;
15 | 	color: #fff;
16 | 	&::before,
17 | 	&::after {
18 | 		overflow: hidden;
19 | 		position: absolute;
20 | 		top: 0;
21 | 		background-color: #000;
22 | 		clip: rect(0, 900px, 0, 0);
23 | 		color: #fff;
24 | 		content: attr(data-text);
25 | 		animation: shake 3s linear infinite alternate-reverse;
26 | 	}
27 | 	&::before {
28 | 		left: -2px;
29 | 		text-shadow: 1px 0 #09f;
30 | 	}
31 | 	&::after {
32 | 		left: 2px;
33 | 		text-shadow: -1px 0 #f66;
34 | 		animation-duration: 2s;
35 | 	}
36 | }
37 | @keyframes shake {
38 | 	$steps: 20;
39 | 	@for $i from 0 through $steps {
40 | 		#{percentage($i * (1 / $steps))} {
41 | 			clip: rect(random(100) + px, 9999px, random(100) + px, 0);
42 | 		}
43 | 	}
44 | }
45 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/故障文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="故障文本">
 3 | 		<div class="fault-text" data-text="ERROR">ERROR</div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	background-color: #000;
10 | }
11 | .fault-text {
12 | 	position: relative;
13 | 	font-weight: bold;
14 | 	font-size: 100px;
15 | 	color: #fff;
16 | 	&::before,
17 | 	&::after {
18 | 		overflow: hidden;
19 | 		position: absolute;
20 | 		top: 0;
21 | 		background-color: #000;
22 | 		clip: rect(0, 900px, 0, 0);
23 | 		color: #fff;
24 | 		content: attr(data-text);
25 | 		animation: shake 3s linear infinite alternate-reverse;
26 | 	}
27 | 	&::before {
28 | 		left: -2px;
29 | 		text-shadow: 1px 0 #09f;
30 | 	}
31 | 	&::after {
32 | 		left: 2px;
33 | 		text-shadow: -1px 0 #f66;
34 | 		animation-duration: 2s;
35 | 	}
36 | }
37 | @keyframes shake {
38 | 	$steps: 20;
39 | 	@for $i from 0 through $steps {
40 | 		#{percentage($i * calc(1 / $steps))} {
41 | 			clip: rect(random(100) + px, 9999px, random(100) + px, 0);
42 | 		}
43 | 	}
44 | }
45 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用attr()抓取节点属性.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用attr()抓取节点属性">
 3 | 		<a class="hover-tips btn-1" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
 4 | 		<a class="hover-tips btn-2" href="https://www.baidu.com"></a>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .hover-tips {
10 | 	position: relative;
11 | 	padding: 0 20px;
12 | 	border-radius: 10px;
13 | 	height: 40px;
14 | 	background-color: #66f;
15 | 	line-height: 40px;
16 | 	color: #fff;
17 | 	& + .hover-tips {
18 | 		margin-top: 10px;
19 | 	}
20 | 	&.btn-1 {
21 | 		&::after {
22 | 			position: absolute;
23 | 			left: 0;
24 | 			top: 0;
25 | 			border-radius: 5px;
26 | 			width: 100%;
27 | 			height: 100%;
28 | 			background-color: rgba(#000, .5);
29 | 			opacity: 0;
30 | 			text-align: center;
31 | 			font-size: 12px;
32 | 			content: attr(data-msg);
33 | 			transition: all 300ms;
34 | 		}
35 | 		&:hover::after {
36 | 			left: calc(100% + 20px);
37 | 			opacity: 1;
38 | 		}
39 | 	}
40 | 	&.btn-2:empty::after {
41 | 		content: attr(href);
42 | 	}
43 | }
44 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用attr()抓取节点属性.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用attr()抓取节点属性">
 3 | 		<a class="hover-tips btn-1" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
 4 | 		<a class="hover-tips btn-2" href="https://www.baidu.com"></a>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .hover-tips {
10 | 	position: relative;
11 | 	padding: 0 20px;
12 | 	border-radius: 10px;
13 | 	height: 40px;
14 | 	background-color: #66f;
15 | 	line-height: 40px;
16 | 	color: #fff;
17 | 	& + .hover-tips {
18 | 		margin-top: 10px;
19 | 	}
20 | 	&.btn-1 {
21 | 		&::after {
22 | 			position: absolute;
23 | 			left: 0;
24 | 			top: 0;
25 | 			border-radius: 5px;
26 | 			width: 100%;
27 | 			height: 100%;
28 | 			background-color: rgba(#000, .5);
29 | 			opacity: 0;
30 | 			text-align: center;
31 | 			font-size: 12px;
32 | 			content: attr(data-msg);
33 | 			transition: all 300ms;
34 | 		}
35 | 		&:hover::after {
36 | 			left: calc(100% + 20px);
37 | 			opacity: 1;
38 | 		}
39 | 	}
40 | 	&.btn-2:empty::after {
41 | 		content: attr(href);
42 | 	}
43 | }
44 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/开关按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="开关按钮">
 3 | 		<input class="switch-btn" type="checkbox">
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .btn {
 9 | 	border-radius: 31px;
10 | 	width: 102px;
11 | 	height: 62px;
12 | 	background-color: #e9e9eb;
13 | }
14 | .switch-btn {
15 | 	position: relative;
16 | 	appearance: none;
17 | 	cursor: pointer;
18 | 	transition: all 100ms;
19 | 	@extend .btn;
20 | 	&::before {
21 | 		position: absolute;
22 | 		content: "";
23 | 		transition: all 300ms cubic-bezier(.45, 1, .4, 1);
24 | 		@extend .btn;
25 | 	}
26 | 	&::after {
27 | 		position: absolute;
28 | 		left: 4px;
29 | 		top: 4px;
30 | 		border-radius: 27px;
31 | 		width: 54px;
32 | 		height: 54px;
33 | 		background-color: #fff;
34 | 		box-shadow: 1px 1px 5px rgba(#000, .3);
35 | 		content: "";
36 | 		transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
37 | 	}
38 | 	&:checked {
39 | 		background-color: #5eb662;
40 | 		&::before {
41 | 			transform: scale(0);
42 | 		}
43 | 		&::after {
44 | 			transform: translateX(40px);
45 | 		}
46 | 	}
47 | }
48 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/iOS开关按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="iOS开关按钮">
 3 | 		<input class="ios-switch" type="checkbox">
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .btn {
 9 | 	border-radius: 31px;
10 | 	width: 102px;
11 | 	height: 62px;
12 | 	background-color: #e9e9eb;
13 | }
14 | .ios-switch {
15 | 	position: relative;
16 | 	appearance: none;
17 | 	cursor: pointer;
18 | 	transition: all 100ms;
19 | 	@extend .btn;
20 | 	&::before {
21 | 		position: absolute;
22 | 		content: "";
23 | 		transition: all 300ms cubic-bezier(.45, 1, .4, 1);
24 | 		@extend .btn;
25 | 	}
26 | 	&::after {
27 | 		position: absolute;
28 | 		left: 4px;
29 | 		top: 4px;
30 | 		border-radius: 27px;
31 | 		width: 54px;
32 | 		height: 54px;
33 | 		background-color: #fff;
34 | 		box-shadow: 1px 1px 5px rgba(#000, .3);
35 | 		content: "";
36 | 		transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
37 | 	}
38 | 	&:checked {
39 | 		background-color: #5eb662;
40 | 		&::before {
41 | 			transform: scale(0);
42 | 		}
43 | 		&::after {
44 | 			transform: translateX(40px);
45 | 		}
46 | 	}
47 | }
48 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用max-height切换自动高度.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用max-height切换自动高度">
 3 | 		<ul class="auto-height">
 4 | 			<li>
 5 | 				<h3>列表1</h3>
 6 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
 7 | 			</li>
 8 | 			<li>
 9 | 				<h3>列表2</h3>
10 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
11 | 			</li>
12 | 			<li>
13 | 				<h3>列表3</h3>
14 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
15 | 			</li>
16 | 		</ul>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .auto-height {
22 | 	width: 300px;
23 | 	li {
24 | 		cursor: pointer;
25 | 		& + li {
26 | 			margin-top: 5px;
27 | 		}
28 | 		&:hover p {
29 | 			border-bottom-width: 1px;
30 | 			max-height: 600px;
31 | 		}
32 | 	}
33 | 	h3 {
34 | 		padding: 0 20px;
35 | 		height: 40px;
36 | 		background-color: #f66;
37 | 		cursor: pointer;
38 | 		line-height: 40px;
39 | 		font-size: 16px;
40 | 		color: #fff;
41 | 	}
42 | 	p {
43 | 		overflow: hidden;
44 | 		padding: 0 20px;
45 | 		border: 1px solid #f66;
46 | 		border-top: none;
47 | 		border-bottom-width: 0;
48 | 		max-height: 0;
49 | 		line-height: 30px;
50 | 		transition: all 500ms;
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用max-height切换自动高度.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用max-height切换自动高度">
 3 | 		<ul class="auto-height">
 4 | 			<li>
 5 | 				<h3>列表1</h3>
 6 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
 7 | 			</li>
 8 | 			<li>
 9 | 				<h3>列表2</h3>
10 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
11 | 			</li>
12 | 			<li>
13 | 				<h3>列表3</h3>
14 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
15 | 			</li>
16 | 		</ul>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .auto-height {
22 | 	width: 300px;
23 | 	li {
24 | 		cursor: pointer;
25 | 		& + li {
26 | 			margin-top: 5px;
27 | 		}
28 | 		&:hover p {
29 | 			border-bottom-width: 1px;
30 | 			max-height: 600px;
31 | 		}
32 | 	}
33 | 	h3 {
34 | 		padding: 0 20px;
35 | 		height: 40px;
36 | 		background-color: #f66;
37 | 		cursor: pointer;
38 | 		line-height: 40px;
39 | 		font-size: 16px;
40 | 		color: #fff;
41 | 	}
42 | 	p {
43 | 		overflow: hidden;
44 | 		padding: 0 20px;
45 | 		border: 1px solid #f66;
46 | 		border-top: none;
47 | 		border-bottom-width: 0;
48 | 		max-height: 0;
49 | 		line-height: 30px;
50 | 		transition: all 500ms;
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/划线跟随导航.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="划线跟随导航">
 3 | 		<ul class="underline-navbar">
 4 | 			<li>Alibaba阿里巴巴</li>
 5 | 			<li>Tencent腾讯</li>
 6 | 			<li>Baidu百度</li>
 7 | 			<li>Jingdong京东</li>
 8 | 			<li>Ant蚂蚁金服</li>
 9 | 			<li>Netease网易</li>
10 | 		</ul>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | .underline-navbar {
16 | 	display: flex;
17 | 	li {
18 | 		position: relative;
19 | 		padding: 10px;
20 | 		cursor: pointer;
21 | 		font-size: 20px;
22 | 		color: #09f;
23 | 		transition: all 300ms;
24 | 		&::before {
25 | 			position: absolute;
26 | 			left: 100%;
27 | 			top: 0;
28 | 			border-bottom: 2px solid transparent;
29 | 			width: 0;
30 | 			height: 100%;
31 | 			content: "";
32 | 			transition: all 300ms;
33 | 		}
34 | 		&:active {
35 | 			background-color: #09f;
36 | 			color: #fff;
37 | 		}
38 | 		&:hover {
39 | 			&::before {
40 | 				left: 0;
41 | 				top: 0;
42 | 				z-index: -1;
43 | 				border-bottom-color: #09f;
44 | 				width: 100%;
45 | 				transition-delay: 100ms;
46 | 			}
47 | 			& + li::before {
48 | 				left: 0;
49 | 			}
50 | 		}
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用@nth-child()描绘信号彩带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:nth-child()描绘信号彩带">
 3 | 		<ul class="signal-bar" style="--line-count: 5">
 4 | 			<li v-for="v in 5" :key="v" :style="`--line-index: ${v}`">
 5 | 				<em></em>
 6 | 			</li>
 7 | 		</ul>
 8 | 	</div>
 9 | </template>
10 | 
11 | <style lang="scss" scoped>
12 | .signal-bar {
13 | 	display: flex;
14 | 	justify-content: space-between;
15 | 	align-items: flex-end;
16 | 	width: 200px;
17 | 	height: 200px;
18 | 	li {
19 | 		--Θ: calc(var(--line-index) / var(--line-count) * .5turn);
20 | 		--height: calc((var(--line-index) + 1) * 30px);
21 | 		--time: calc(var(--line-index) * 100ms);
22 | 		display: flex;
23 | 		align-items: flex-end;
24 | 		width: 30px;
25 | 		height: var(--height);
26 | 	}
27 | 	em {
28 | 		border-radius: 5px;
29 | 		width: 100%;
30 | 		height: 10px;
31 | 		background-color: #3c9;
32 | 		filter: hue-rotate(var(--Θ));
33 | 		animation: beat 2s ease-in-out var(--time) infinite alternate;
34 | 	}
35 | }
36 | @keyframes beat {
37 | 	0%,
38 | 	20% {
39 | 		height: 10px;
40 | 	}
41 | 	80%,
42 | 	100% {
43 | 		height: 100%;
44 | 	}
45 | }
46 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/划线跟随导航.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="划线跟随导航">
 3 | 		<ul class="underline-navbar">
 4 | 			<li>Alibaba阿里巴巴</li>
 5 | 			<li>Tencent腾讯</li>
 6 | 			<li>Baidu百度</li>
 7 | 			<li>Jingdong京东</li>
 8 | 			<li>Ant蚂蚁金服</li>
 9 | 			<li>Netease网易</li>
10 | 		</ul>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | .underline-navbar {
16 | 	display: flex;
17 | 	li {
18 | 		position: relative;
19 | 		padding: 10px;
20 | 		cursor: pointer;
21 | 		font-size: 20px;
22 | 		color: #09f;
23 | 		transition: all 300ms;
24 | 		&::before {
25 | 			position: absolute;
26 | 			left: 100%;
27 | 			top: 0;
28 | 			border-bottom: 2px solid transparent;
29 | 			width: 0;
30 | 			height: 100%;
31 | 			content: "";
32 | 			transition: all 300ms;
33 | 		}
34 | 		&:active {
35 | 			background-color: #09f;
36 | 			color: #fff;
37 | 		}
38 | 		&:hover {
39 | 			&::before {
40 | 				left: 0;
41 | 				top: 0;
42 | 				z-index: -1;
43 | 				border-bottom-color: #09f;
44 | 				width: 100%;
45 | 				transition-delay: 100ms;
46 | 			}
47 | 			& + li::before {
48 | 				left: 0;
49 | 			}
50 | 		}
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用@nth-child()描绘信号彩带.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:nth-child()描绘信号彩带">
 3 | 		<ul class="signal-bar" style="--line-count: 5;">
 4 | 			<li v-for="v in 5" :key="v" :style="`--line-index: ${v};`">
 5 | 				<em></em>
 6 | 			</li>
 7 | 		</ul>
 8 | 	</div>
 9 | </template>
10 | 
11 | <style lang="scss" scoped>
12 | .signal-bar {
13 | 	display: flex;
14 | 	justify-content: space-between;
15 | 	align-items: flex-end;
16 | 	width: 200px;
17 | 	height: 200px;
18 | 	li {
19 | 		--angle: calc(var(--line-index) / var(--line-count) * .5turn);
20 | 		--height: calc((var(--line-index) + 1) * 30px);
21 | 		--time: calc(var(--line-index) * 100ms);
22 | 		display: flex;
23 | 		align-items: flex-end;
24 | 		width: 30px;
25 | 		height: var(--height);
26 | 	}
27 | 	em {
28 | 		border-radius: 5px;
29 | 		width: 100%;
30 | 		height: 10px;
31 | 		background-color: #3c9;
32 | 		filter: hue-rotate(var(--angle));
33 | 		animation: beat 2s ease-in-out var(--time) infinite alternate;
34 | 	}
35 | }
36 | @keyframes beat {
37 | 	0%,
38 | 	20% {
39 | 		height: 10px;
40 | 	}
41 | 	80%,
42 | 	100% {
43 | 		height: 100%;
44 | 	}
45 | }
46 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用filter雕刻高斯模糊.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter雕刻高斯模糊">
 3 | 		<div class="glass-layer">
 4 | 			<p>我见犹怜</p>
 5 | 			<p>爱不释手</p>
 6 | 			<p>雅俗共赏</p>
 7 | 			<p>君子好逑</p>
 8 | 		</div>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | $mask-bg: "https://static.yangzw.vip/codepen/mountain.jpg";
14 | .bruce {
15 | 	padding: 0;
16 | }
17 | .bruce,
18 | .glass-layer::before {
19 | 	background: url($mask-bg) no-repeat center/cover fixed;
20 | }
21 | .glass-layer {
22 | 	display: flex;
23 | 	flex-flow: column wrap;
24 | 	justify-content: center;
25 | 	align-items: center;
26 | 	overflow: hidden;
27 | 	position: absolute;
28 | 	left: 50%;
29 | 	top: 50%;
30 | 	border-radius: 10px;
31 | 	width: 400px;
32 | 	height: 200px;
33 | 	background-color: rgba(#fff, .3);
34 | 	box-shadow: 0 0 5px rgba(#000, .3);
35 | 	line-height: 1.5;
36 | 	font-size: 16px;
37 | 	color: #fff;
38 | 	transform: translate(-50%, -50%);
39 | 	&::before {
40 | 		position: absolute;
41 | 		left: 0;
42 | 		right: 0;
43 | 		top: 0;
44 | 		bottom: 0;
45 | 		z-index: -1;
46 | 		filter: blur(30px);
47 | 		content: "";
48 | 	}
49 | }
50 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用filter雕刻高斯模糊.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter雕刻高斯模糊">
 3 | 		<div class="glass-layer">
 4 | 			<p>我武惟扬</p>
 5 | 			<p>爱日惜力</p>
 6 | 			<p>掘井及泉</p>
 7 | 			<p>金榜题名</p>
 8 | 		</div>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | $mask-bg: "https://jowayyoung.github.io/static/img/icss/mountain.jpg";
14 | .bruce {
15 | 	padding: 0;
16 | }
17 | .bruce,
18 | .glass-layer::before {
19 | 	background: url($mask-bg) no-repeat center/cover fixed;
20 | }
21 | .glass-layer {
22 | 	display: flex;
23 | 	overflow: hidden;
24 | 	position: absolute;
25 | 	left: 50%;
26 | 	top: 50%;
27 | 	flex-flow: column wrap;
28 | 	justify-content: center;
29 | 	align-items: center;
30 | 	border-radius: 10px;
31 | 	width: 400px;
32 | 	height: 200px;
33 | 	background-color: rgba(#fff, .3);
34 | 	box-shadow: 0 0 5px rgba(#000, .3);
35 | 	line-height: 1.5;
36 | 	font-size: 16px;
37 | 	color: #fff;
38 | 	transform: translate(-50%, -50%);
39 | 	&::before {
40 | 		position: absolute;
41 | 		left: 0;
42 | 		right: 0;
43 | 		top: 0;
44 | 		bottom: 0;
45 | 		z-index: -1;
46 | 		filter: blur(30px);
47 | 		content: "";
48 | 	}
49 | }
50 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用position控制吸附位置.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用position控制吸附位置">
 3 | 		<div class="ads-position">
 4 | 			<ul>
 5 | 				<li>Top 1</li>
 6 | 				<li>Top 2</li>
 7 | 				<li>Normal</li>
 8 | 				<li>Bottom 1</li>
 9 | 				<li>Bottom 2</li>
10 | 			</ul>
11 | 		</div>
12 | 	</div>
13 | </template>
14 | 
15 | <style lang="scss" scoped>
16 | .ads-position {
17 | 	overflow: auto;
18 | 	position: relative;
19 | 	width: 400px;
20 | 	height: 280px;
21 | 	outline: 1px solid #3c9;
22 | 	ul {
23 | 		padding: 200px 0;
24 | 	}
25 | 	li {
26 | 		position: sticky;
27 | 		height: 40px;
28 | 		line-height: 40px;
29 | 		text-align: center;
30 | 		color: #fff;
31 | 		&:nth-child(1) {
32 | 			top: 0;
33 | 			z-index: 9;
34 | 			background-color: #f66;
35 | 		}
36 | 		&:nth-child(2) {
37 | 			top: 40px;
38 | 			z-index: 9;
39 | 			background-color: #66f;
40 | 		}
41 | 		&:nth-child(3) {
42 | 			background-color: #f90;
43 | 		}
44 | 		&:nth-child(4) {
45 | 			bottom: 0;
46 | 			z-index: 9;
47 | 			background-color: #09f;
48 | 		}
49 | 		&:nth-child(5) {
50 | 			bottom: 40px;
51 | 			z-index: 9;
52 | 			background-color: #3c9;
53 | 		}
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用position控制吸附位置.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用position控制吸附位置">
 3 | 		<div class="ads-position">
 4 | 			<ul>
 5 | 				<li>Top 1</li>
 6 | 				<li>Top 2</li>
 7 | 				<li>Normal</li>
 8 | 				<li>Bottom 1</li>
 9 | 				<li>Bottom 2</li>
10 | 			</ul>
11 | 		</div>
12 | 	</div>
13 | </template>
14 | 
15 | <style lang="scss" scoped>
16 | .ads-position {
17 | 	overflow: auto;
18 | 	position: relative;
19 | 	width: 400px;
20 | 	height: 280px;
21 | 	outline: 1px solid #3c9;
22 | 	ul {
23 | 		padding: 200px 0;
24 | 	}
25 | 	li {
26 | 		position: sticky;
27 | 		height: 40px;
28 | 		line-height: 40px;
29 | 		text-align: center;
30 | 		color: #fff;
31 | 		&:nth-child(1) {
32 | 			top: 0;
33 | 			z-index: 9;
34 | 			background-color: #f66;
35 | 		}
36 | 		&:nth-child(2) {
37 | 			top: 40px;
38 | 			z-index: 9;
39 | 			background-color: #66f;
40 | 		}
41 | 		&:nth-child(3) {
42 | 			background-color: #f90;
43 | 		}
44 | 		&:nth-child(4) {
45 | 			bottom: 0;
46 | 			z-index: 9;
47 | 			background-color: #09f;
48 | 		}
49 | 		&:nth-child(5) {
50 | 			bottom: 40px;
51 | 			z-index: 9;
52 | 			background-color: #3c9;
53 | 		}
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用margin排版凸显布局.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用margin排版凸显布局">
 3 | 		<ul class="highlight-list left">
 4 | 			<li>Alibaba</li>
 5 | 			<li>Tencent</li>
 6 | 			<li>Baidu</li>
 7 | 			<li>Jingdong</li>
 8 | 			<li>Ant</li>
 9 | 			<li>Netease</li>
10 | 		</ul>
11 | 		<ul class="highlight-list right">
12 | 			<li>Alibaba</li>
13 | 			<li>Tencent</li>
14 | 			<li>Baidu</li>
15 | 			<li>Jingdong</li>
16 | 			<li>Ant</li>
17 | 			<li>Netease</li>
18 | 		</ul>
19 | 	</div>
20 | </template>
21 | 
22 | <style lang="scss" scoped>
23 | .highlight-list {
24 | 	display: flex;
25 | 	align-items: center;
26 | 	padding: 0 10px;
27 | 	width: 600px;
28 | 	height: 60px;
29 | 	background-color: #3c9;
30 | 	& + .highlight-list {
31 | 		margin-top: 10px;
32 | 	}
33 | 	li {
34 | 		padding: 0 10px;
35 | 		height: 40px;
36 | 		background-color: #3c9;
37 | 		line-height: 40px;
38 | 		font-size: 16px;
39 | 		color: #fff;
40 | 	}
41 | 	&.left li {
42 | 		& + li {
43 | 			margin-left: 10px;
44 | 		}
45 | 		&:last-child {
46 | 			margin-left: auto;
47 | 		}
48 | 	}
49 | 	&.right li {
50 | 		& + li {
51 | 			margin-left: 10px;
52 | 		}
53 | 		&:first-child {
54 | 			margin-right: auto;
55 | 		}
56 | 	}
57 | }
58 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用margin排版凸显布局.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用margin排版凸显布局">
 3 | 		<ul class="highlight-list left">
 4 | 			<li>Alibaba</li>
 5 | 			<li>Tencent</li>
 6 | 			<li>Baidu</li>
 7 | 			<li>Jingdong</li>
 8 | 			<li>Ant</li>
 9 | 			<li>Netease</li>
10 | 		</ul>
11 | 		<ul class="highlight-list right">
12 | 			<li>Alibaba</li>
13 | 			<li>Tencent</li>
14 | 			<li>Baidu</li>
15 | 			<li>Jingdong</li>
16 | 			<li>Ant</li>
17 | 			<li>Netease</li>
18 | 		</ul>
19 | 	</div>
20 | </template>
21 | 
22 | <style lang="scss" scoped>
23 | .highlight-list {
24 | 	display: flex;
25 | 	align-items: center;
26 | 	padding: 0 10px;
27 | 	width: 600px;
28 | 	height: 60px;
29 | 	background-color: #3c9;
30 | 	& + .highlight-list {
31 | 		margin-top: 10px;
32 | 	}
33 | 	li {
34 | 		padding: 0 10px;
35 | 		height: 40px;
36 | 		background-color: #3c9;
37 | 		line-height: 40px;
38 | 		font-size: 16px;
39 | 		color: #fff;
40 | 	}
41 | 	&.left li {
42 | 		& + li {
43 | 			margin-left: 10px;
44 | 		}
45 | 		&:last-child {
46 | 			margin-left: auto;
47 | 		}
48 | 	}
49 | 	&.right li {
50 | 		& + li {
51 | 			margin-left: 10px;
52 | 		}
53 | 		&:first-child {
54 | 			margin-right: auto;
55 | 		}
56 | 	}
57 | }
58 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用mask雕刻镂空背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用mask雕刻镂空背景">
 3 | 		<div class="mask-bg">
 4 | 			<div></div>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | $mask-bg: "https://static.yangzw.vip/codepen/mountain.jpg";
11 | $mask-text: "https://static.yangzw.vip/codepen/snow.jpg";
12 | $logo: "../../assets/img/logo-netease.svg";
13 | .bruce {
14 | 	padding: 0;
15 | 	height: 400px;
16 | }
17 | .mask-bg {
18 | 	display: flex;
19 | 	overflow: hidden;
20 | 	justify-content: center;
21 | 	align-items: center;
22 | 	position: relative;
23 | 	height: 100%;
24 | 	&::after {
25 | 		position: absolute;
26 | 		left: -20px;
27 | 		right: -20px;
28 | 		top: -20px;
29 | 		bottom: -20px;
30 | 		background: url($mask-bg) no-repeat center/cover;
31 | 		filter: blur(10px);
32 | 		content: "";
33 | 	}
34 | 	div {
35 | 		position: relative;
36 | 		z-index: 9;
37 | 		width: 600px;
38 | 		height: 300px;
39 | 		background: url($mask-text) left center/150% auto;
40 | 		mask: url($logo) center/cover;
41 | 		animation: move 10s infinite;
42 | 	}
43 | }
44 | @keyframes move {
45 | 	0% {
46 | 		background-position-x: 0;
47 | 	}
48 | 	50% {
49 | 		background-position-x: 100%;
50 | 	}
51 | }
52 | </style>


--------------------------------------------------------------------------------
/icss/src/components/color/使用filter描绘动态背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter描绘动态背景">
 3 | 		<div class="dynamic-desc-bg">
 4 | 			<a></a>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .dynamic-desc-bg {
11 | 	--x: 0;
12 | 	--width: 400;
13 | 	--angle: calc(var(--x) / var(--width) * 1turn);
14 | 	display: flex;
15 | 	justify-content: center;
16 | 	align-items: center;
17 | 	padding: 100px;
18 | 	background-color: #3c9;
19 | 	filter: hue-rotate(var(--angle));
20 | 	a {
21 | 		overflow: hidden;
22 | 		border-radius: 25px;
23 | 		width: calc(var(--width) * 1px);
24 | 		height: 50px;
25 | 		background-color: #66f;
26 | 		box-shadow: 0 0 2px rgba(#000, .5);
27 | 		cursor: pointer;
28 | 		line-height: 50px;
29 | 		font-weight: bold;
30 | 		font-size: 18px;
31 | 		color: #fff;
32 | 	}
33 | }
34 | </style>
35 | 
36 | <script lang="ts">
37 | import { defineComponent, onMounted } from "vue";
38 | 
39 | export default defineComponent({
40 | 	setup() {
41 | 		onMounted(() => {
42 | 			const bg = document.getElementsByClassName("dynamic-desc-bg")[0];
43 | 			const btn = bg.getElementsByTagName("a")[0];
44 | 			btn.addEventListener("mousemove", e => bg.style.setProperty("--x", e.offsetX));
45 | 		});
46 | 	}
47 | });
48 | </script>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用mask雕刻镂空背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用mask雕刻镂空背景">
 3 | 		<div class="mask-bg">
 4 | 			<div></div>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | $mask-bg: "https://jowayyoung.github.io/static/img/icss/mountain.jpg";
11 | $mask-text: "https://jowayyoung.github.io/static/img/icss/snow.jpg";
12 | $logo: "https://jowayyoung.github.io/static/img/icss/logo-netease.svg";
13 | .bruce {
14 | 	padding: 0;
15 | 	height: 400px;
16 | }
17 | .mask-bg {
18 | 	display: flex;
19 | 	overflow: hidden;
20 | 	position: relative;
21 | 	justify-content: center;
22 | 	align-items: center;
23 | 	height: 100%;
24 | 	&::after {
25 | 		position: absolute;
26 | 		left: -20px;
27 | 		right: -20px;
28 | 		top: -20px;
29 | 		bottom: -20px;
30 | 		background: url($mask-bg) no-repeat center/cover;
31 | 		filter: blur(10px);
32 | 		content: "";
33 | 	}
34 | 	div {
35 | 		position: relative;
36 | 		z-index: 9;
37 | 		width: 600px;
38 | 		height: 300px;
39 | 		background: url($mask-text) left center/150% auto;
40 | 		mask: url($logo) center/cover;
41 | 		animation: move 10s infinite;
42 | 	}
43 | }
44 | @keyframes move {
45 | 	0% {
46 | 		background-position-x: 0;
47 | 	}
48 | 	50% {
49 | 		background-position-x: 100%;
50 | 	}
51 | }
52 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@hover描绘鼠标跟随.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用:hover描绘鼠标跟随">
 3 | 		<ul class="mouse-following">
 4 | 			<li v-for="v in 500" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | @function random-num($max, $min: 0, $u: 1) { /* stylelint-disable-line */
11 | 	@return ($min + random($max)) * $u; /* stylelint-disable-line */
12 | }
13 | .bruce {
14 | 	padding: 0;
15 | }
16 | .mouse-following {
17 | 	display: flex;
18 | 	overflow: hidden;
19 | 	flex-wrap: wrap;
20 | 	height: 100%;
21 | 	cursor: pointer;
22 | 	li {
23 | 		position: relative;
24 | 		width: 30px;
25 | 		height: 30px;
26 | 		&::before {
27 | 			position: absolute;
28 | 			left: 0;
29 | 			right: 0;
30 | 			top: 0;
31 | 			bottom: 0;
32 | 			border-radius: 100%;
33 | 			background-color: transparent;
34 | 			content: "";
35 | 			transform: scale3d(.1, .1, 1);
36 | 			transition: all 500ms ease-in;
37 | 		}
38 | 		&:hover {
39 | 			&::before {
40 | 				transform: scale3d(1.8, 1.8, 1.8);
41 | 				transition: transform 0s;
42 | 			}
43 | 		}
44 | 		@for $i from 1 through 500 {
45 | 			&:nth-child(#{$i}):hover {
46 | 				&::before {
47 | 					background-color: rgba(random-num(255), random-num(255), random-num(255), .8);
48 | 				}
49 | 			}
50 | 		}
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@hover描绘鼠标跟随.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用:hover描绘鼠标跟随">
 3 | 		<ul class="mouse-following">
 4 | 			<li v-for="v in 500" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | @function random-num($max, $min: 0, $u: 1) { /* stylelint-disable-line */
11 | 	@return ($min + random($max)) * $u; /* stylelint-disable-line */
12 | }
13 | .bruce {
14 | 	padding: 0;
15 | }
16 | .mouse-following {
17 | 	display: flex;
18 | 	overflow: hidden;
19 | 	flex-wrap: wrap;
20 | 	height: 100%;
21 | 	cursor: pointer;
22 | 	li {
23 | 		position: relative;
24 | 		width: 30px;
25 | 		height: 30px;
26 | 		&::before {
27 | 			position: absolute;
28 | 			left: 0;
29 | 			right: 0;
30 | 			top: 0;
31 | 			bottom: 0;
32 | 			border-radius: 100%;
33 | 			background-color: transparent;
34 | 			content: "";
35 | 			transform: scale3d(.1, .1, 1);
36 | 			transition: all 500ms ease-in;
37 | 		}
38 | 		&:hover {
39 | 			&::before {
40 | 				transform: scale3d(1.8, 1.8, 1.8);
41 | 				transition: transform 0s;
42 | 			}
43 | 		}
44 | 		@for $i from 1 through 500 {
45 | 			&:nth-child(#{$i}):hover {
46 | 				&::before {
47 | 					background-color: rgba(random-num(255), random-num(255), random-num(255), .8);
48 | 				}
49 | 			}
50 | 		}
51 | 	}
52 | }
53 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/悬浮跟踪按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="悬浮跟踪按钮">
 3 | 		<a class="track-btn" @mousemove="move">
 4 | 			<span>妙用CSS变量，让你的CSS变得更心动</span>
 5 | 		</a>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .track-btn {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	border-radius: 25px;
14 | 	width: 400px;
15 | 	height: 50px;
16 | 	background-color: #66f;
17 | 	cursor: pointer;
18 | 	line-height: 50px;
19 | 	text-align: center;
20 | 	font-weight: bold;
21 | 	font-size: 18px;
22 | 	color: #fff;
23 | 	span {
24 | 		position: relative;
25 | 		pointer-events: none; // 不加会卡顿
26 | 	}
27 | 	&::before {
28 | 		--size: 0;
29 | 		position: absolute;
30 | 		left: var(--x);
31 | 		top: var(--y);
32 | 		width: var(--size);
33 | 		height: var(--size);
34 | 		background-image: radial-gradient(circle closest-side, #09f, transparent);
35 | 		content: "";
36 | 		transform: translate3d(-50%, -50%, 0);
37 | 		transition: width 200ms ease, height 200ms ease;
38 | 	}
39 | 	&:hover::before {
40 | 		--size: 400px;
41 | 	}
42 | }
43 | </style>
44 | 
45 | <script>
46 | export default {
47 | 	methods: {
48 | 		move(e) {
49 | 			e.target.style.setProperty("--x", `${e.offsetX}px`);
50 | 			e.target.style.setProperty("--y", `${e.offsetY}px`);
51 | 		}
52 | 	}
53 | };
54 | </script>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@valid与@invalid校验表单内容.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:valid与:invalid校验表单内容">
 3 | 		<form class="form-validation">
 4 | 			<div>
 5 | 				<label>名字</label>
 6 | 				<input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
 7 | 			</div>
 8 | 			<div>
 9 | 				<label>手机</label>
10 | 				<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
11 | 			</div>
12 | 			<div>
13 | 				<label>简介</label>
14 | 				<textarea required></textarea>
15 | 			</div>
16 | 		</form>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .form-validation {
22 | 	width: 500px;
23 | 	div + div {
24 | 		margin-top: 10px;
25 | 	}
26 | 	label {
27 | 		display: block;
28 | 		padding-bottom: 5px;
29 | 		font-weight: bold;
30 | 		font-size: 16px;
31 | 	}
32 | 	input,
33 | 	textarea {
34 | 		display: block;
35 | 		padding: 0 20px;
36 | 		border: 1px solid #ccc;
37 | 		width: 100%;
38 | 		height: 40px;
39 | 		outline: none;
40 | 		caret-color: #09f;
41 | 		transition: all 300ms;
42 | 		&:valid {
43 | 			border-color: #3c9;
44 | 		}
45 | 		&:invalid {
46 | 			border-color: #f66;
47 | 		}
48 | 	}
49 | 	textarea {
50 | 		height: 122px;
51 | 		resize: none;
52 | 		line-height: 30px;
53 | 		font-size: 16px;
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@valid和@invalid校验表单内容.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:valid和:invalid校验表单内容">
 3 | 		<form class="form-validation">
 4 | 			<div>
 5 | 				<label>名字</label>
 6 | 				<input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
 7 | 			</div>
 8 | 			<div>
 9 | 				<label>手机</label>
10 | 				<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
11 | 			</div>
12 | 			<div>
13 | 				<label>简介</label>
14 | 				<textarea required></textarea>
15 | 			</div>
16 | 		</form>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .form-validation {
22 | 	width: 500px;
23 | 	div + div {
24 | 		margin-top: 10px;
25 | 	}
26 | 	label {
27 | 		display: block;
28 | 		padding-bottom: 5px;
29 | 		font-weight: bold;
30 | 		font-size: 16px;
31 | 	}
32 | 	input,
33 | 	textarea {
34 | 		display: block;
35 | 		padding: 0 20px;
36 | 		border: 1px solid #ccc;
37 | 		width: 100%;
38 | 		height: 40px;
39 | 		outline: none;
40 | 		caret-color: #09f;
41 | 		transition: all 300ms;
42 | 		&:valid {
43 | 			border-color: #3c9;
44 | 		}
45 | 		&:invalid {
46 | 			border-color: #f66;
47 | 		}
48 | 	}
49 | 	textarea {
50 | 		height: 122px;
51 | 		resize: none;
52 | 		line-height: 30px;
53 | 		font-size: 16px;
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/气泡对话框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="气泡对话框">
 3 | 		<div class="bubble-box">iCSS</div>
 4 | 		<div class="bubble-empty-box">iCSS</div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .bubble-box {
10 | 	position: relative;
11 | 	border-radius: 5px;
12 | 	width: 200px;
13 | 	height: 50px;
14 | 	background-color: #f90;
15 | 	line-height: 50px;
16 | 	text-align: center;
17 | 	font-size: 20px;
18 | 	color: #fff;
19 | 	&::after {
20 | 		position: absolute;
21 | 		left: 100%;
22 | 		top: 50%;
23 | 		margin-top: -5px;
24 | 		border: 5px solid transparent;
25 | 		border-left-color: #f90;
26 | 		content: "";
27 | 	}
28 | }
29 | .bubble-empty-box {
30 | 	position: relative;
31 | 	margin-top: 10px;
32 | 	border: 2px solid #f90;
33 | 	border-radius: 5px;
34 | 	width: 200px;
35 | 	height: 50px;
36 | 	line-height: 46px;
37 | 	text-align: center;
38 | 	font-size: 20px;
39 | 	color: #f90;
40 | 	&::before {
41 | 		position: absolute;
42 | 		left: 100%;
43 | 		top: 50%;
44 | 		margin: -5px 0 0 2px;
45 | 		border: 5px solid transparent;
46 | 		border-left-color: #f90;
47 | 		content: "";
48 | 	}
49 | 	&::after {
50 | 		position: absolute;
51 | 		left: 100%;
52 | 		top: 50%;
53 | 		margin-top: -4px;
54 | 		border: 4px solid transparent;
55 | 		border-left-color: #fff;
56 | 		content: "";
57 | 	}
58 | }
59 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/气泡对话框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="气泡对话框">
 3 | 		<div class="bubble-box">iCSS</div>
 4 | 		<div class="bubble-empty-box">iCSS</div>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <style lang="scss" scoped>
 9 | .bubble-box {
10 | 	position: relative;
11 | 	border-radius: 5px;
12 | 	width: 200px;
13 | 	height: 50px;
14 | 	background-color: #f90;
15 | 	line-height: 50px;
16 | 	text-align: center;
17 | 	font-size: 20px;
18 | 	color: #fff;
19 | 	&::after {
20 | 		position: absolute;
21 | 		left: 100%;
22 | 		top: 50%;
23 | 		margin-top: -5px;
24 | 		border: 5px solid transparent;
25 | 		border-left-color: #f90;
26 | 		content: "";
27 | 	}
28 | }
29 | .bubble-empty-box {
30 | 	position: relative;
31 | 	margin-top: 10px;
32 | 	border: 2px solid #f90;
33 | 	border-radius: 5px;
34 | 	width: 200px;
35 | 	height: 50px;
36 | 	line-height: 46px;
37 | 	text-align: center;
38 | 	font-size: 20px;
39 | 	color: #f90;
40 | 	&::before {
41 | 		position: absolute;
42 | 		left: 100%;
43 | 		top: 50%;
44 | 		margin: -5px 0 0 2px;
45 | 		border: 5px solid transparent;
46 | 		border-left-color: #f90;
47 | 		content: "";
48 | 	}
49 | 	&::after {
50 | 		position: absolute;
51 | 		left: 100%;
52 | 		top: 50%;
53 | 		margin-top: -4px;
54 | 		border: 4px solid transparent;
55 | 		border-left-color: #fff;
56 | 		content: "";
57 | 	}
58 | }
59 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用+或~美化选项表单.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用+或~美化选项表单">
 3 | 		<ul class="beauty-selection">
 4 | 			<li>
 5 | 				<input id="fed-engineer" type="radio" name="radioName" hidden>
 6 | 				<label for="fed-engineer"></label>
 7 | 				<span>前端工程师</span>
 8 | 			</li>
 9 | 			<li>
10 | 				<input id="bed-engineer" type="radio" name="radioName" hidden>
11 | 				<label for="bed-engineer"></label>
12 | 				<span>后端工程师</span>
13 | 			</li>
14 | 			<li>
15 | 				<input id="fsd-engineer" type="radio" name="radioName" hidden>
16 | 				<label for="fsd-engineer"></label>
17 | 				<span>全栈工程师</span>
18 | 			</li>
19 | 		</ul>
20 | 	</div>
21 | </template>
22 | 
23 | <style lang="scss" scoped>
24 | .beauty-selection {
25 | 	display: flex;
26 | 	li {
27 | 		display: flex;
28 | 		align-items: center;
29 | 		& + li {
30 | 			margin-left: 20px;
31 | 		}
32 | 	}
33 | 	input:checked + label {
34 | 		background-color: #f90;
35 | 	}
36 | 	label {
37 | 		margin-right: 5px;
38 | 		padding: 2px;
39 | 		border: 1px solid #f90;
40 | 		border-radius: 100%;
41 | 		width: 18px;
42 | 		height: 18px;
43 | 		background-clip: content-box;
44 | 		cursor: pointer;
45 | 		transition: all 300ms;
46 | 		&:hover {
47 | 			border-color: #09f;
48 | 			background-color: #09f;
49 | 			box-shadow: 0 0 7px #09f;
50 | 		}
51 | 	}
52 | 	span {
53 | 		font-size: 16px;
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用+或~美化选项表单.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用+或~美化选项表单">
 3 | 		<ul class="beauty-selection">
 4 | 			<li>
 5 | 				<input id="fed-engineer" type="radio" name="radioName" hidden>
 6 | 				<label for="fed-engineer"></label>
 7 | 				<span>前端工程师</span>
 8 | 			</li>
 9 | 			<li>
10 | 				<input id="bed-engineer" type="radio" name="radioName" hidden>
11 | 				<label for="bed-engineer"></label>
12 | 				<span>后端工程师</span>
13 | 			</li>
14 | 			<li>
15 | 				<input id="fsd-engineer" type="radio" name="radioName" hidden>
16 | 				<label for="fsd-engineer"></label>
17 | 				<span>全栈工程师</span>
18 | 			</li>
19 | 		</ul>
20 | 	</div>
21 | </template>
22 | 
23 | <style lang="scss" scoped>
24 | .beauty-selection {
25 | 	display: flex;
26 | 	li {
27 | 		display: flex;
28 | 		align-items: center;
29 | 		& + li {
30 | 			margin-left: 20px;
31 | 		}
32 | 	}
33 | 	input:checked + label {
34 | 		background-color: #f90;
35 | 	}
36 | 	label {
37 | 		margin-right: 5px;
38 | 		padding: 2px;
39 | 		border: 1px solid #f90;
40 | 		border-radius: 100%;
41 | 		width: 18px;
42 | 		height: 18px;
43 | 		background-clip: content-box;
44 | 		cursor: pointer;
45 | 		transition: all 300ms;
46 | 		&:hover {
47 | 			border-color: #09f;
48 | 			background-color: #09f;
49 | 			box-shadow: 0 0 7px #09f;
50 | 		}
51 | 	}
52 | 	span {
53 | 		font-size: 16px;
54 | 	}
55 | }
56 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用transform翻转容器内容.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用transform翻转容器内容">
 3 | 		<ul class="flip-content">
 4 | 			<li>正常文本</li>
 5 | 			<li class="x-axis">水平翻转</li>
 6 | 			<li class="y-axis">垂直翻转</li>
 7 | 			<li class="reverse">倒序翻转</li>
 8 | 		</ul>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | .flip-content {
14 | 	li {
15 | 		position: relative;
16 | 		width: 121px;
17 | 		height: 51px;
18 | 		line-height: 51px;
19 | 		text-align: center;
20 | 		font-weight: bold;
21 | 		font-size: 30px;
22 | 		color: #f66;
23 | 		&::before,
24 | 		&::after {
25 | 			position: absolute;
26 | 			background-color: #66f;
27 | 			content: "";
28 | 		}
29 | 		& + li {
30 | 			margin-top: 10px;
31 | 		}
32 | 		&.x-axis {
33 | 			transform: scale(1, -1);
34 | 			&::after {
35 | 				left: 0;
36 | 				top: 25px;
37 | 				width: 100%;
38 | 				height: 1px;
39 | 			}
40 | 		}
41 | 		&.y-axis {
42 | 			transform: scale(-1, 1);
43 | 			&::after {
44 | 				left: 60px;
45 | 				top: 0;
46 | 				width: 1px;
47 | 				height: 100%;
48 | 			}
49 | 		}
50 | 		&.reverse {
51 | 			transform: scale(-1, -1);
52 | 			&::before {
53 | 				left: 0;
54 | 				top: 25px;
55 | 				width: 100%;
56 | 				height: 1px;
57 | 			}
58 | 			&::after {
59 | 				left: 60px;
60 | 				top: 0;
61 | 				width: 1px;
62 | 				height: 100%;
63 | 			}
64 | 		}
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用transform翻转容器内容.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用transform翻转容器内容">
 3 | 		<ul class="flip-content">
 4 | 			<li>正常文本</li>
 5 | 			<li class="x-axis">水平翻转</li>
 6 | 			<li class="y-axis">垂直翻转</li>
 7 | 			<li class="reverse">倒序翻转</li>
 8 | 		</ul>
 9 | 	</div>
10 | </template>
11 | 
12 | <style lang="scss" scoped>
13 | .flip-content {
14 | 	li {
15 | 		position: relative;
16 | 		width: 121px;
17 | 		height: 51px;
18 | 		line-height: 51px;
19 | 		text-align: center;
20 | 		font-weight: bold;
21 | 		font-size: 30px;
22 | 		color: #f66;
23 | 		&::before,
24 | 		&::after {
25 | 			position: absolute;
26 | 			background-color: #66f;
27 | 			content: "";
28 | 		}
29 | 		& + li {
30 | 			margin-top: 10px;
31 | 		}
32 | 		&.x-axis {
33 | 			transform: scale(1, -1);
34 | 			&::after {
35 | 				left: 0;
36 | 				top: 25px;
37 | 				width: 100%;
38 | 				height: 1px;
39 | 			}
40 | 		}
41 | 		&.y-axis {
42 | 			transform: scale(-1, 1);
43 | 			&::after {
44 | 				left: 60px;
45 | 				top: 0;
46 | 				width: 1px;
47 | 				height: 100%;
48 | 			}
49 | 		}
50 | 		&.reverse {
51 | 			transform: scale(-1, -1);
52 | 			&::before {
53 | 				left: 0;
54 | 				top: 25px;
55 | 				width: 100%;
56 | 				height: 1px;
57 | 			}
58 | 			&::after {
59 | 				left: 60px;
60 | 				top: 0;
61 | 				width: 1px;
62 | 				height: 100%;
63 | 			}
64 | 		}
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用object-fit规定图像尺寸.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用object-fit规定图像尺寸">
 3 | 		<ul class="image-size">
 4 | 			<li>
 5 | 				<h3>Cover</h3>
 6 | 				<img class="cover" src="https://jowayyoung.github.io/static/img/icss/ab-1.jpg">
 7 | 			</li>
 8 | 			<li>
 9 | 				<h3>Contain</h3>
10 | 				<img class="contain" src="https://jowayyoung.github.io/static/img/icss/ab-1.jpg">
11 | 			</li>
12 | 			<li>
13 | 				<h3>Fill</h3>
14 | 				<img class="fill" src="https://jowayyoung.github.io/static/img/icss/ab-2.jpg">
15 | 			</li>
16 | 			<li>
17 | 				<h3>ScaleDown</h3>
18 | 				<img class="scale-down" src="https://jowayyoung.github.io/static/img/icss/ab-2.jpg">
19 | 			</li>
20 | 		</ul>
21 | 	</div>
22 | </template>
23 | 
24 | <style lang="scss" scoped>
25 | .image-size {
26 | 	display: flex;
27 | 	justify-content: space-between;
28 | 	width: 1000px;
29 | 	height: 300px;
30 | 	li {
31 | 		width: 200px;
32 | 	}
33 | 	h3 {
34 | 		height: 40px;
35 | 		line-height: 40px;
36 | 		text-align: center;
37 | 		font-weight: bold;
38 | 		font-size: 16px;
39 | 	}
40 | 	img {
41 | 		width: 100%;
42 | 		height: 260px;
43 | 		background-color: #3c9;
44 | 		&.cover {
45 | 			object-fit: cover;
46 | 		}
47 | 		&.contain {
48 | 			object-fit: contain;
49 | 		}
50 | 		&.fill {
51 | 			object-fit: fill;
52 | 		}
53 | 		&.scale-down {
54 | 			object-fit: scale-down;
55 | 		}
56 | 	}
57 | }
58 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用transform模拟视差滚动.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用transform模拟视差滚动">
 3 | 		<ul class="parallax-scrolling">
 4 | 			<li>translateZ(-1px)</li>
 5 | 			<li>translateZ(-2px)</li>
 6 | 			<li>translateZ(-3px)</li>
 7 | 		</ul>
 8 | 		<p>内容</p>
 9 | 		<ul class="parallax-scrolling">
10 | 			<li>translateZ(-1px)</li>
11 | 			<li>translateZ(-2px)</li>
12 | 			<li>translateZ(-3px)</li>
13 | 		</ul>
14 | 	</div>
15 | </template>
16 | 
17 | <style lang="scss" scoped>
18 | $bg: "https://static.yangzw.vip/codepen/lake.jpg";
19 | .bruce {
20 | 	overflow-x: hidden;
21 | 	overflow-y: auto;
22 | 	padding: 0;
23 | 	height: 400px;
24 | 	perspective: 1px;
25 | 	transform-style: preserve-3d;
26 | 	p {
27 | 		height: 300px;
28 | 		line-height: 300px;
29 | 		text-align: center;
30 | 		font-size: 20px;
31 | 		color: #f66;
32 | 	}
33 | }
34 | .parallax-scrolling {
35 | 	display: flex;
36 | 	justify-content: center;
37 | 	align-items: center;
38 | 	height: 1000px;
39 | 	background: url($bg) no-repeat center fixed;
40 | 	li {
41 | 		width: 500px;
42 | 		text-align: center;
43 | 		font-weight: bold;
44 | 		font-size: 60px;
45 | 		&:nth-child(1) {
46 | 			color: #f66;
47 | 			transform: translateZ(-1px);
48 | 		}
49 | 		&:nth-child(2) {
50 | 			color: #09f;
51 | 			transform: translateZ(-2px);
52 | 		}
53 | 		&:nth-child(3) {
54 | 			color: #3c9;
55 | 			transform: translateZ(-3px);
56 | 		}
57 | 	}
58 | }
59 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用text-overflow控制溢出文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用text-overflow控制溢出文本">
 3 | 		<p class="ellipsis-text s-line sl-ellipsis">CSS非常有趣和搞怪，可以做一些JS也能做的事情</p>
 4 | 		<p class="ellipsis-text m-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
 5 | 		<p class="ellipsis-text m-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .ellipsis-text {
11 | 	line-height: 30px;
12 | 	font-size: 20px;
13 | 	&.s-line {
14 | 		width: 200px;
15 | 	}
16 | 	&.m-line {
17 | 		margin-top: 10px;
18 | 		width: 400px;
19 | 		text-align: justify;
20 | 	}
21 | 	&.sl-ellipsis {
22 | 		overflow: hidden;
23 | 		text-overflow: ellipsis;
24 | 		white-space: nowrap;
25 | 	}
26 | 	&.ml-ellipsis {
27 | 		display: -webkit-box;
28 | 		overflow: hidden;
29 | 		text-overflow: ellipsis;
30 | 		-webkit-box-orient: vertical;
31 | 		-webkit-line-clamp: 3;
32 | 	}
33 | 	&.mls-ellipsis {
34 | 		overflow: hidden;
35 | 		position: relative;
36 | 		max-height: 90px;
37 | 		&::after {
38 | 			position: absolute;
39 | 			right: 0;
40 | 			bottom: 0;
41 | 			padding-left: 40px;
42 | 			background: linear-gradient(to right, transparent, #fff 50%);
43 | 			content: "...";
44 | 		}
45 | 	}
46 | }
47 | </style>


--------------------------------------------------------------------------------
/icss/src/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1560619427340" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12850" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M536.816941 304.670118C495.681012 304.652563 454.911219 312.397802 416.647529 327.499294L416.647529 39.152941 197.511529 6.927059 189.741176 102.4 174.682353 3.553882 150.588235 0 225.882353 1019.964235 416.647529 978.823529 416.647529 951.717647C454.909604 966.824713 495.68047 974.570153 536.816941 974.546824 719.691294 974.546824 868.111059 824.681412 868.111059 639.759059 868.111059 454.836706 719.631059 304.670118 536.816941 304.670118M436.585412 628.796235C437.513715 566.540915 488.575951 516.739073 550.835028 517.366698 613.094106 517.994324 663.141976 568.815443 662.815043 631.076828 662.48811 693.338208 611.909294 743.630938 549.647059 743.604706 486.728699 743.107602 436.117864 691.714819 436.585412 628.796235M682.164706 751.917176C607.774118 816.670118 533.082353 779.023059 533.082353 779.023059 533.082353 779.023059 585.788235 803.117176 661.082353 739.870118 736.376471 676.623059 689.694118 568.199529 689.694118 568.199529 689.694118 568.199529 763.482353 681.140706 682.164706 751.917176" p-id="12851" fill="#ff6666"></path></svg>


--------------------------------------------------------------------------------
/icss-set/src/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1560619427340" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12850" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M536.816941 304.670118C495.681012 304.652563 454.911219 312.397802 416.647529 327.499294L416.647529 39.152941 197.511529 6.927059 189.741176 102.4 174.682353 3.553882 150.588235 0 225.882353 1019.964235 416.647529 978.823529 416.647529 951.717647C454.909604 966.824713 495.68047 974.570153 536.816941 974.546824 719.691294 974.546824 868.111059 824.681412 868.111059 639.759059 868.111059 454.836706 719.631059 304.670118 536.816941 304.670118M436.585412 628.796235C437.513715 566.540915 488.575951 516.739073 550.835028 517.366698 613.094106 517.994324 663.141976 568.815443 662.815043 631.076828 662.48811 693.338208 611.909294 743.630938 549.647059 743.604706 486.728699 743.107602 436.117864 691.714819 436.585412 628.796235M682.164706 751.917176C607.774118 816.670118 533.082353 779.023059 533.082353 779.023059 533.082353 779.023059 585.788235 803.117176 661.082353 739.870118 736.376471 676.623059 689.694118 568.199529 689.694118 568.199529 689.694118 568.199529 763.482353 681.140706 682.164706 751.917176" p-id="12851" fill="#ff6666"></path></svg>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用transform模拟视差滚动.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce" data-title="使用transform模拟视差滚动">
 3 | 		<ul class="parallax-scrolling">
 4 | 			<li>translateZ(-1px)</li>
 5 | 			<li>translateZ(-2px)</li>
 6 | 			<li>translateZ(-3px)</li>
 7 | 		</ul>
 8 | 		<p>内容</p>
 9 | 		<ul class="parallax-scrolling">
10 | 			<li>translateZ(-1px)</li>
11 | 			<li>translateZ(-2px)</li>
12 | 			<li>translateZ(-3px)</li>
13 | 		</ul>
14 | 	</div>
15 | </template>
16 | 
17 | <style lang="scss" scoped>
18 | $bg: "https://jowayyoung.github.io/static/img/icss/lake.jpg";
19 | .bruce {
20 | 	overflow-x: hidden;
21 | 	overflow-y: auto;
22 | 	padding: 0;
23 | 	height: 400px;
24 | 	perspective: 1px;
25 | 	transform-style: preserve-3d;
26 | 	p {
27 | 		height: 300px;
28 | 		line-height: 300px;
29 | 		text-align: center;
30 | 		font-size: 20px;
31 | 		color: #f66;
32 | 	}
33 | }
34 | .parallax-scrolling {
35 | 	display: flex;
36 | 	justify-content: center;
37 | 	align-items: center;
38 | 	height: 1000px;
39 | 	background: url($bg) no-repeat center fixed;
40 | 	li {
41 | 		width: 500px;
42 | 		text-align: center;
43 | 		font-weight: bold;
44 | 		font-size: 60px;
45 | 		&:nth-child(1) {
46 | 			color: #f66;
47 | 			transform: translateZ(-1px);
48 | 		}
49 | 		&:nth-child(2) {
50 | 			color: #09f;
51 | 			transform: translateZ(-2px);
52 | 		}
53 | 		&:nth-child(3) {
54 | 			color: #3c9;
55 | 			transform: translateZ(-3px);
56 | 		}
57 | 	}
58 | }
59 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用text-overflow控制溢出文本.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用text-overflow控制溢出文本">
 3 | 		<p class="ellipsis-text s-line sl-ellipsis">CSS非常有趣与搞怪，可做一些JS也能做的事情</p>
 4 | 		<p class="ellipsis-text m-line ml-ellipsis">层叠样式表(CSS)是一种用于表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可静态地修饰网页，还可配合各种脚本语言动态地对网页各元素进行格式化。</p>
 5 | 		<p class="ellipsis-text m-line mls-ellipsis">层叠样式表(CSS)是一种用于表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可静态地修饰网页，还可配合各种脚本语言动态地对网页各元素进行格式化。</p>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .ellipsis-text {
11 | 	line-height: 30px;
12 | 	font-size: 20px;
13 | 	&.s-line {
14 | 		width: 200px;
15 | 	}
16 | 	&.m-line {
17 | 		margin-top: 10px;
18 | 		width: 400px;
19 | 		text-align: justify;
20 | 	}
21 | 	&.sl-ellipsis {
22 | 		overflow: hidden;
23 | 		text-overflow: ellipsis;
24 | 		white-space: nowrap;
25 | 	}
26 | 	&.ml-ellipsis {
27 | 		display: -webkit-box; /* stylelint-disable-line */
28 | 		overflow: hidden;
29 | 		-webkit-line-clamp: 3;
30 | 		text-overflow: ellipsis;
31 | 		-webkit-box-orient: vertical;
32 | 	}
33 | 	&.mls-ellipsis {
34 | 		overflow: hidden;
35 | 		position: relative;
36 | 		max-height: 90px;
37 | 		&::after {
38 | 			position: absolute;
39 | 			right: 0;
40 | 			bottom: 0;
41 | 			padding-left: 40px;
42 | 			background: linear-gradient(to right, transparent, #fff 50%);
43 | 			content: "...";
44 | 		}
45 | 	}
46 | }
47 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用box-shadow描绘单侧投影.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用box-shadow描绘单侧投影">
 3 | 		<ul class="aside-shadow">
 4 | 			<li class="left"></li>
 5 | 			<li class="up"></li>
 6 | 			<li class="left"></li>
 7 | 			<li class="down"></li>
 8 | 			<li class="left-up"></li>
 9 | 			<li class="left-down"></li>
10 | 			<li class="right-up"></li>
11 | 			<li class="right-down"></li>
12 | 		</ul>
13 | 	</div>
14 | </template>
15 | 
16 | <style lang="scss" scoped>
17 | .aside-shadow {
18 | 	display: flex;
19 | 	flex-wrap: wrap;
20 | 	padding: 20px;
21 | 	width: 500px;
22 | 	li {
23 | 		border: 1px solid #f66;
24 | 		width: 100px;
25 | 		height: 100px;
26 | 		&:not(:nth-child(4n-3)) {
27 | 			margin-left: 20px;
28 | 		}
29 | 		&:nth-child(n+5) {
30 | 			margin-top: 20px;
31 | 		}
32 | 		&.left {
33 | 			box-shadow: -10px 0 5px -5px #f66;
34 | 		}
35 | 		&.right {
36 | 			box-shadow: 10px 0 5px -5px #f66;
37 | 		}
38 | 		&.up {
39 | 			box-shadow: 0 -10px 5px -5px #f66;
40 | 		}
41 | 		&.down {
42 | 			box-shadow: 0 10px 5px -5px #f66;
43 | 		}
44 | 		&.left-up {
45 | 			box-shadow: -10px 0 5px -5px #f66, 0 -10px 5px -5px #f66;
46 | 		}
47 | 		&.left-down {
48 | 			box-shadow: -10px 0 5px -5px #f66, 0 10px 5px -5px #f66;
49 | 		}
50 | 		&.right-up {
51 | 			box-shadow: 10px 0 5px -5px #f66, 0 -10px 5px -5px #f66;
52 | 		}
53 | 		&.right-down {
54 | 			box-shadow: 10px 0 5px -5px #f66, 0 10px 5px -5px #f66;
55 | 		}
56 | 	}
57 | }
58 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/放大镜.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="放大镜">
 3 | 		<div class="magnifier" @mousemove="move"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | $ratio: 2;
 9 | $box-w: 600px;
10 | $box-h: 400px;
11 | $box-bg: "https://static.yangzw.vip/codepen/gz.jpg";
12 | $outbox-w: $box-w * $ratio;
13 | $outbox-h: $box-h * $ratio;
14 | .magnifier {
15 | 	--x: 0;
16 | 	--y: 0;
17 | 	overflow: hidden;
18 | 	position: relative;
19 | 	width: $box-w;
20 | 	height: $box-h;
21 | 	background: url($box-bg) no-repeat center/100% 100%;
22 | 	cursor: pointer;
23 | 	&::before {
24 | 		--size: 0;
25 | 		$scale-x: calc(var(--size) / #{$ratio} - #{$ratio} * var(--x));
26 | 		$scale-y: calc(var(--size) / #{$ratio} - #{$ratio} * var(--y));
27 | 		position: absolute;
28 | 		left: var(--x);
29 | 		top: var(--y);
30 | 		border-radius: 100%;
31 | 		width: var(--size);
32 | 		height: var(--size);
33 | 		background: #333 url($box-bg) no-repeat $scale-x $scale-y/$outbox-w $outbox-h;
34 | 		box-shadow: 1px 1px 3px rgba(#000, .5);
35 | 		content: "";
36 | 		will-change: left, top;
37 | 		transform: translate(-50%, -50%);
38 | 	}
39 | 	&:hover::before {
40 | 		--size: 100px;
41 | 	}
42 | }
43 | </style>
44 | 
45 | <script>
46 | export default {
47 | 	methods: {
48 | 		move(e) {
49 | 			e.target.style.setProperty("--x", `${e.offsetX}px`);
50 | 			e.target.style.setProperty("--y", `${e.offsetY}px`);
51 | 		}
52 | 	}
53 | };
54 | </script>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用object-fit规定图像尺寸.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用object-fit规定图像尺寸">
 3 | 		<h1>我家乖狗狗：AB</h1>
 4 | 		<ul class="image-size">
 5 | 			<li>
 6 | 				<h3>Cover</h3>
 7 | 				<img class="cover" src="https://static.yangzw.vip/codepen/ab-1.jpg">
 8 | 			</li>
 9 | 			<li>
10 | 				<h3>Contain</h3>
11 | 				<img class="contain" src="https://static.yangzw.vip/codepen/ab-1.jpg">
12 | 			</li>
13 | 			<li>
14 | 				<h3>Fill</h3>
15 | 				<img class="fill" src="https://static.yangzw.vip/codepen/ab-2.jpg">
16 | 			</li>
17 | 			<li>
18 | 				<h3>ScaleDown</h3>
19 | 				<img class="scale-down" src="https://static.yangzw.vip/codepen/ab-2.jpg">
20 | 			</li>
21 | 		</ul>
22 | 	</div>
23 | </template>
24 | 
25 | <style lang="scss" scoped>
26 | h1 {
27 | 	line-height: 50px;
28 | 	font-size: 30px;
29 | 	color: #f66;
30 | }
31 | .image-size {
32 | 	display: flex;
33 | 	justify-content: space-between;
34 | 	width: 1000px;
35 | 	height: 300px;
36 | 	li {
37 | 		width: 200px;
38 | 	}
39 | 	h3 {
40 | 		height: 40px;
41 | 		line-height: 40px;
42 | 		text-align: center;
43 | 		font-weight: bold;
44 | 		font-size: 16px;
45 | 	}
46 | 	img {
47 | 		width: 100%;
48 | 		height: 260px;
49 | 		background-color: #3c9;
50 | 		&.cover {
51 | 			object-fit: cover;
52 | 		}
53 | 		&.contain {
54 | 			object-fit: contain;
55 | 		}
56 | 		&.fill {
57 | 			object-fit: fill;
58 | 		}
59 | 		&.scale-down {
60 | 			object-fit: scale-down;
61 | 		}
62 | 	}
63 | }
64 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/混沌加载圈.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="混沌加载圈">
 3 | 		<ul class="chaos-loading">
 4 | 			<li v-for="v in 4" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .chaos-loading {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	border-radius: 100%;
14 | 	width: 200px;
15 | 	height: 200px;
16 | 	&::after {
17 | 		display: block;
18 | 		filter: drop-shadow(2px 4px 6px #000);
19 | 		line-height: 200px;
20 | 		text-align: center;
21 | 		font-weight: bold;
22 | 		font-size: 30px;
23 | 		color: #fff;
24 | 		content: "Loading...";
25 | 	}
26 | 	li {
27 | 		position: absolute;
28 | 		left: 0;
29 | 		top: 0;
30 | 		border-radius: 100%;
31 | 		width: 100px;
32 | 		height: 100px;
33 | 		filter: blur(25px);
34 | 		animation: move 2s linear infinite;
35 | 		&:nth-child(1) {
36 | 			background-color: #f66;
37 | 		}
38 | 		&:nth-child(2) {
39 | 			background-color: #66f;
40 | 			animation-delay: -500ms;
41 | 		}
42 | 		&:nth-child(3) {
43 | 			background-color: #f90;
44 | 			animation-delay: -1s;
45 | 		}
46 | 		&:nth-child(4) {
47 | 			background-color: #09f;
48 | 			animation-delay: -1.5s;
49 | 		}
50 | 	}
51 | }
52 | @keyframes move {
53 | 	0%,
54 | 	100% {
55 | 		transform: translate3d(0, 0, 0);
56 | 	}
57 | 	25% {
58 | 		transform: translate3d(100%, 0, 0);
59 | 	}
60 | 	50% {
61 | 		transform: translate3d(100%, 100%, 0);
62 | 	}
63 | 	75% {
64 | 		transform: translate3d(0, 100%, 0);
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/混沌加载圈.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="混沌加载圈">
 3 | 		<ul class="chaos-loading">
 4 | 			<li v-for="v in 4" :key="v"></li>
 5 | 		</ul>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .chaos-loading {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	border-radius: 100%;
14 | 	width: 200px;
15 | 	height: 200px;
16 | 	&::after {
17 | 		display: block;
18 | 		filter: drop-shadow(2px 4px 6px #000);
19 | 		line-height: 200px;
20 | 		text-align: center;
21 | 		font-weight: bold;
22 | 		font-size: 30px;
23 | 		color: #fff;
24 | 		content: "Loading...";
25 | 	}
26 | 	li {
27 | 		position: absolute;
28 | 		left: 0;
29 | 		top: 0;
30 | 		border-radius: 100%;
31 | 		width: 100px;
32 | 		height: 100px;
33 | 		filter: blur(25px);
34 | 		animation: move 2s linear infinite;
35 | 		&:nth-child(1) {
36 | 			background-color: #f66;
37 | 		}
38 | 		&:nth-child(2) {
39 | 			background-color: #66f;
40 | 			animation-delay: -500ms;
41 | 		}
42 | 		&:nth-child(3) {
43 | 			background-color: #f90;
44 | 			animation-delay: -1s;
45 | 		}
46 | 		&:nth-child(4) {
47 | 			background-color: #09f;
48 | 			animation-delay: -1.5s;
49 | 		}
50 | 	}
51 | }
52 | @keyframes move {
53 | 	0%,
54 | 	100% {
55 | 		transform: translate3d(0, 0, 0);
56 | 	}
57 | 	25% {
58 | 		transform: translate3d(100%, 0, 0);
59 | 	}
60 | 	50% {
61 | 		transform: translate3d(100%, 100%, 0);
62 | 	}
63 | 	75% {
64 | 		transform: translate3d(0, 100%, 0);
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/粘粘球.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="粘粘球">
 3 | 		<ul class="sticky-ball">
 4 | 			<li class="ball-1"></li>
 5 | 			<li class="ball-2"></li>
 6 | 		</ul>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .sticky-ball {
12 | 	position: relative;
13 | 	width: 320px;
14 | 	height: 80px;
15 | 	filter: contrast(10);
16 | 	li {
17 | 		position: absolute;
18 | 		top: 0;
19 | 		padding: 10px;
20 | 		border-radius: 100%;
21 | 		width: 80px;
22 | 		height: 80px;
23 | 		background-color: #f66;
24 | 		filter: blur(5px);
25 | 		animation: 6s infinite;
26 | 		&.ball-1 {
27 | 			left: 0;
28 | 			animation-name: move-1 !important;
29 | 		}
30 | 		&.ball-2 {
31 | 			left: 240px;
32 | 			animation-name: move-2 !important;
33 | 		}
34 | 	}
35 | }
36 | @keyframes move-1 {
37 | 	0%,
38 | 	20%,
39 | 	100% {
40 | 		width: 80px;
41 | 		height: 80px;
42 | 	}
43 | 	50% {
44 | 		left: 110px;
45 | 		top: -15px;
46 | 		width: 110px;
47 | 		height: 110px;
48 | 	}
49 | 	85% {
50 | 		left: 75px;
51 | 		width: 90px;
52 | 		height: 70px;
53 | 	}
54 | 	90% {
55 | 		top: -2px;
56 | 		width: 75px;
57 | 		height: 85px;
58 | 	}
59 | }
60 | @keyframes move-2 {
61 | 	0%,
62 | 	20%,
63 | 	100% {
64 | 		width: 80px;
65 | 		height: 80px;
66 | 	}
67 | 	50% {
68 | 		left: 110px;
69 | 		top: -15px;
70 | 		width: 110px;
71 | 		height: 110px;
72 | 	}
73 | 	85% {
74 | 		left: 165px;
75 | 		width: 90px;
76 | 		height: 70px;
77 | 	}
78 | 	90% {
79 | 		top: -2px;
80 | 		width: 75px;
81 | 		height: 85px;
82 | 	}
83 | }
84 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/粘粘球.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="粘粘球">
 3 | 		<ul class="sticky-ball">
 4 | 			<li class="ball-1"></li>
 5 | 			<li class="ball-2"></li>
 6 | 		</ul>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .sticky-ball {
12 | 	position: relative;
13 | 	width: 320px;
14 | 	height: 80px;
15 | 	filter: contrast(10);
16 | 	li {
17 | 		position: absolute;
18 | 		top: 0;
19 | 		padding: 10px;
20 | 		border-radius: 100%;
21 | 		width: 80px;
22 | 		height: 80px;
23 | 		background-color: #f66;
24 | 		filter: blur(5px);
25 | 		animation: 6s infinite;
26 | 		&.ball-1 {
27 | 			left: 0;
28 | 			animation-name: move-1 !important;
29 | 		}
30 | 		&.ball-2 {
31 | 			left: 240px;
32 | 			animation-name: move-2 !important;
33 | 		}
34 | 	}
35 | }
36 | @keyframes move-1 {
37 | 	0%,
38 | 	20%,
39 | 	100% {
40 | 		width: 80px;
41 | 		height: 80px;
42 | 	}
43 | 	50% {
44 | 		left: 110px;
45 | 		top: -15px;
46 | 		width: 110px;
47 | 		height: 110px;
48 | 	}
49 | 	85% {
50 | 		left: 75px;
51 | 		width: 90px;
52 | 		height: 70px;
53 | 	}
54 | 	90% {
55 | 		top: -2px;
56 | 		width: 75px;
57 | 		height: 85px;
58 | 	}
59 | }
60 | @keyframes move-2 {
61 | 	0%,
62 | 	20%,
63 | 	100% {
64 | 		width: 80px;
65 | 		height: 80px;
66 | 	}
67 | 	50% {
68 | 		left: 110px;
69 | 		top: -15px;
70 | 		width: 110px;
71 | 		height: 110px;
72 | 	}
73 | 	85% {
74 | 		left: 165px;
75 | 		width: 90px;
76 | 		height: 70px;
77 | 	}
78 | 	90% {
79 | 		top: -2px;
80 | 		width: 75px;
81 | 		height: 85px;
82 | 	}
83 | }
84 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/悬浮跟踪按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="悬浮跟踪按钮">
 3 | 		<a class="track-btn">
 4 | 			<span>妙用CSS变量，让你的CSS变得更心动</span>
 5 | 		</a>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .track-btn {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	border-radius: 25px;
14 | 	width: 400px;
15 | 	height: 50px;
16 | 	background-color: #66f;
17 | 	cursor: pointer;
18 | 	line-height: 50px;
19 | 	text-align: center;
20 | 	font-weight: bold;
21 | 	font-size: 18px;
22 | 	color: #fff;
23 | 	span {
24 | 		position: relative;
25 | 		pointer-events: none; // 不加会卡顿
26 | 	}
27 | 	&::before {
28 | 		--size: 0;
29 | 		position: absolute;
30 | 		left: var(--x);
31 | 		top: var(--y);
32 | 		width: var(--size);
33 | 		height: var(--size);
34 | 		background-image: radial-gradient(circle closest-side, #09f, transparent);
35 | 		content: "";
36 | 		transform: translate3d(-50%, -50%, 0);
37 | 		transition: width 200ms ease, height 200ms ease;
38 | 	}
39 | 	&:hover::before {
40 | 		--size: 400px;
41 | 	}
42 | }
43 | </style>
44 | 
45 | <script lang="ts">
46 | import { defineComponent, onMounted } from "vue";
47 | 
48 | export default defineComponent({
49 | 	setup() {
50 | 		onMounted(() => {
51 | 			const btn = document.getElementsByClassName("track-btn")[0];
52 | 			const btnStyle = btn.style;
53 | 			btn.addEventListener("mousemove", e => {
54 | 				btnStyle.setProperty("--x", `${e.offsetX}px`);
55 | 				btnStyle.setProperty("--y", `${e.offsetY}px`);
56 | 			});
57 | 		});
58 | 	}
59 | });
60 | </script>


--------------------------------------------------------------------------------
/icss/src/components/component/悬浮状态球.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="悬浮状态球">
 3 | 		<div class="state-ball warning">
 4 | 			<div class="wave"></div>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .state-ball {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	padding: 5px;
14 | 	border: 3px solid #3c9;
15 | 	border-radius: 100%;
16 | 	width: 150px;
17 | 	height: 150px;
18 | 	background-color: #fff;
19 | 	&::before,
20 | 	&::after {
21 | 		position: absolute;
22 | 		left: 50%;
23 | 		top: 0;
24 | 		z-index: 20;
25 | 		margin-left: -100px;
26 | 		width: 200px;
27 | 		height: 200px;
28 | 		content: "";
29 | 	}
30 | 	&::before {
31 | 		margin-top: -150px;
32 | 		border-radius: 45%;
33 | 		background-color: rgba(#fff, .5);
34 | 		animation: rotate 10s linear -5s infinite;
35 | 	}
36 | 	&::after {
37 | 		margin-top: -160px;
38 | 		border-radius: 40%;
39 | 		background-color: rgba(#fff, .8);
40 | 		animation: rotate 15s infinite;
41 | 	}
42 | 	&.warning {
43 | 		border-color: #f90;
44 | 		.wave {
45 | 			background-image: linear-gradient(-180deg, #f0c78a 13%, #f90 91%);
46 | 		}
47 | 	}
48 | 	&.danger {
49 | 		border-color: #f66;
50 | 		.wave {
51 | 			background-image: linear-gradient(-180deg, #f78989 13%, #f66 91%);
52 | 		}
53 | 	}
54 | 	.wave {
55 | 		position: relative;
56 | 		border-radius: 100%;
57 | 		width: 100%;
58 | 		height: 100%;
59 | 		background-image: linear-gradient(-180deg, #af8 13%, #3c9 91%);
60 | 	}
61 | }
62 | @keyframes rotate {
63 | 	to {
64 | 		transform: rotate(1turn);
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/悬浮状态球.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="悬浮状态球">
 3 | 		<div class="state-ball warning">
 4 | 			<div class="wave"></div>
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="scss" scoped>
10 | .state-ball {
11 | 	overflow: hidden;
12 | 	position: relative;
13 | 	padding: 5px;
14 | 	border: 3px solid #3c9;
15 | 	border-radius: 100%;
16 | 	width: 150px;
17 | 	height: 150px;
18 | 	background-color: #fff;
19 | 	&::before,
20 | 	&::after {
21 | 		position: absolute;
22 | 		left: 50%;
23 | 		top: 0;
24 | 		z-index: 20;
25 | 		margin-left: -100px;
26 | 		width: 200px;
27 | 		height: 200px;
28 | 		content: "";
29 | 	}
30 | 	&::before {
31 | 		margin-top: -150px;
32 | 		border-radius: 45%;
33 | 		background-color: rgba(#fff, .5);
34 | 		animation: rotate 10s linear -5s infinite;
35 | 	}
36 | 	&::after {
37 | 		margin-top: -160px;
38 | 		border-radius: 40%;
39 | 		background-color: rgba(#fff, .8);
40 | 		animation: rotate 15s infinite;
41 | 	}
42 | 	&.warning {
43 | 		border-color: #f90;
44 | 		.wave {
45 | 			background-image: linear-gradient(-180deg, #f0c78a 13%, #f90 91%);
46 | 		}
47 | 	}
48 | 	&.danger {
49 | 		border-color: #f66;
50 | 		.wave {
51 | 			background-image: linear-gradient(-180deg, #f78989 13%, #f66 91%);
52 | 		}
53 | 	}
54 | 	.wave {
55 | 		position: relative;
56 | 		border-radius: 100%;
57 | 		width: 100%;
58 | 		height: 100%;
59 | 		background-image: linear-gradient(-180deg, #af8 13%, #3c9 91%);
60 | 	}
61 | }
62 | @keyframes rotate {
63 | 	to {
64 | 		transform: rotate(1turn);
65 | 	}
66 | }
67 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/折叠面板.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="折叠面板">
 3 | 		<div class="accordion">
 4 | 			<input id="collapse1" type="checkbox" hidden>
 5 | 			<input id="collapse2" type="checkbox" hidden>
 6 | 			<input id="collapse3" type="checkbox" hidden>
 7 | 			<article>
 8 | 				<label for="collapse1">列表1</label>
 9 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
10 | 			</article>
11 | 			<article>
12 | 				<label for="collapse2">列表2</label>
13 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
14 | 			</article>
15 | 			<article>
16 | 				<label for="collapse3">列表3</label>
17 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
18 | 			</article>
19 | 		</div>
20 | 	</div>
21 | </template>
22 | 
23 | <style lang="scss" scoped>
24 | .accordion {
25 | 	width: 300px;
26 | 	article {
27 | 		cursor: pointer;
28 | 		& + article {
29 | 			margin-top: 5px;
30 | 		}
31 | 	}
32 | 	input {
33 | 		&:nth-child(1):checked ~ article:nth-of-type(1) p,
34 | 		&:nth-child(2):checked ~ article:nth-of-type(2) p,
35 | 		&:nth-child(3):checked ~ article:nth-of-type(3) p {
36 | 			border-bottom-width: 1px;
37 | 			max-height: 600px;
38 | 		}
39 | 	}
40 | 	label {
41 | 		display: block;
42 | 		padding: 0 20px;
43 | 		height: 40px;
44 | 		background-color: #f66;
45 | 		cursor: pointer;
46 | 		line-height: 40px;
47 | 		font-size: 16px;
48 | 		color: #fff;
49 | 	}
50 | 	p {
51 | 		overflow: hidden;
52 | 		padding: 0 20px;
53 | 		border: 1px solid #f66;
54 | 		border-top: none;
55 | 		border-bottom-width: 0;
56 | 		max-height: 0;
57 | 		line-height: 30px;
58 | 		transition: all 500ms;
59 | 	}
60 | }
61 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/折叠面板.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="折叠面板">
 3 | 		<div class="accordion">
 4 | 			<input id="collapse1" type="checkbox" hidden>
 5 | 			<input id="collapse2" type="checkbox" hidden>
 6 | 			<input id="collapse3" type="checkbox" hidden>
 7 | 			<article>
 8 | 				<label for="collapse1">列表1</label>
 9 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
10 | 			</article>
11 | 			<article>
12 | 				<label for="collapse2">列表2</label>
13 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
14 | 			</article>
15 | 			<article>
16 | 				<label for="collapse3">列表3</label>
17 | 				<p>内容1<br>内容2<br>内容3<br>内容4</p>
18 | 			</article>
19 | 		</div>
20 | 	</div>
21 | </template>
22 | 
23 | <style lang="scss" scoped>
24 | .accordion {
25 | 	width: 300px;
26 | 	article {
27 | 		cursor: pointer;
28 | 		& + article {
29 | 			margin-top: 5px;
30 | 		}
31 | 	}
32 | 	input {
33 | 		&:nth-child(1):checked ~ article:nth-of-type(1) p,
34 | 		&:nth-child(2):checked ~ article:nth-of-type(2) p,
35 | 		&:nth-child(3):checked ~ article:nth-of-type(3) p {
36 | 			border-bottom-width: 1px;
37 | 			max-height: 600px;
38 | 		}
39 | 	}
40 | 	label {
41 | 		display: block;
42 | 		padding: 0 20px;
43 | 		height: 40px;
44 | 		background-color: #f66;
45 | 		cursor: pointer;
46 | 		line-height: 40px;
47 | 		font-size: 16px;
48 | 		color: #fff;
49 | 	}
50 | 	p {
51 | 		overflow: hidden;
52 | 		padding: 0 20px;
53 | 		border: 1px solid #f66;
54 | 		border-top: none;
55 | 		border-bottom-width: 0;
56 | 		max-height: 0;
57 | 		line-height: 30px;
58 | 		transition: all 500ms;
59 | 	}
60 | }
61 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/商城打孔票券.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="商城打孔票券">
 3 | 		<div class="mall-ticket">
 4 | 			<h3>100元</h3>
 5 | 			<p>网易考拉代金券</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .mall-ticket {
12 | 	display: flex;
13 | 	position: relative;
14 | 	width: 300px;
15 | 	height: 100px;
16 | 	background: radial-gradient(circle at right top, transparent 10px, #f66 0) top left/100px 51% no-repeat,
17 | 		radial-gradient(circle at right bottom, transparent 10px, #f66 0) bottom left/100px 51% no-repeat,
18 | 		radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,
19 | 		radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;
20 | 	filter: drop-shadow(2px 2px 2px rgba(#fff, .2));
21 | 	line-height: 100px;
22 | 	text-align: center;
23 | 	color: #fff;
24 | 	&::before {
25 | 		position: absolute;
26 | 		left: 100px;
27 | 		top: 0;
28 | 		bottom: 0;
29 | 		margin: auto;
30 | 		border: 1px dashed #66f;
31 | 		height: 80px;
32 | 		content: "";
33 | 	}
34 | 	&::after {
35 | 		position: absolute;
36 | 		left: 100%;
37 | 		top: 0;
38 | 		width: 5px;
39 | 		height: 100%;
40 | 		background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),
41 | 			radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);
42 | 		background-size: 5px 15px;
43 | 		content: "";
44 | 	}
45 | 	h3 {
46 | 		width: 100px;
47 | 		font-size: 30px;
48 | 	}
49 | 	p {
50 | 		flex: 1;
51 | 		font-weight: bold;
52 | 		font-size: 18px;
53 | 	}
54 | }
55 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/商城打孔票券.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="商城打孔票券">
 3 | 		<div class="mall-ticket">
 4 | 			<h3>100元</h3>
 5 | 			<p>网易考拉代金券</p>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .mall-ticket {
12 | 	display: flex;
13 | 	position: relative;
14 | 	width: 300px;
15 | 	height: 100px;
16 | 	background: radial-gradient(circle at right top, transparent 10px, #f66 0) top left/100px 51% no-repeat,
17 | 		radial-gradient(circle at right bottom, transparent 10px, #f66 0) bottom left/100px 51% no-repeat,
18 | 		radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,
19 | 		radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;
20 | 	filter: drop-shadow(2px 2px 2px rgba(#fff, .2));
21 | 	line-height: 100px;
22 | 	text-align: center;
23 | 	color: #fff;
24 | 	&::before {
25 | 		position: absolute;
26 | 		left: 100px;
27 | 		top: 0;
28 | 		bottom: 0;
29 | 		margin: auto;
30 | 		border: 1px dashed #66f;
31 | 		height: 80px;
32 | 		content: "";
33 | 	}
34 | 	&::after {
35 | 		position: absolute;
36 | 		left: 100%;
37 | 		top: 0;
38 | 		width: 5px;
39 | 		height: 100%;
40 | 		background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),
41 | 			radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);
42 | 		background-size: 5px 15px;
43 | 		content: "";
44 | 	}
45 | 	h3 {
46 | 		width: 100px;
47 | 		font-size: 30px;
48 | 	}
49 | 	p {
50 | 		flex: 1;
51 | 		font-weight: bold;
52 | 		font-size: 18px;
53 | 	}
54 | }
55 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用resize拉伸多列分栏.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用resize拉伸多列分栏">
 3 | 		<div class="stretching-column">
 4 | 			<div class="left">
 5 | 				<div class="resize-bar"></div>
 6 | 				<div class="resize-line"></div>
 7 | 				<div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
 8 | 			</div>
 9 | 			<div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
10 | 		</div>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | .stretching-column {
16 | 	overflow: hidden;
17 | 	border: 1px solid #09f;
18 | 	width: 600px;
19 | 	height: 300px;
20 | 	line-height: 20px;
21 | 	font-size: 16px;
22 | 	color: #f90;
23 | 	.left {
24 | 		overflow: hidden;
25 | 		float: left;
26 | 		position: relative;
27 | 		height: 100%;
28 | 	}
29 | 	.right {
30 | 		overflow: hidden;
31 | 		padding: 10px;
32 | 		height: 100%;
33 | 		background-color: #f0f0f0;
34 | 		word-break: break-all;
35 | 	}
36 | 	.resize-bar {
37 | 		overflow: scroll;
38 | 		width: 200px;
39 | 		height: 100%;
40 | 		opacity: 0;
41 | 		resize: horizontal;
42 | 		&::-webkit-scrollbar {
43 | 			width: 200px;
44 | 			height: 100%;
45 | 		}
46 | 		&:hover,
47 | 		&:active {
48 | 			& ~ .resize-line {
49 | 				border-left: 1px dashed #09f;
50 | 			}
51 | 		}
52 | 	}
53 | 	.resize-line {
54 | 		position: absolute;
55 | 		right: 0;
56 | 		top: 0;
57 | 		bottom: 0;
58 | 		border-left: 1px solid #ccc;
59 | 		border-right: 2px solid #f0f0f0;
60 | 		pointer-events: none;
61 | 	}
62 | 	.resize-text {
63 | 		overflow-x: hidden;
64 | 		position: absolute;
65 | 		left: 0;
66 | 		right: 5px;
67 | 		top: 0;
68 | 		bottom: 0;
69 | 		padding: 10px;
70 | 		word-break: break-all;
71 | 	}
72 | }
73 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用resize拉伸多列分栏.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用resize拉伸多列分栏">
 3 | 		<div class="stretching-column">
 4 | 			<div class="left">
 5 | 				<div class="resize-bar"></div>
 6 | 				<div class="resize-line"></div>
 7 | 				<div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
 8 | 			</div>
 9 | 			<div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
10 | 		</div>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | .stretching-column {
16 | 	overflow: hidden;
17 | 	border: 1px solid #09f;
18 | 	width: 600px;
19 | 	height: 300px;
20 | 	line-height: 20px;
21 | 	font-size: 16px;
22 | 	color: #f90;
23 | 	.left {
24 | 		overflow: hidden;
25 | 		float: left;
26 | 		position: relative;
27 | 		height: 100%;
28 | 	}
29 | 	.right {
30 | 		overflow: hidden;
31 | 		padding: 10px;
32 | 		height: 100%;
33 | 		background-color: #f0f0f0;
34 | 		word-break: break-all;
35 | 	}
36 | 	.resize-bar {
37 | 		overflow: scroll;
38 | 		width: 200px;
39 | 		height: 100%;
40 | 		opacity: 0;
41 | 		resize: horizontal;
42 | 		&::-webkit-scrollbar {
43 | 			width: 200px;
44 | 			height: 100%;
45 | 		}
46 | 		&:hover,
47 | 		&:active {
48 | 			& ~ .resize-line {
49 | 				border-left: 1px dashed #09f;
50 | 			}
51 | 		}
52 | 	}
53 | 	.resize-line {
54 | 		position: absolute;
55 | 		right: 0;
56 | 		top: 0;
57 | 		bottom: 0;
58 | 		border-left: 1px solid #ccc;
59 | 		border-right: 2px solid #f0f0f0;
60 | 		pointer-events: none;
61 | 	}
62 | 	.resize-text {
63 | 		overflow-x: hidden;
64 | 		position: absolute;
65 | 		left: 0;
66 | 		right: 5px;
67 | 		top: 0;
68 | 		bottom: 0;
69 | 		padding: 10px;
70 | 		word-break: break-all;
71 | 	}
72 | }
73 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/放大镜.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="放大镜">
 3 | 		<div class="magnifier"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | $ratio: 2;
 9 | $box-w: 600px;
10 | $box-h: 400px;
11 | $box-bg: "https://jowayyoung.github.io/static/img/icss/gz.jpg";
12 | $outbox-w: $box-w * $ratio;
13 | $outbox-h: $box-h * $ratio;
14 | .magnifier {
15 | 	--x: 0;
16 | 	--y: 0;
17 | 	overflow: hidden;
18 | 	position: relative;
19 | 	width: $box-w;
20 | 	height: $box-h;
21 | 	background: url($box-bg) no-repeat center/100% 100%;
22 | 	cursor: pointer;
23 | 	&::before {
24 | 		--size: 0;
25 | 		$scale-x: calc(var(--size) / #{$ratio} - #{$ratio} * var(--x));
26 | 		$scale-y: calc(var(--size) / #{$ratio} - #{$ratio} * var(--y));
27 | 		position: absolute;
28 | 		left: var(--x);
29 | 		top: var(--y);
30 | 		border-radius: 100%;
31 | 		width: var(--size);
32 | 		height: var(--size);
33 | 		background: #333 url($box-bg) no-repeat $scale-x $scale-y/$outbox-w $outbox-h;
34 | 		box-shadow: 1px 1px 3px rgba(#000, .5);
35 | 		content: "";
36 | 		will-change: left, top;
37 | 		transform: translate(-50%, -50%);
38 | 	}
39 | 	&:hover::before {
40 | 		--size: 100px;
41 | 	}
42 | }
43 | </style>
44 | 
45 | <script lang="ts">
46 | import { defineComponent, onMounted } from "vue";
47 | 
48 | export default defineComponent({
49 | 	setup() {
50 | 		onMounted(() => {
51 | 			const magnifier = document.getElementsByClassName("magnifier")[0];
52 | 			magnifier.addEventListener("mousemove", e => {
53 | 				e.target.style.setProperty("--x", `${e.offsetX}px`);
54 | 				e.target.style.setProperty("--y", `${e.offsetY}px`);
55 | 			});
56 | 		});
57 | 	}
58 | });
59 | </script>


--------------------------------------------------------------------------------
/icss/src/components/color/使用filter开启暗黑模式.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter开启暗黑模式">
 3 | 		<div class="dark-theme">
 4 | 			<input class="ios-switch" type="checkbox">
 5 | 			<iframe class="main" src="https://juejin.im"></iframe>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .btn {
12 | 	border-radius: 31px;
13 | 	width: 102px;
14 | 	height: 62px;
15 | 	background-color: #e9e9eb;
16 | }
17 | .dark-theme {
18 | 	display: flex;
19 | 	.ios-switch {
20 | 		position: relative;
21 | 		appearance: none;
22 | 		cursor: pointer;
23 | 		transition: all 100ms;
24 | 		@extend .btn;
25 | 		&::before {
26 | 			position: absolute;
27 | 			content: "";
28 | 			transition: all 300ms cubic-bezier(.45, 1, .4, 1);
29 | 			@extend .btn;
30 | 		}
31 | 		&::after {
32 | 			position: absolute;
33 | 			left: 4px;
34 | 			top: 4px;
35 | 			border-radius: 27px;
36 | 			width: 54px;
37 | 			height: 54px;
38 | 			background-color: #fff;
39 | 			box-shadow: 1px 1px 5px rgba(#000, .3);
40 | 			content: "";
41 | 			transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
42 | 		}
43 | 		&:checked {
44 | 			background-color: #5eb662;
45 | 			&::before {
46 | 				transform: scale(0);
47 | 			}
48 | 			&::after {
49 | 				transform: translateX(40px);
50 | 			}
51 | 			& + .main {
52 | 				filter: invert(1) hue-rotate(180deg);
53 | 				img,
54 | 				video,
55 | 				.avatar,
56 | 				.image,
57 | 				.thumb {
58 | 					filter: invert(1) hue-rotate(180deg);
59 | 				}
60 | 			}
61 | 		}
62 | 	}
63 | 	.main {
64 | 		margin-left: 20px;
65 | 		border: 1px solid #3c9;
66 | 		width: 1000px;
67 | 		height: 400px;
68 | 		background-color: #fff;
69 | 		transition: all 300ms;
70 | 	}
71 | }
72 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/color/使用filter开启暗黑模式.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用filter开启暗黑模式">
 3 | 		<div class="dark-theme">
 4 | 			<input class="ios-switch" type="checkbox">
 5 | 			<iframe class="main" src="https://juejin.im"></iframe>
 6 | 		</div>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <style lang="scss" scoped>
11 | .btn {
12 | 	border-radius: 31px;
13 | 	width: 102px;
14 | 	height: 62px;
15 | 	background-color: #e9e9eb;
16 | }
17 | .dark-theme {
18 | 	display: flex;
19 | 	.ios-switch {
20 | 		position: relative;
21 | 		appearance: none;
22 | 		cursor: pointer;
23 | 		transition: all 100ms;
24 | 		@extend .btn;
25 | 		&::before {
26 | 			position: absolute;
27 | 			content: "";
28 | 			transition: all 300ms cubic-bezier(.45, 1, .4, 1);
29 | 			@extend .btn;
30 | 		}
31 | 		&::after {
32 | 			position: absolute;
33 | 			left: 4px;
34 | 			top: 4px;
35 | 			border-radius: 27px;
36 | 			width: 54px;
37 | 			height: 54px;
38 | 			background-color: #fff;
39 | 			box-shadow: 1px 1px 5px rgba(#000, .3);
40 | 			content: "";
41 | 			transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
42 | 		}
43 | 		&:checked {
44 | 			background-color: #5eb662;
45 | 			&::before {
46 | 				transform: scale(0);
47 | 			}
48 | 			&::after {
49 | 				transform: translateX(40px);
50 | 			}
51 | 			& + .main {
52 | 				filter: invert(1) hue-rotate(180deg);
53 | 				img,
54 | 				video,
55 | 				.avatar,
56 | 				.image,
57 | 				.thumb {
58 | 					filter: invert(1) hue-rotate(180deg);
59 | 				}
60 | 			}
61 | 		}
62 | 	}
63 | 	.main {
64 | 		margin-left: 20px;
65 | 		border: 1px solid #3c9;
66 | 		width: 1000px;
67 | 		height: 400px;
68 | 		background-color: #fff;
69 | 		transition: all 300ms;
70 | 	}
71 | }
72 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/标签选框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="标签选框">
 3 | 		<div class="tab-page">
 4 | 			<nav>
 5 | 				<h3>
 6 | 					<input type="radio" name="tab">
 7 | 					<label for="tab1">标题1</label>
 8 | 				</h3>
 9 | 				<h3>
10 | 					<input type="radio" name="tab">
11 | 					<label for="tab2">标题2</label>
12 | 				</h3>
13 | 				<h3>
14 | 					<input type="radio" name="tab">
15 | 					<label for="tab3">标题3</label>
16 | 				</h3>
17 | 			</nav>
18 | 			<ul>
19 | 				<li>
20 | 					<input id="tab1">
21 | 					<p>内容1</p>
22 | 				</li>
23 | 				<li>
24 | 					<input id="tab2">
25 | 					<p>内容2</p>
26 | 				</li>
27 | 				<li>
28 | 					<input id="tab3">
29 | 					<p>内容3</p>
30 | 				</li>
31 | 			</ul>
32 | 		</div>
33 | 	</div>
34 | </template>
35 | 
36 | <style lang="scss" scoped>
37 | .tab-page {
38 | 	width: 300px;
39 | 	nav {
40 | 		display: flex;
41 | 		border: 1px solid #3c9;
42 | 		height: 40px;
43 | 		line-height: 40px;
44 | 		text-align: center;
45 | 		h3 {
46 | 			position: relative;
47 | 			flex: 1;
48 | 			background-color: #3c9;
49 | 			color: #fff;
50 | 			& + h3 {
51 | 				border-left: 1px solid #fff;
52 | 			}
53 | 		}
54 | 		input {
55 | 			display: none;
56 | 		}
57 | 		label {
58 | 			display: block;
59 | 			width: 100%;
60 | 			height: 100%;
61 | 			cursor: pointer;
62 | 		}
63 | 	}
64 | 	ul {
65 | 		overflow: hidden;
66 | 		scroll-behavior: smooth;
67 | 		border: 1px solid #3c9;
68 | 		border-top: none;
69 | 		height: 100px;
70 | 		li {
71 | 			display: flex;
72 | 			position: relative;
73 | 			justify-content: center;
74 | 			align-items: center;
75 | 			height: 100%;
76 | 			font-size: 20px;
77 | 			color: #09f;
78 | 		}
79 | 		input {
80 | 			position: absolute;
81 | 			width: 0;
82 | 			height: 0;
83 | 			opacity: 0;
84 | 		}
85 | 	}
86 | }
87 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/标签选框.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="标签选框">
 3 | 		<div class="tab-page">
 4 | 			<nav>
 5 | 				<h3>
 6 | 					<input type="radio" name="tab">
 7 | 					<label for="tab1">标题1</label>
 8 | 				</h3>
 9 | 				<h3>
10 | 					<input type="radio" name="tab">
11 | 					<label for="tab2">标题2</label>
12 | 				</h3>
13 | 				<h3>
14 | 					<input type="radio" name="tab">
15 | 					<label for="tab3">标题3</label>
16 | 				</h3>
17 | 			</nav>
18 | 			<ul>
19 | 				<li>
20 | 					<input id="tab1">
21 | 					<p>内容1</p>
22 | 				</li>
23 | 				<li>
24 | 					<input id="tab2">
25 | 					<p>内容2</p>
26 | 				</li>
27 | 				<li>
28 | 					<input id="tab3">
29 | 					<p>内容3</p>
30 | 				</li>
31 | 			</ul>
32 | 		</div>
33 | 	</div>
34 | </template>
35 | 
36 | <style lang="scss" scoped>
37 | .tab-page {
38 | 	width: 300px;
39 | 	nav {
40 | 		display: flex;
41 | 		border: 1px solid #3c9;
42 | 		height: 40px;
43 | 		line-height: 40px;
44 | 		text-align: center;
45 | 		h3 {
46 | 			position: relative;
47 | 			flex: 1;
48 | 			background-color: #3c9;
49 | 			color: #fff;
50 | 			& + h3 {
51 | 				border-left: 1px solid #fff;
52 | 			}
53 | 		}
54 | 		input {
55 | 			display: none;
56 | 		}
57 | 		label {
58 | 			display: block;
59 | 			width: 100%;
60 | 			height: 100%;
61 | 			cursor: pointer;
62 | 		}
63 | 	}
64 | 	ul {
65 | 		overflow: hidden;
66 | 		scroll-behavior: smooth;
67 | 		border: 1px solid #3c9;
68 | 		border-top: none;
69 | 		height: 100px;
70 | 		li {
71 | 			display: flex;
72 | 			position: relative;
73 | 			justify-content: center;
74 | 			align-items: center;
75 | 			height: 100%;
76 | 			font-size: 20px;
77 | 			color: #09f;
78 | 		}
79 | 		input {
80 | 			position: absolute;
81 | 			width: 0;
82 | 			height: 0;
83 | 			opacity: 0;
84 | 		}
85 | 	}
86 | }
87 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用@hover定制悬浮提示.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:hover定制悬浮提示">
 3 | 		<ul class="hover-tips">
 4 | 			<li data-name="姨妈红"></li>
 5 | 			<li data-name="基佬紫"></li>
 6 | 			<li data-name="箩底橙"></li>
 7 | 			<li data-name="姣婆蓝"></li>
 8 | 			<li data-name="大粪青"></li>
 9 | 			<li data-name="原谅绿"></li>
10 | 		</ul>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | $color-list: #f66 #66f #f90 #09f #9c3 #3c9;
16 | .hover-tips {
17 | 	display: flex;
18 | 	justify-content: space-between;
19 | 	width: 200px;
20 | 	li {
21 | 		position: relative;
22 | 		padding: 2px;
23 | 		border: 2px solid transparent;
24 | 		border-radius: 100%;
25 | 		width: 24px;
26 | 		height: 24px;
27 | 		background-clip: content-box;
28 | 		cursor: pointer;
29 | 		transition: all 300ms;
30 | 		&::before,
31 | 		&::after {
32 | 			position: absolute;
33 | 			left: 50%;
34 | 			bottom: 100%;
35 | 			opacity: 0;
36 | 			transform: translate3d(0, -30px, 0);
37 | 			transition: all 300ms;
38 | 		}
39 | 		&::before {
40 | 			margin: 0 0 12px -35px;
41 | 			border-radius: 5px;
42 | 			width: 70px;
43 | 			height: 30px;
44 | 			background-color: rgba(#000, .5);
45 | 			line-height: 30px;
46 | 			text-align: center;
47 | 			color: #fff;
48 | 			content: attr(data-name);
49 | 		}
50 | 		&::after {
51 | 			margin-left: -6px;
52 | 			border: 6px solid transparent;
53 | 			border-top-color: rgba(#000, .5);
54 | 			width: 0;
55 | 			height: 0;
56 | 			content: "";
57 | 		}
58 | 		@each $color in $color-list {
59 | 			$index: index($color-list, $color);
60 | 			&:nth-child(#{$index}) {
61 | 				background-color: $color;
62 | 				&:hover {
63 | 					border-color: $color;
64 | 				}
65 | 			}
66 | 		}
67 | 		&:hover {
68 | 			&::before,
69 | 			&::after {
70 | 				opacity: 1;
71 | 				transform: translate3d(0, 0, 0);
72 | 			}
73 | 		}
74 | 	}
75 | }
76 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用@hover定制悬浮提示.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用:hover定制悬浮提示">
 3 | 		<ul class="hover-tips">
 4 | 			<li data-name="姨妈红"></li>
 5 | 			<li data-name="基佬紫"></li>
 6 | 			<li data-name="箩底橙"></li>
 7 | 			<li data-name="姣婆蓝"></li>
 8 | 			<li data-name="大粪青"></li>
 9 | 			<li data-name="原谅绿"></li>
10 | 		</ul>
11 | 	</div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | $color-list: #f66 #66f #f90 #09f #9c3 #3c9;
16 | .hover-tips {
17 | 	display: flex;
18 | 	justify-content: space-between;
19 | 	width: 200px;
20 | 	li {
21 | 		position: relative;
22 | 		padding: 2px;
23 | 		border: 2px solid transparent;
24 | 		border-radius: 100%;
25 | 		width: 24px;
26 | 		height: 24px;
27 | 		background-clip: content-box;
28 | 		cursor: pointer;
29 | 		transition: all 300ms;
30 | 		&::before,
31 | 		&::after {
32 | 			position: absolute;
33 | 			left: 50%;
34 | 			bottom: 100%;
35 | 			opacity: 0;
36 | 			transform: translate3d(0, -30px, 0);
37 | 			transition: all 300ms;
38 | 		}
39 | 		&::before {
40 | 			margin: 0 0 12px -35px;
41 | 			border-radius: 5px;
42 | 			width: 70px;
43 | 			height: 30px;
44 | 			background-color: rgba(#000, .5);
45 | 			line-height: 30px;
46 | 			text-align: center;
47 | 			color: #fff;
48 | 			content: attr(data-name);
49 | 		}
50 | 		&::after {
51 | 			margin-left: -6px;
52 | 			border: 6px solid transparent;
53 | 			border-top-color: rgba(#000, .5);
54 | 			width: 0;
55 | 			height: 0;
56 | 			content: "";
57 | 		}
58 | 		@each $color in $color-list {
59 | 			$index: index($color-list, $color);
60 | 			&:nth-child(#{$index}) {
61 | 				background-color: $color;
62 | 				&:hover {
63 | 					border-color: $color;
64 | 				}
65 | 			}
66 | 		}
67 | 		&:hover {
68 | 			&::before,
69 | 			&::after {
70 | 				opacity: 1;
71 | 				transform: translate3d(0, 0, 0);
72 | 			}
73 | 		}
74 | 	}
75 | }
76 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/三维立方体.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="三维立方体">
 3 | 		<div class="td-cube">
 4 | 			<ul>
 5 | 				<li class="front">1</li>
 6 | 				<li class="back">2</li>
 7 | 				<li class="top">3</li>
 8 | 				<li class="bottom">4</li>
 9 | 				<li class="left">5</li>
10 | 				<li class="right">6</li>
11 | 			</ul>
12 | 		</div>
13 | 	</div>
14 | </template>
15 | 
16 | <style lang="scss" scoped>
17 | $width: 150px;
18 | $height: 150px;
19 | $length: 150px;
20 | .bruce {
21 | 	padding: 100px 0;
22 | }
23 | .td-cube {
24 | 	width: $width;
25 | 	height: $height;
26 | 	perspective: 1000px;
27 | 	ul {
28 | 		position: relative;
29 | 		width: 100%;
30 | 		height: 100%;
31 | 		transform: rotateX(-15deg) rotateY(15deg);
32 | 		transform-style: preserve-3d;
33 | 		animation: rotate 5s infinite linear;
34 | 	}
35 | 	li {
36 | 		display: flex;
37 | 		position: absolute;
38 | 		justify-content: center;
39 | 		align-items: center;
40 | 		width: $width;
41 | 		height: $height;
42 | 		opacity: .8;
43 | 		font-size: 50px;
44 | 		color: #fff;
45 | 		&.front {
46 | 			background-color: #f66;
47 | 			transform: translateZ($length / 2);
48 | 		}
49 | 		&.back {
50 | 			background-color: #66f;
51 | 			transform: rotateY(180deg) translateZ($length / 2);
52 | 		}
53 | 		&.top {
54 | 			background-color: #f90;
55 | 			transform: rotateX(90deg) translateZ($height / 2);
56 | 		}
57 | 		&.bottom {
58 | 			background-color: #09f;
59 | 			transform: rotateX(-90deg) translateZ($height / 2);
60 | 		}
61 | 		&.left {
62 | 			background-color: #9c3;
63 | 			transform: rotateY(-90deg) translateZ($width / 2);
64 | 		}
65 | 		&.right {
66 | 			background-color: #3c9;
67 | 			transform: rotateY(90deg) translateZ($width / 2);
68 | 		}
69 | 	}
70 | }
71 | @keyframes rotate {
72 | 	from {
73 | 		transform: rotateY(0) rotateX(0);
74 | 	}
75 | 	to {
76 | 		transform: rotateY(-1turn) rotateX(-1turn);
77 | 	}
78 | }
79 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用overflow-x排版横向列表.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用overflow-x排版横向列表">
 3 | 		<div class="horizontal-list flex">
 4 | 			<ul>
 5 | 				<li>Alibaba</li>
 6 | 				<li>Tencent</li>
 7 | 				<li>Baidu</li>
 8 | 				<li>Jingdong</li>
 9 | 				<li>Ant</li>
10 | 				<li>Netease</li>
11 | 				<li>Meituan</li>
12 | 				<li>ByteDance</li>
13 | 				<li>360</li>
14 | 				<li>Sina</li>
15 | 			</ul>
16 | 		</div>
17 | 		<div class="horizontal-list inline">
18 | 			<ul>
19 | 				<li>Alibaba</li>
20 | 				<li>Tencent</li>
21 | 				<li>Baidu</li>
22 | 				<li>Jingdong</li>
23 | 				<li>Ant</li>
24 | 				<li>Netease</li>
25 | 				<li>Meituan</li>
26 | 				<li>ByteDance</li>
27 | 				<li>360</li>
28 | 				<li>Sina</li>
29 | 			</ul>
30 | 		</div>
31 | 	</div>
32 | </template>
33 | 
34 | <style lang="scss" scoped>
35 | .horizontal-list {
36 | 	overflow: hidden;
37 | 	width: 300px;
38 | 	height: 100px;
39 | 	& + .horizontal-list {
40 | 		margin-top: 10px;
41 | 	}
42 | 	ul {
43 | 		overflow-x: auto;
44 | 		cursor: pointer;
45 | 		&::-webkit-scrollbar {
46 | 			height: 10px;
47 | 		}
48 | 		&::-webkit-scrollbar-track {
49 | 			background-color: #f0f0f0;
50 | 		}
51 | 		&::-webkit-scrollbar-thumb {
52 | 			border-radius: 5px;
53 | 			background-color: #f66;
54 | 		}
55 | 	}
56 | 	li {
57 | 		overflow: hidden;
58 | 		height: 90px;
59 | 		background-color: #66f;
60 | 		line-height: 90px;
61 | 		text-align: center;
62 | 		font-size: 16px;
63 | 		color: #fff;
64 | 		& + li {
65 | 			margin-left: 10px;
66 | 		}
67 | 	}
68 | 	&.flex {
69 | 		ul {
70 | 			display: flex;
71 | 			flex-wrap: nowrap;
72 | 			justify-content: space-between;
73 | 		}
74 | 		li {
75 | 			flex-shrink: 0;
76 | 			flex-basis: 90px;
77 | 		}
78 | 	}
79 | 	&.inline {
80 | 		height: 102px;
81 | 		ul {
82 | 			overflow-y: hidden;
83 | 			white-space: nowrap;
84 | 		}
85 | 		li {
86 | 			display: inline-block;
87 | 			width: 90px;
88 | 		}
89 | 	}
90 | }
91 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用overflow-x排版横向列表.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-y" data-title="使用overflow-x排版横向列表">
 3 | 		<div class="horizontal-list flex">
 4 | 			<ul>
 5 | 				<li>Alibaba</li>
 6 | 				<li>Tencent</li>
 7 | 				<li>Baidu</li>
 8 | 				<li>Jingdong</li>
 9 | 				<li>Ant</li>
10 | 				<li>Netease</li>
11 | 				<li>Meituan</li>
12 | 				<li>ByteDance</li>
13 | 				<li>360</li>
14 | 				<li>Sina</li>
15 | 			</ul>
16 | 		</div>
17 | 		<div class="horizontal-list inline">
18 | 			<ul>
19 | 				<li>Alibaba</li>
20 | 				<li>Tencent</li>
21 | 				<li>Baidu</li>
22 | 				<li>Jingdong</li>
23 | 				<li>Ant</li>
24 | 				<li>Netease</li>
25 | 				<li>Meituan</li>
26 | 				<li>ByteDance</li>
27 | 				<li>360</li>
28 | 				<li>Sina</li>
29 | 			</ul>
30 | 		</div>
31 | 	</div>
32 | </template>
33 | 
34 | <style lang="scss" scoped>
35 | .horizontal-list {
36 | 	overflow: hidden;
37 | 	width: 300px;
38 | 	height: 100px;
39 | 	& + .horizontal-list {
40 | 		margin-top: 10px;
41 | 	}
42 | 	ul {
43 | 		overflow-x: auto;
44 | 		cursor: pointer;
45 | 		&::-webkit-scrollbar {
46 | 			height: 10px;
47 | 		}
48 | 		&::-webkit-scrollbar-track {
49 | 			background-color: #f0f0f0;
50 | 		}
51 | 		&::-webkit-scrollbar-thumb {
52 | 			border-radius: 5px;
53 | 			background-color: #f66;
54 | 		}
55 | 	}
56 | 	li {
57 | 		overflow: hidden;
58 | 		height: 90px;
59 | 		background-color: #66f;
60 | 		line-height: 90px;
61 | 		text-align: center;
62 | 		font-size: 16px;
63 | 		color: #fff;
64 | 		& + li {
65 | 			margin-left: 10px;
66 | 		}
67 | 	}
68 | 	&.flex {
69 | 		ul {
70 | 			display: flex;
71 | 			flex-wrap: nowrap;
72 | 			justify-content: space-between;
73 | 		}
74 | 		li {
75 | 			flex-shrink: 0;
76 | 			flex-basis: 90px;
77 | 		}
78 | 	}
79 | 	&.inline {
80 | 		height: 102px;
81 | 		ul {
82 | 			overflow-y: hidden;
83 | 			white-space: nowrap;
84 | 		}
85 | 		li {
86 | 			display: inline-block;
87 | 			width: 90px;
88 | 		}
89 | 	}
90 | }
91 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/三维立方体.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="三维立方体">
 3 | 		<div class="td-cube">
 4 | 			<ul>
 5 | 				<li class="front">1</li>
 6 | 				<li class="back">2</li>
 7 | 				<li class="top">3</li>
 8 | 				<li class="bottom">4</li>
 9 | 				<li class="left">5</li>
10 | 				<li class="right">6</li>
11 | 			</ul>
12 | 		</div>
13 | 	</div>
14 | </template>
15 | 
16 | <style lang="scss" scoped>
17 | $width: 150px;
18 | $height: 150px;
19 | $length: 150px;
20 | .bruce {
21 | 	padding: 100px 0;
22 | }
23 | .td-cube {
24 | 	width: $width;
25 | 	height: $height;
26 | 	perspective: 1000px;
27 | 	ul {
28 | 		position: relative;
29 | 		width: 100%;
30 | 		height: 100%;
31 | 		transform: rotateX(-15deg) rotateY(15deg);
32 | 		transform-style: preserve-3d;
33 | 		animation: rotate 5s infinite linear;
34 | 	}
35 | 	li {
36 | 		display: flex;
37 | 		position: absolute;
38 | 		justify-content: center;
39 | 		align-items: center;
40 | 		width: $width;
41 | 		height: $height;
42 | 		opacity: .8;
43 | 		font-size: 50px;
44 | 		color: #fff;
45 | 		&.front {
46 | 			background-color: #f66;
47 | 			transform: translateZ(calc($length / 2));
48 | 		}
49 | 		&.back {
50 | 			background-color: #66f;
51 | 			transform: rotateY(180deg) translateZ(calc($length / 2));
52 | 		}
53 | 		&.top {
54 | 			background-color: #f90;
55 | 			transform: rotateX(90deg) translateZ(calc($height / 2));
56 | 		}
57 | 		&.bottom {
58 | 			background-color: #09f;
59 | 			transform: rotateX(-90deg) translateZ(calc($height / 2));
60 | 		}
61 | 		&.left {
62 | 			background-color: #9c3;
63 | 			transform: rotateY(-90deg) translateZ(calc($width / 2));
64 | 		}
65 | 		&.right {
66 | 			background-color: #3c9;
67 | 			transform: rotateY(90deg) translateZ(calc($width / 2));
68 | 		}
69 | 	}
70 | }
71 | @keyframes rotate {
72 | 	from {
73 | 		transform: rotateY(0) rotateX(0);
74 | 	}
75 | 	to {
76 | 		transform: rotateY(-1turn) rotateX(-1turn);
77 | 	}
78 | }
79 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/迭代计数器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="迭代计数器">
 3 | 		<div class="iterative-counter">
 4 | 			<ul>
 5 | 				<li>
 6 | 					<input id="angular" type="checkbox">
 7 | 					<label for="angular">Angular</label>
 8 | 				</li>
 9 | 				<li>
10 | 					<input id="react" type="checkbox">
11 | 					<label for="react">React</label>
12 | 				</li>
13 | 				<li>
14 | 					<input id="vue" type="checkbox">
15 | 					<label for="vue">Vue</label>
16 | 				</li>
17 | 			</ul>
18 | 			<p class="count" data-unit="个">框架：</p>
19 | 			<p class="weight" data-unit="%">权重：</p>
20 | 		</div>
21 | 	</div>
22 | </template>
23 | 
24 | <style lang="scss" scoped>
25 | .iterative-counter {
26 | 	ul {
27 | 		counter-reset: index 0 count 0 weight 0;
28 | 	}
29 | 	li {
30 | 		display: flex;
31 | 		position: relative;
32 | 		align-items: center;
33 | 		counter-increment: index 1;
34 | 		&::before {
35 | 			content: counter(index)"、"; /* stylelint-disable-line */
36 | 		}
37 | 		& + li {
38 | 			margin-top: 10px;
39 | 		}
40 | 	}
41 | 	input {
42 | 		overflow: hidden;
43 | 		position: absolute;
44 | 		width: 0;
45 | 		height: 0;
46 | 		opacity: 0;
47 | 		&:checked + label::before {
48 | 			color: #3c9;
49 | 			content: "\2713";
50 | 		}
51 | 	}
52 | 	label {
53 | 		display: flex;
54 | 		align-items: center;
55 | 		height: 20px;
56 | 		&::before {
57 | 			margin-right: 5px;
58 | 			border: 1px solid #3c9;
59 | 			width: 20px;
60 | 			height: 20px;
61 | 			cursor: pointer;
62 | 			line-height: 20px;
63 | 			text-align: center;
64 | 			color: transparent;
65 | 			content: "";
66 | 			transition: all 300ms;
67 | 		}
68 | 	}
69 | 	p {
70 | 		margin-top: 10px;
71 | 		&.count::after {
72 | 			content: counter(count) attr(data-unit);
73 | 		}
74 | 		&.weight::after {
75 | 			content: counter(weight) attr(data-unit);
76 | 		}
77 | 	}
78 | }
79 | #angular:checked {
80 | 	counter-increment: count 1 weight 20;
81 | }
82 | #react:checked {
83 | 	counter-increment: count 1 weight 50;
84 | }
85 | #vue:checked {
86 | 	counter-increment: count 1 weight 30;
87 | }
88 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/迭代计数器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="迭代计数器">
 3 | 		<div class="iterative-counter">
 4 | 			<ul>
 5 | 				<li>
 6 | 					<input id="angular" type="checkbox">
 7 | 					<label for="angular">Angular</label>
 8 | 				</li>
 9 | 				<li>
10 | 					<input id="react" type="checkbox">
11 | 					<label for="react">React</label>
12 | 				</li>
13 | 				<li>
14 | 					<input id="vue" type="checkbox">
15 | 					<label for="vue">Vue</label>
16 | 				</li>
17 | 			</ul>
18 | 			<p class="count" data-unit="个">框架：</p>
19 | 			<p class="weight" data-unit="%">权重：</p>
20 | 		</div>
21 | 	</div>
22 | </template>
23 | 
24 | <style lang="scss" scoped>
25 | .iterative-counter {
26 | 	ul {
27 | 		counter-reset: index 0 count 0 weight 0;
28 | 	}
29 | 	li {
30 | 		display: flex;
31 | 		position: relative;
32 | 		align-items: center;
33 | 		counter-increment: index 1;
34 | 		&::before {
35 | 			content: counter(index)"、"; /* stylelint-disable-line */
36 | 		}
37 | 		& + li {
38 | 			margin-top: 10px;
39 | 		}
40 | 	}
41 | 	input {
42 | 		overflow: hidden;
43 | 		position: absolute;
44 | 		width: 0;
45 | 		height: 0;
46 | 		opacity: 0;
47 | 		&:checked + label::before {
48 | 			color: #3c9;
49 | 			content: "\2713";
50 | 		}
51 | 	}
52 | 	label {
53 | 		display: flex;
54 | 		align-items: center;
55 | 		height: 20px;
56 | 		&::before {
57 | 			margin-right: 5px;
58 | 			border: 1px solid #3c9;
59 | 			width: 20px;
60 | 			height: 20px;
61 | 			cursor: pointer;
62 | 			line-height: 20px;
63 | 			text-align: center;
64 | 			color: transparent;
65 | 			content: "";
66 | 			transition: all 300ms;
67 | 		}
68 | 	}
69 | 	p {
70 | 		margin-top: 10px;
71 | 		&.count::after {
72 | 			content: counter(count) attr(data-unit);
73 | 		}
74 | 		&.weight::after {
75 | 			content: counter(weight) attr(data-unit);
76 | 		}
77 | 	}
78 | }
79 | #angular:checked {
80 | 	counter-increment: count 1 weight 20;
81 | }
82 | #react:checked {
83 | 	counter-increment: count 1 weight 50;
84 | }
85 | #vue:checked {
86 | 	counter-increment: count 1 weight 30;
87 | }
88 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/悬浮视差按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div ref="bg" class="bruce flex-ct-x" data-title="悬浮视差按钮">
 3 | 		<a ref="btn" class="parallax-btn" data-name="妙用CSS变量，让你的CSS变得更心动" @mousemove="move" @mouseup="up" @mousedown="down" @mouseleave="leave"></a>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	transform: perspective(800px);
10 | 	transform-style: preserve-3d;
11 | }
12 | .parallax-btn {
13 | 	position: relative;
14 | 	width: 400px;
15 | 	height: 50px;
16 | 	cursor: pointer;
17 | 	user-select: none;
18 | 	line-height: 50px;
19 | 	text-align: center;
20 | 	font-size: 18px;
21 | 	color: #fff;
22 | 	&::before {
23 | 		position: absolute;
24 | 		left: 0;
25 | 		right: 0;
26 | 		top: 0;
27 | 		bottom: 0;
28 | 		border-radius: 4px;
29 | 		background: linear-gradient(135deg, #6e8efb, #a777e3);
30 | 		box-shadow: 0 2px 5px rgba(#000, .2);
31 | 		content: "";
32 | 		will-change: transform;
33 | 		transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
34 | 		transition: box-shadow 500ms ease, transform 200ms ease;
35 | 	}
36 | 	&::after {
37 | 		display: inline-block;
38 | 		position: relative;
39 | 		font-weight: bold;
40 | 		content: attr(data-name);
41 | 		will-change: transform;
42 | 		transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
43 | 		transition: transform 200ms ease;
44 | 	}
45 | 	&:hover::before {
46 | 		box-shadow: 0 5px 15px rgba(#000, .3);
47 | 	}
48 | }
49 | </style>
50 | 
51 | <script>
52 | export default {
53 | 	mounted() {
54 | 		this.bgStyle = this.$refs.bg.style;
55 | 		this.btnRect = this.$refs.btn.getBoundingClientRect();
56 | 	},
57 | 	methods: {
58 | 		down(e) {
59 | 			this.bgStyle.setProperty("--tz", "-25px");
60 | 		},
61 | 		leave(e) {
62 | 			this.bgStyle.setProperty("--ty", "0");
63 | 			this.bgStyle.setProperty("--rx", "0");
64 | 			this.bgStyle.setProperty("--ry", "0");
65 | 		},
66 | 		move(e) {
67 | 			const dx = e.offsetX - this.btnRect.width / 2;
68 | 			const dy = e.offsetY - this.btnRect.height / 2;
69 | 			this.bgStyle.setProperty("--rx", `${dy / -1}deg`);
70 | 			this.bgStyle.setProperty("--ry", `${dx / 10}deg`);
71 | 		},
72 | 		up() {
73 | 			this.bgStyle.setProperty("--tz", "-12px");
74 | 		}
75 | 	}
76 | };
77 | </script>


--------------------------------------------------------------------------------
/icss-set/src/components/layout/使用clip-path排版蜂窝布局.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip-path排版蜂窝布局">
 3 | 		<input id="a" type="checkbox" hidden>
 4 | 		<input id="b" type="checkbox" hidden>
 5 | 		<input id="c" type="checkbox" hidden>
 6 | 		<input id="d" type="checkbox" hidden>
 7 | 		<div class="cellular-layout" style="--count: 16">
 8 | 			<label for="a" style="--index: 0">我</label>
 9 | 			<label class="a" style="--index: 1">见</label>
10 | 			<label class="a" style="--index: 2">犹</label>
11 | 			<label class="a" style="--index: 3">怜</label>
12 | 			<label for="b" style="--index: 4">爱</label>
13 | 			<label class="b" style="--index: 5">不</label>
14 | 			<label class="b" style="--index: 6">释</label>
15 | 			<label class="b" style="--index: 7">手</label>
16 | 			<label for="c" style="--index: 8">雅</label>
17 | 			<label class="c" style="--index: 9">俗</label>
18 | 			<label class="c" style="--index: 10">共</label>
19 | 			<label class="c" style="--index: 11">赏</label>
20 | 			<label for="d" style="--index: 12">君</label>
21 | 			<label class="d" style="--index: 13">子</label>
22 | 			<label class="d" style="--index: 14">好</label>
23 | 			<label class="d" style="--index: 15">逑</label>
24 | 		</div>
25 | 	</div>
26 | </template>
27 | 
28 | <style lang="scss" scoped>
29 | .bruce {
30 | 	padding: 100px 0;
31 | }
32 | .cellular-layout {
33 | 	display: flex;
34 | 	flex-wrap: wrap;
35 | 	justify-content: center;
36 | 	margin-top: -50px;
37 | 	width: 400px;
38 | 	text-align: center;
39 | 	label {
40 | 		--Θ: calc(var(--index) / var(--count) * 1turn);
41 | 		margin-left: -15px;
42 | 		width: 100px;
43 | 		height: 100px;
44 | 		background-color: #3c9;
45 | 		filter: hue-rotate(var(--Θ));
46 | 		clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
47 | 		cursor: pointer;
48 | 		line-height: 100px;
49 | 		font-size: 20px;
50 | 		color: #fff;
51 | 		transition: all 300ms;
52 | 		&:nth-child(even) {
53 | 			transform: translateY(50px);
54 | 		}
55 | 		&:nth-child(4n-3) {
56 | 			margin-left: 0;
57 | 		}
58 | 	}
59 | }
60 | #a:checked ~ .cellular-layout .a {
61 | 	opacity: 0;
62 | }
63 | #b:checked ~ .cellular-layout .b {
64 | 	opacity: 0;
65 | }
66 | #c:checked ~ .cellular-layout .c {
67 | 	opacity: 0;
68 | }
69 | #d:checked ~ .cellular-layout .d {
70 | 	opacity: 0;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/icss/src/components/layout/使用clip-path排版蜂窝布局.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip-path排版蜂窝布局">
 3 | 		<input id="a" type="checkbox" hidden>
 4 | 		<input id="b" type="checkbox" hidden>
 5 | 		<input id="c" type="checkbox" hidden>
 6 | 		<input id="d" type="checkbox" hidden>
 7 | 		<div class="cellular-layout" style="--count: 16;">
 8 | 			<label for="a" style="--index: 0;">我</label>
 9 | 			<label class="a" style="--index: 1;">武</label>
10 | 			<label class="a" style="--index: 2;">惟</label>
11 | 			<label class="a" style="--index: 3;">扬</label>
12 | 			<label for="b" style="--index: 4;">爱</label>
13 | 			<label class="b" style="--index: 5;">日</label>
14 | 			<label class="b" style="--index: 6;">惜</label>
15 | 			<label class="b" style="--index: 7;">力</label>
16 | 			<label for="c" style="--index: 8;">掘</label>
17 | 			<label class="c" style="--index: 9;">井</label>
18 | 			<label class="c" style="--index: 10;">及</label>
19 | 			<label class="c" style="--index: 11;">泉</label>
20 | 			<label for="d" style="--index: 12;">金</label>
21 | 			<label class="d" style="--index: 13;">榜</label>
22 | 			<label class="d" style="--index: 14;">题</label>
23 | 			<label class="d" style="--index: 15;">名</label>
24 | 		</div>
25 | 	</div>
26 | </template>
27 | 
28 | <style lang="scss" scoped>
29 | .bruce {
30 | 	padding: 100px 0;
31 | }
32 | .cellular-layout {
33 | 	display: flex;
34 | 	flex-wrap: wrap;
35 | 	justify-content: center;
36 | 	margin-top: -50px;
37 | 	width: 400px;
38 | 	text-align: center;
39 | 	label {
40 | 		--angle: calc(var(--index) / var(--count) * 1turn);
41 | 		margin-left: -15px;
42 | 		width: 100px;
43 | 		height: 100px;
44 | 		background-color: #3c9;
45 | 		filter: hue-rotate(var(--angle));
46 | 		clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
47 | 		cursor: pointer;
48 | 		line-height: 100px;
49 | 		font-size: 20px;
50 | 		color: #fff;
51 | 		transition: all 300ms;
52 | 		&:nth-child(even) {
53 | 			transform: translateY(50px);
54 | 		}
55 | 		&:nth-child(4n-3) {
56 | 			margin-left: 0;
57 | 		}
58 | 	}
59 | }
60 | #a:checked ~ .cellular-layout .a {
61 | 	opacity: 0;
62 | }
63 | #b:checked ~ .cellular-layout .b {
64 | 	opacity: 0;
65 | }
66 | #c:checked ~ .cellular-layout .c {
67 | 	opacity: 0;
68 | }
69 | #d:checked ~ .cellular-layout .d {
70 | 	opacity: 0;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/滚动渐变背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="滚动渐变背景">
 3 | 		<div ref="bg" class="dynamic-bg">
 4 | 			<header></header>
 5 | 			<main @scroll="scroll">
 6 | 				<div>
 7 | 					<p>网易公司（NASDAQ: NTES），1997年由创始人兼CEO丁磊先生在广州创办，2000年在美国NASDAQ股票交易所挂牌上市，是中国领先的互联网技术公司。在开发互联网应用、服务及其它技术方面，始终保持中国业界领先地位。本着对中国互联网发展强烈的使命感，缔造美好生活的愿景，网易利用最先进的互联网技术，加强人与人之间信息的交流和共享。</p>
 8 | 					<p>网易公司推出了门户网站、在线游戏、电子邮箱、在线教育、电子商务、在线音乐、网易bobo等多种服务。网易在广州天河智慧城的总部项目计划2019年1月建成，网易游戏总部将入驻。2016年，游戏业务营业收入在网易总营收中占比73.3%。2011年，网易杭州研究院启用。网易传媒等业务在北京。网易在杭州上线了网易考拉海购、网易云音乐等项目。</p>
 9 | 					<p>网易2019全年财报显示，网易公司2019年全年净收入为592.4亿元；基于非美国通用会计准则，归属于网易公司股东的持续经营净利润为156.6亿元。</p>
10 | 					<p>2019年，网易深入推进战略聚焦，坚守内容消费领域，积极布局游戏、教育、音乐、电商等核心赛道，取得重大突破。在保持稳健增长的同时，网易有道、创新及其他等业务板块爆发强大潜力，为未来的长期发展提供源源不断的动能。</p>
11 | 				</div>
12 | 			</main>
13 | 		</div>
14 | 	</div>
15 | </template>
16 | 
17 | <style lang="scss" scoped>
18 | .dynamic-bg {
19 | 	--scrolly: 250;
20 | 	overflow: hidden;
21 | 	position: relative;
22 | 	border: 1px solid #66f;
23 | 	width: 400px;
24 | 	height: 400px;
25 | 	header {
26 | 		--Θ: calc(var(--scrolly) * 2deg);
27 | 		--size: calc(1500px - var(--scrolly) * 2px);
28 | 		--x: calc(var(--size) / 2 * -1);
29 | 		--y: calc(var(--scrolly) * -1px);
30 | 		--ratio: calc(50% - var(--scrolly) / 20 * 1%);
31 | 		position: absolute;
32 | 		left: 50%;
33 | 		bottom: 100%;
34 | 		margin: 0 0 var(--y) var(--x);
35 | 		border-radius: var(--ratio);
36 | 		width: var(--size);
37 | 		height: var(--size);
38 | 		background-color: #3c9;
39 | 		filter: hue-rotate(var(--Θ));
40 | 		animation: rotate 5s linear infinite;
41 | 	}
42 | 	main {
43 | 		overflow: auto;
44 | 		position: relative;
45 | 		width: 100%;
46 | 		height: 100%;
47 | 		div {
48 | 			padding: 300px 20px 50px;
49 | 		}
50 | 		p {
51 | 			line-height: 1.2;
52 | 			text-align: justify;
53 | 			text-indent: 2em;
54 | 		}
55 | 	}
56 | }
57 | @keyframes rotate {
58 | 	to {
59 | 		transform: rotate(1turn);
60 | 	}
61 | }
62 | </style>
63 | 
64 | <script>
65 | export default {
66 | 	mounted() {
67 | 		this.bgStyle = this.$refs.bg.style;
68 | 	},
69 | 	methods: {
70 | 		scroll(e) {
71 | 			const top = e.target.scrollTop;
72 | 			if (top <= 250) {
73 | 				this.bgStyle.setProperty("--scrolly", 250 - top);
74 | 			} else {
75 | 				this.bgStyle.setProperty("--scrolly", 0);
76 | 			}
77 | 		}
78 | 	}
79 | };
80 | </script>


--------------------------------------------------------------------------------
/icss/src/components/component/悬浮视差按钮.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="悬浮视差按钮">
 3 | 		<a class="parallax-btn" data-name="妙用CSS变量，让你的CSS变得更心动"></a>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="scss" scoped>
 8 | .bruce {
 9 | 	transform: perspective(800px);
10 | 	transform-style: preserve-3d;
11 | }
12 | .parallax-btn {
13 | 	position: relative;
14 | 	width: 400px;
15 | 	height: 50px;
16 | 	cursor: pointer;
17 | 	user-select: none;
18 | 	line-height: 50px;
19 | 	text-align: center;
20 | 	font-size: 18px;
21 | 	color: #fff;
22 | 	&::before {
23 | 		position: absolute;
24 | 		left: 0;
25 | 		right: 0;
26 | 		top: 0;
27 | 		bottom: 0;
28 | 		border-radius: 4px;
29 | 		background: linear-gradient(135deg, #6e8efb, #a777e3);
30 | 		box-shadow: 0 2px 5px rgba(#000, .2);
31 | 		content: "";
32 | 		will-change: transform;
33 | 		transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
34 | 		transition: box-shadow 500ms ease, transform 200ms ease;
35 | 	}
36 | 	&::after {
37 | 		display: inline-block;
38 | 		position: relative;
39 | 		font-weight: bold;
40 | 		content: attr(data-name);
41 | 		will-change: transform;
42 | 		transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
43 | 		transition: transform 200ms ease;
44 | 	}
45 | 	&:hover::before {
46 | 		box-shadow: 0 5px 15px rgba(#000, .3);
47 | 	}
48 | }
49 | </style>
50 | 
51 | <script lang="ts">
52 | import { defineComponent, onMounted } from "vue";
53 | 
54 | export default defineComponent({
55 | 	setup() {
56 | 		onMounted(() => {
57 | 			const btn = document.getElementsByClassName("parallax-btn")[0];
58 | 			const btnStyle = btn.style;
59 | 			const btnRect = btn.getBoundingClientRect();
60 | 			btn.addEventListener("mousemove", e => {
61 | 				const dx = e.offsetX - btnRect.width / 2;
62 | 				const dy = e.offsetY - btnRect.height / 2;
63 | 				btnStyle.setProperty("--rx", `${dy / -1}deg`);
64 | 				btnStyle.setProperty("--ry", `${dx / 10}deg`);
65 | 			});
66 | 			btn.addEventListener("mouseup", () => {
67 | 				btnStyle.setProperty("--tz", "-12px");
68 | 			});
69 | 			btn.addEventListener("mousedown", () => {
70 | 				btnStyle.setProperty("--tz", "-25px");
71 | 			});
72 | 			btn.addEventListener("mouseleave", () => {
73 | 				btnStyle.setProperty("--ty", "0");
74 | 				btnStyle.setProperty("--rx", "0");
75 | 				btnStyle.setProperty("--ry", "0");
76 | 			});
77 | 		});
78 | 	}
79 | });
80 | </script>


--------------------------------------------------------------------------------
/icss-set/src/components/component/心形加载条.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-x" data-title="心形加载条">
  3 | 		<div class="heart-loading">
  4 | 			<ul style="--line-count: 9">
  5 | 				<li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>
  6 | 			</ul>
  7 | 		</div>
  8 | 	</div>
  9 | </template>
 10 | 
 11 | <style lang="scss" scoped>
 12 | .heart-loading {
 13 | 	display: flex;
 14 | 	justify-content: center;
 15 | 	align-items: center;
 16 | 	width: 200px;
 17 | 	height: 200px;
 18 | 	ul {
 19 | 		display: flex;
 20 | 		justify-content: space-between;
 21 | 		width: 150px;
 22 | 		height: 10px;
 23 | 	}
 24 | 	li {
 25 | 		--Θ: calc(var(--line-index) / var(--line-count) * .5turn);
 26 | 		--time: calc((var(--line-index) - 1) * 40ms);
 27 | 		border-radius: 5px;
 28 | 		width: 10px;
 29 | 		height: 10px;
 30 | 		background-color: #3c9;
 31 | 		filter: hue-rotate(var(--Θ));
 32 | 		animation-duration: 1s;
 33 | 		animation-delay: var(--time);
 34 | 		animation-iteration-count: infinite;
 35 | 		&.line-1,
 36 | 		&.line-9 {
 37 | 			animation-name: beat-1;
 38 | 		}
 39 | 		&.line-2,
 40 | 		&.line-8 {
 41 | 			animation-name: beat-2;
 42 | 		}
 43 | 		&.line-3,
 44 | 		&.line-7 {
 45 | 			animation-name: beat-3;
 46 | 		}
 47 | 		&.line-4,
 48 | 		&.line-6 {
 49 | 			animation-name: beat-4;
 50 | 		}
 51 | 		&.line-5 {
 52 | 			animation-name: beat-5;
 53 | 		}
 54 | 	}
 55 | }
 56 | @keyframes beat-1 {
 57 | 	0%,
 58 | 	10%,
 59 | 	90%,
 60 | 	100% {
 61 | 		height: 10px;
 62 | 	}
 63 | 	45%,
 64 | 	55% {
 65 | 		height: 30px;
 66 | 		transform: translate3d(0, -15px, 0);
 67 | 	}
 68 | }
 69 | @keyframes beat-2 {
 70 | 	0%,
 71 | 	10%,
 72 | 	90%,
 73 | 	100% {
 74 | 		height: 10px;
 75 | 	}
 76 | 	45%,
 77 | 	55% {
 78 | 		height: 60px;
 79 | 		transform: translate3d(0, -30px, 0);
 80 | 	}
 81 | }
 82 | @keyframes beat-3 {
 83 | 	0%,
 84 | 	10%,
 85 | 	90%,
 86 | 	100% {
 87 | 		height: 10px;
 88 | 	}
 89 | 	45%,
 90 | 	55% {
 91 | 		height: 80px;
 92 | 		transform: translate3d(0, -40px, 0);
 93 | 	}
 94 | }
 95 | @keyframes beat-4 {
 96 | 	0%,
 97 | 	10%,
 98 | 	90%,
 99 | 	100% {
100 | 		height: 10px;
101 | 	}
102 | 	45%,
103 | 	55% {
104 | 		height: 90px;
105 | 		transform: translate3d(0, -30px, 0);
106 | 	}
107 | }
108 | @keyframes beat-5 {
109 | 	0%,
110 | 	10%,
111 | 	90%,
112 | 	100% {
113 | 		height: 10px;
114 | 	}
115 | 	45%,
116 | 	55% {
117 | 		height: 90px;
118 | 		transform: translate3d(0, -20px, 0);
119 | 	}
120 | }
121 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/figure/使用clip-path描绘各种图形.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip-path描绘各种图形">
 3 | 		<ul class="figure-box" style="--count: 12">
 4 | 			<li class="star" style="--index: 0"></li>
 5 | 			<li class="ellipse" style="--index: 1"></li>
 6 | 			<li class="circle" style="--index: 2"></li>
 7 | 			<li class="triangle" style="--index: 3"></li>
 8 | 			<li class="rhombus" style="--index: 4"></li>
 9 | 			<li class="trapezoid" style="--index: 5"></li>
10 | 			<li class="parallelogram" style="--index: 6"></li>
11 | 			<li class="pentagon" style="--index: 7"></li>
12 | 			<li class="left-arrow" style="--index: 8"></li>
13 | 			<li class="right-arrow" style="--index: 9"></li>
14 | 			<li class="close" style="--index: 10"></li>
15 | 			<li class="message" style="--index: 11"></li>
16 | 		</ul>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .figure-box {
22 | 	display: flex;
23 | 	flex-wrap: wrap;
24 | 	justify-content: center;
25 | 	max-width: 720px;
26 | 	li {
27 | 		--Θ: calc(var(--index) / var(--count) * 1turn);
28 | 		margin: 10px;
29 | 		width: 100px;
30 | 		height: 100px;
31 | 		background-color: #3c9;
32 | 		filter: hue-rotate(var(--Θ));
33 | 		&.star {
34 | 			clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
35 | 		}
36 | 		&.ellipse {
37 | 			clip-path: ellipse(40% 50% at 50% 50%);
38 | 		}
39 | 		&.circle {
40 | 			clip-path: circle(50% at 50% 50%);
41 | 		}
42 | 		&.triangle {
43 | 			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
44 | 		}
45 | 		&.rhombus {
46 | 			clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
47 | 		}
48 | 		&.trapezoid {
49 | 			clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
50 | 		}
51 | 		&.parallelogram {
52 | 			clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
53 | 		}
54 | 		&.pentagon {
55 | 			clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
56 | 		}
57 | 		&.left-arrow {
58 | 			clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
59 | 		}
60 | 		&.right-arrow {
61 | 			clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
62 | 		}
63 | 		&.close {
64 | 			clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
65 | 		}
66 | 		&.message {
67 | 			clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
68 | 		}
69 | 	}
70 | }
71 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/心形加载条.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-x" data-title="心形加载条">
  3 | 		<div class="heart-loading">
  4 | 			<ul style="--line-count: 9;">
  5 | 				<li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v};`"></li>
  6 | 			</ul>
  7 | 		</div>
  8 | 	</div>
  9 | </template>
 10 | 
 11 | <style lang="scss" scoped>
 12 | .heart-loading {
 13 | 	display: flex;
 14 | 	justify-content: center;
 15 | 	align-items: center;
 16 | 	width: 200px;
 17 | 	height: 200px;
 18 | 	ul {
 19 | 		display: flex;
 20 | 		justify-content: space-between;
 21 | 		width: 150px;
 22 | 		height: 10px;
 23 | 	}
 24 | 	li {
 25 | 		--angle: calc(var(--line-index) / var(--line-count) * .5turn);
 26 | 		--time: calc((var(--line-index) - 1) * 40ms);
 27 | 		border-radius: 5px;
 28 | 		width: 10px;
 29 | 		height: 10px;
 30 | 		background-color: #3c9;
 31 | 		filter: hue-rotate(var(--angle));
 32 | 		animation-duration: 1s;
 33 | 		animation-delay: var(--time);
 34 | 		animation-iteration-count: infinite;
 35 | 		&.line-1,
 36 | 		&.line-9 {
 37 | 			animation-name: beat-1;
 38 | 		}
 39 | 		&.line-2,
 40 | 		&.line-8 {
 41 | 			animation-name: beat-2;
 42 | 		}
 43 | 		&.line-3,
 44 | 		&.line-7 {
 45 | 			animation-name: beat-3;
 46 | 		}
 47 | 		&.line-4,
 48 | 		&.line-6 {
 49 | 			animation-name: beat-4;
 50 | 		}
 51 | 		&.line-5 {
 52 | 			animation-name: beat-5;
 53 | 		}
 54 | 	}
 55 | }
 56 | @keyframes beat-1 {
 57 | 	0%,
 58 | 	10%,
 59 | 	90%,
 60 | 	100% {
 61 | 		height: 10px;
 62 | 	}
 63 | 	45%,
 64 | 	55% {
 65 | 		height: 30px;
 66 | 		transform: translate3d(0, -15px, 0);
 67 | 	}
 68 | }
 69 | @keyframes beat-2 {
 70 | 	0%,
 71 | 	10%,
 72 | 	90%,
 73 | 	100% {
 74 | 		height: 10px;
 75 | 	}
 76 | 	45%,
 77 | 	55% {
 78 | 		height: 60px;
 79 | 		transform: translate3d(0, -30px, 0);
 80 | 	}
 81 | }
 82 | @keyframes beat-3 {
 83 | 	0%,
 84 | 	10%,
 85 | 	90%,
 86 | 	100% {
 87 | 		height: 10px;
 88 | 	}
 89 | 	45%,
 90 | 	55% {
 91 | 		height: 80px;
 92 | 		transform: translate3d(0, -40px, 0);
 93 | 	}
 94 | }
 95 | @keyframes beat-4 {
 96 | 	0%,
 97 | 	10%,
 98 | 	90%,
 99 | 	100% {
100 | 		height: 10px;
101 | 	}
102 | 	45%,
103 | 	55% {
104 | 		height: 90px;
105 | 		transform: translate3d(0, -30px, 0);
106 | 	}
107 | }
108 | @keyframes beat-5 {
109 | 	0%,
110 | 	10%,
111 | 	90%,
112 | 	100% {
113 | 		height: 10px;
114 | 	}
115 | 	45%,
116 | 	55% {
117 | 		height: 90px;
118 | 		transform: translate3d(0, -20px, 0);
119 | 	}
120 | }
121 | </style>


--------------------------------------------------------------------------------
/icss/src/components/figure/使用clip-path描绘各种图形.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="使用clip-path描绘各种图形">
 3 | 		<ul class="figure-box" style="--count: 12;">
 4 | 			<li class="star" style="--index: 0;"></li>
 5 | 			<li class="ellipse" style="--index: 1;"></li>
 6 | 			<li class="circle" style="--index: 2;"></li>
 7 | 			<li class="triangle" style="--index: 3;"></li>
 8 | 			<li class="rhombus" style="--index: 4;"></li>
 9 | 			<li class="trapezoid" style="--index: 5;"></li>
10 | 			<li class="parallelogram" style="--index: 6;"></li>
11 | 			<li class="pentagon" style="--index: 7;"></li>
12 | 			<li class="left-arrow" style="--index: 8;"></li>
13 | 			<li class="right-arrow" style="--index: 9;"></li>
14 | 			<li class="close" style="--index: 10;"></li>
15 | 			<li class="message" style="--index: 11;"></li>
16 | 		</ul>
17 | 	</div>
18 | </template>
19 | 
20 | <style lang="scss" scoped>
21 | .figure-box {
22 | 	display: flex;
23 | 	flex-wrap: wrap;
24 | 	justify-content: center;
25 | 	max-width: 720px;
26 | 	li {
27 | 		--angle: calc(var(--index) / var(--count) * 1turn);
28 | 		margin: 10px;
29 | 		width: 100px;
30 | 		height: 100px;
31 | 		background-color: #3c9;
32 | 		filter: hue-rotate(var(--angle));
33 | 		&.star {
34 | 			clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
35 | 		}
36 | 		&.ellipse {
37 | 			clip-path: ellipse(40% 50% at 50% 50%);
38 | 		}
39 | 		&.circle {
40 | 			clip-path: circle(50% at 50% 50%);
41 | 		}
42 | 		&.triangle {
43 | 			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
44 | 		}
45 | 		&.rhombus {
46 | 			clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
47 | 		}
48 | 		&.trapezoid {
49 | 			clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
50 | 		}
51 | 		&.parallelogram {
52 | 			clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
53 | 		}
54 | 		&.pentagon {
55 | 			clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
56 | 		}
57 | 		&.left-arrow {
58 | 			clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
59 | 		}
60 | 		&.right-arrow {
61 | 			clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
62 | 		}
63 | 		&.close {
64 | 			clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
65 | 		}
66 | 		&.message {
67 | 			clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
68 | 		}
69 | 	}
70 | }
71 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/滚动渐变背景.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="滚动渐变背景">
 3 | 		<div class="dynamic-scroll-bg">
 4 | 			<header></header>
 5 | 			<main>
 6 | 				<div>
 7 | 					<p>网易公司（NASDAQ: NTES），1997年由创始人兼CEO丁磊先生在广州创办，2000年在美国NASDAQ股票交易所挂牌上市，是中国领先的互联网技术公司。在开发互联网应用、服务及其它技术方面，始终保持中国业界领先地位。本着对中国互联网发展强烈的使命感，缔造美好生活的愿景，网易利用最先进的互联网技术，加强人与人之间信息的交流和共享。</p>
 8 | 					<p>网易公司推出了门户网站、在线游戏、电子邮箱、在线教育、电子商务、在线音乐、网易bobo等多种服务。网易在广州天河智慧城的总部项目计划2019年1月建成，网易游戏总部将入驻。2016年，游戏业务营业收入在网易总营收中占比73.3%。2011年，网易杭州研究院启用。网易传媒等业务在北京。网易在杭州上线了网易考拉海购、网易云音乐等项目。</p>
 9 | 					<p>网易2019全年财报显示，网易公司2019年全年净收入为592.4亿元；基于非美国通用会计准则，归属于网易公司股东的持续经营净利润为156.6亿元。</p>
10 | 					<p>2019年，网易深入推进战略聚焦，坚守内容消费领域，积极布局游戏、教育、音乐、电商等核心赛道，取得重大突破。在保持稳健增长的同时，网易有道、创新及其他等业务板块爆发强大潜力，为未来的长期发展提供源源不断的动能。</p>
11 | 				</div>
12 | 			</main>
13 | 		</div>
14 | 	</div>
15 | </template>
16 | 
17 | <style lang="scss" scoped>
18 | .dynamic-scroll-bg {
19 | 	--scrolly: 250;
20 | 	overflow: hidden;
21 | 	position: relative;
22 | 	border: 1px solid #66f;
23 | 	width: 400px;
24 | 	height: 400px;
25 | 	header {
26 | 		--angle: calc(var(--scrolly) * 2deg);
27 | 		--size: calc(1500px - var(--scrolly) * 2px);
28 | 		--x: calc(var(--size) / 2 * -1);
29 | 		--y: calc(var(--scrolly) * -1px);
30 | 		--ratio: calc(50% - var(--scrolly) / 20 * 1%);
31 | 		position: absolute;
32 | 		left: 50%;
33 | 		bottom: 100%;
34 | 		margin: 0 0 var(--y) var(--x);
35 | 		border-radius: var(--ratio);
36 | 		width: var(--size);
37 | 		height: var(--size);
38 | 		background-color: #3c9;
39 | 		filter: hue-rotate(var(--angle));
40 | 		animation: rotate 5s linear infinite;
41 | 	}
42 | 	main {
43 | 		overflow: auto;
44 | 		position: relative;
45 | 		width: 100%;
46 | 		height: 100%;
47 | 		div {
48 | 			padding: 300px 20px 50px;
49 | 		}
50 | 		p {
51 | 			line-height: 1.2;
52 | 			text-align: justify;
53 | 			text-indent: 2em;
54 | 		}
55 | 	}
56 | }
57 | @keyframes rotate {
58 | 	to {
59 | 		transform: rotate(1turn);
60 | 	}
61 | }
62 | </style>
63 | 
64 | <script lang="ts">
65 | import { defineComponent, onMounted } from "vue";
66 | 
67 | export default defineComponent({
68 | 	setup() {
69 | 		onMounted(() => {
70 | 			const bg = document.getElementsByClassName("dynamic-scroll-bg")[0];
71 | 			const content = bg.getElementsByTagName("main")[0];
72 | 			content.addEventListener("scroll", e => {
73 | 				const top = e.target.scrollTop;
74 | 				if (top <= 250) {
75 | 					bg.style.setProperty("--scrolly", 250 - top);
76 | 				} else {
77 | 					bg.style.setProperty("--scrolly", 0);
78 | 				}
79 | 			});
80 | 		});
81 | 	}
82 | });
83 | </script>


--------------------------------------------------------------------------------
/icss-set/src/components/component/标签导航.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-x" data-title="标签导航">
  3 | 		<div class="tab-navbar">
  4 | 			<input id="tab1" type="radio" name="tabs" hidden checked>
  5 | 			<input id="tab2" type="radio" name="tabs" hidden>
  6 | 			<input id="tab3" type="radio" name="tabs" hidden>
  7 | 			<input id="tab4" type="radio" name="tabs" hidden>
  8 | 			<nav>
  9 | 				<label for="tab1">标题1</label>
 10 | 				<label for="tab2">标题2</label>
 11 | 				<label for="tab3">标题3</label>
 12 | 				<label for="tab4">标题4</label>
 13 | 			</nav>
 14 | 			<main>
 15 | 				<ul>
 16 | 					<li>内容1</li>
 17 | 					<li>内容2</li>
 18 | 					<li>内容3</li>
 19 | 					<li>内容4</li>
 20 | 				</ul>
 21 | 			</main>
 22 | 		</div>
 23 | 	</div>
 24 | </template>
 25 | 
 26 | <style lang="scss" scoped>
 27 | .active {
 28 | 	background-color: #3c9;
 29 | 	color: #fff;
 30 | }
 31 | .tab-navbar {
 32 | 	display: flex;
 33 | 	overflow: hidden;
 34 | 	flex-direction: column-reverse;
 35 | 	border-radius: 10px;
 36 | 	width: 300px;
 37 | 	height: 400px;
 38 | 	input {
 39 | 		&:nth-child(1):checked {
 40 | 			& ~ nav label:nth-child(1) {
 41 | 				@extend .active;
 42 | 			}
 43 | 			& ~ main ul {
 44 | 				background-color: #f66;
 45 | 				transform: translate3d(0, 0, 0);
 46 | 			}
 47 | 		}
 48 | 		&:nth-child(2):checked {
 49 | 			& ~ nav label:nth-child(2) {
 50 | 				@extend .active;
 51 | 			}
 52 | 			& ~ main ul {
 53 | 				background-color: #66f;
 54 | 				transform: translate3d(-25%, 0, 0);
 55 | 			}
 56 | 		}
 57 | 		&:nth-child(3):checked {
 58 | 			& ~ nav label:nth-child(3) {
 59 | 				@extend .active;
 60 | 			}
 61 | 			& ~ main ul {
 62 | 				background-color: #f90;
 63 | 				transform: translate3d(-50%, 0, 0);
 64 | 			}
 65 | 		}
 66 | 		&:nth-child(4):checked {
 67 | 			& ~ nav label:nth-child(4) {
 68 | 				@extend .active;
 69 | 			}
 70 | 			& ~ main ul {
 71 | 				background-color: #09f;
 72 | 				transform: translate3d(-75%, 0, 0);
 73 | 			}
 74 | 		}
 75 | 	}
 76 | 	nav {
 77 | 		display: flex;
 78 | 		height: 40px;
 79 | 		background-color: #f0f0f0;
 80 | 		line-height: 40px;
 81 | 		text-align: center;
 82 | 		label {
 83 | 			flex: 1;
 84 | 			cursor: pointer;
 85 | 			transition: all 300ms;
 86 | 		}
 87 | 	}
 88 | 	main {
 89 | 		flex: 1;
 90 | 		ul {
 91 | 			display: flex;
 92 | 			flex-wrap: nowrap;
 93 | 			width: 400%;
 94 | 			height: 100%;
 95 | 			transition: all 300ms;
 96 | 		}
 97 | 		li {
 98 | 			display: flex;
 99 | 			justify-content: center;
100 | 			align-items: center;
101 | 			flex: 1;
102 | 			font-weight: bold;
103 | 			font-size: 20px;
104 | 			color: #fff;
105 | 		}
106 | 	}
107 | }
108 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/标签导航.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-x" data-title="标签导航">
  3 | 		<div class="tab-navbar">
  4 | 			<input id="tab1" type="radio" name="tabs" hidden checked>
  5 | 			<input id="tab2" type="radio" name="tabs" hidden>
  6 | 			<input id="tab3" type="radio" name="tabs" hidden>
  7 | 			<input id="tab4" type="radio" name="tabs" hidden>
  8 | 			<nav>
  9 | 				<label for="tab1">标题1</label>
 10 | 				<label for="tab2">标题2</label>
 11 | 				<label for="tab3">标题3</label>
 12 | 				<label for="tab4">标题4</label>
 13 | 			</nav>
 14 | 			<main>
 15 | 				<ul>
 16 | 					<li>内容1</li>
 17 | 					<li>内容2</li>
 18 | 					<li>内容3</li>
 19 | 					<li>内容4</li>
 20 | 				</ul>
 21 | 			</main>
 22 | 		</div>
 23 | 	</div>
 24 | </template>
 25 | 
 26 | <style lang="scss" scoped>
 27 | .active {
 28 | 	background-color: #3c9;
 29 | 	color: #fff;
 30 | }
 31 | .tab-navbar {
 32 | 	display: flex;
 33 | 	overflow: hidden;
 34 | 	flex-direction: column-reverse;
 35 | 	border-radius: 10px;
 36 | 	width: 300px;
 37 | 	height: 400px;
 38 | 	input {
 39 | 		&:nth-child(1):checked {
 40 | 			& ~ nav label:nth-child(1) {
 41 | 				@extend .active;
 42 | 			}
 43 | 			& ~ main ul {
 44 | 				background-color: #f66;
 45 | 				transform: translate3d(0, 0, 0);
 46 | 			}
 47 | 		}
 48 | 		&:nth-child(2):checked {
 49 | 			& ~ nav label:nth-child(2) {
 50 | 				@extend .active;
 51 | 			}
 52 | 			& ~ main ul {
 53 | 				background-color: #66f;
 54 | 				transform: translate3d(-25%, 0, 0);
 55 | 			}
 56 | 		}
 57 | 		&:nth-child(3):checked {
 58 | 			& ~ nav label:nth-child(3) {
 59 | 				@extend .active;
 60 | 			}
 61 | 			& ~ main ul {
 62 | 				background-color: #f90;
 63 | 				transform: translate3d(-50%, 0, 0);
 64 | 			}
 65 | 		}
 66 | 		&:nth-child(4):checked {
 67 | 			& ~ nav label:nth-child(4) {
 68 | 				@extend .active;
 69 | 			}
 70 | 			& ~ main ul {
 71 | 				background-color: #09f;
 72 | 				transform: translate3d(-75%, 0, 0);
 73 | 			}
 74 | 		}
 75 | 	}
 76 | 	nav {
 77 | 		display: flex;
 78 | 		height: 40px;
 79 | 		background-color: #f0f0f0;
 80 | 		line-height: 40px;
 81 | 		text-align: center;
 82 | 		label {
 83 | 			flex: 1;
 84 | 			cursor: pointer;
 85 | 			transition: all 300ms;
 86 | 		}
 87 | 	}
 88 | 	main {
 89 | 		flex: 1;
 90 | 		ul {
 91 | 			display: flex;
 92 | 			flex-wrap: nowrap;
 93 | 			width: 400%;
 94 | 			height: 100%;
 95 | 			transition: all 300ms;
 96 | 		}
 97 | 		li {
 98 | 			display: flex;
 99 | 			justify-content: center;
100 | 			align-items: center;
101 | 			flex: 1;
102 | 			font-weight: bold;
103 | 			font-size: 20px;
104 | 			color: #fff;
105 | 		}
106 | 	}
107 | }
108 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/behavior/使用+或~选择指定元素.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-y" data-title="使用+或~选择指定元素">
  3 | 		<div class="specify-selector">
  4 | 			<ul class="list">
  5 | 				<li>同胞元素</li>
  6 | 				<li class="next">当前元素</li>
  7 | 				<li>同胞元素</li>
  8 | 				<li>同胞元素</li>
  9 | 				<li>同胞元素</li>
 10 | 			</ul>
 11 | 			<ul class="list">
 12 | 				<li>同胞元素</li>
 13 | 				<li class="next-all">当前元素</li>
 14 | 				<li>同胞元素</li>
 15 | 				<li>同胞元素</li>
 16 | 				<li>同胞元素</li>
 17 | 			</ul>
 18 | 			<ul class="list">
 19 | 				<li>同胞元素</li>
 20 | 				<li class="next-filter">当前元素</li>
 21 | 				<li>同胞元素</li>
 22 | 				<li class="filter">同胞元素</li>
 23 | 				<li>同胞元素</li>
 24 | 			</ul>
 25 | 		</div>
 26 | 		<div class="specify-selector">
 27 | 			<div class="button">
 28 | 				<input id="btn1" type="radio" name="btns" hidden>
 29 | 				<label for="btn1">点击我切换样式</label>
 30 | 			</div>
 31 | 			<div class="button">
 32 | 				<input id="btn2" type="radio" name="btns" hidden>
 33 | 				<label for="btn2">点击我切换样式</label>
 34 | 			</div>
 35 | 			<div class="button">
 36 | 				<input id="btn3" type="radio" name="btns" hidden>
 37 | 				<label for="btn3">点击我切换样式</label>
 38 | 			</div>
 39 | 		</div>
 40 | 	</div>
 41 | </template>
 42 | 
 43 | <style lang="scss" scoped>
 44 | .specify-selector {
 45 | 	display: flex;
 46 | 	& + .specify-selector {
 47 | 		margin-top: 20px;
 48 | 	}
 49 | 	.list {
 50 | 		border: 1px solid #f66;
 51 | 		width: 200px;
 52 | 		line-height: 2;
 53 | 		font-weight: bold;
 54 | 		font-size: 20px;
 55 | 		color: #f66;
 56 | 		& + .list {
 57 | 			margin-left: 20px;
 58 | 		}
 59 | 		li {
 60 | 			padding: 0 10px;
 61 | 		}
 62 | 		.next {
 63 | 			background-color: #66f;
 64 | 			color: #fff;
 65 | 			& + li {
 66 | 				background-color: #f90;
 67 | 				color: #fff;
 68 | 			}
 69 | 		}
 70 | 		.next-all {
 71 | 			background-color: #66f;
 72 | 			color: #fff;
 73 | 			& ~ li {
 74 | 				background-color: #09f;
 75 | 				color: #fff;
 76 | 			}
 77 | 		}
 78 | 		.next-filter {
 79 | 			background-color: #66f;
 80 | 			color: #fff;
 81 | 			& ~ .filter {
 82 | 				background-color: #09f;
 83 | 				color: #fff;
 84 | 			}
 85 | 		}
 86 | 	}
 87 | 	.button {
 88 | 		& + .button {
 89 | 			margin-left: 20px;
 90 | 		}
 91 | 		label {
 92 | 			display: block;
 93 | 			padding: 0 10px;
 94 | 			height: 40px;
 95 | 			background-color: #3c9;
 96 | 			cursor: pointer;
 97 | 			line-height: 40px;
 98 | 			font-size: 16px;
 99 | 			color: #fff;
100 | 			transition: all 300ms;
101 | 		}
102 | 		input:checked + label {
103 | 			padding: 0 20px;
104 | 			border-radius: 20px;
105 | 			background-color: #f66;
106 | 		}
107 | 	}
108 | }
109 | </style>


--------------------------------------------------------------------------------
/icss/src/components/behavior/使用+或~选择指定元素.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce flex-ct-y" data-title="使用+或~选择指定元素">
  3 | 		<div class="specify-selector">
  4 | 			<ul class="list">
  5 | 				<li>同胞元素</li>
  6 | 				<li class="next">当前元素</li>
  7 | 				<li>同胞元素</li>
  8 | 				<li>同胞元素</li>
  9 | 				<li>同胞元素</li>
 10 | 			</ul>
 11 | 			<ul class="list">
 12 | 				<li>同胞元素</li>
 13 | 				<li class="next-all">当前元素</li>
 14 | 				<li>同胞元素</li>
 15 | 				<li>同胞元素</li>
 16 | 				<li>同胞元素</li>
 17 | 			</ul>
 18 | 			<ul class="list">
 19 | 				<li>同胞元素</li>
 20 | 				<li class="next-filter">当前元素</li>
 21 | 				<li>同胞元素</li>
 22 | 				<li class="filter">同胞元素</li>
 23 | 				<li>同胞元素</li>
 24 | 			</ul>
 25 | 		</div>
 26 | 		<div class="specify-selector">
 27 | 			<div class="button">
 28 | 				<input id="btn1" type="radio" name="btns" hidden>
 29 | 				<label for="btn1">点击我切换样式</label>
 30 | 			</div>
 31 | 			<div class="button">
 32 | 				<input id="btn2" type="radio" name="btns" hidden>
 33 | 				<label for="btn2">点击我切换样式</label>
 34 | 			</div>
 35 | 			<div class="button">
 36 | 				<input id="btn3" type="radio" name="btns" hidden>
 37 | 				<label for="btn3">点击我切换样式</label>
 38 | 			</div>
 39 | 		</div>
 40 | 	</div>
 41 | </template>
 42 | 
 43 | <style lang="scss" scoped>
 44 | .specify-selector {
 45 | 	display: flex;
 46 | 	& + .specify-selector {
 47 | 		margin-top: 20px;
 48 | 	}
 49 | 	.list {
 50 | 		border: 1px solid #f66;
 51 | 		width: 200px;
 52 | 		line-height: 2;
 53 | 		font-weight: bold;
 54 | 		font-size: 20px;
 55 | 		color: #f66;
 56 | 		& + .list {
 57 | 			margin-left: 20px;
 58 | 		}
 59 | 		li {
 60 | 			padding: 0 10px;
 61 | 		}
 62 | 		.next {
 63 | 			background-color: #66f;
 64 | 			color: #fff;
 65 | 			& + li {
 66 | 				background-color: #f90;
 67 | 				color: #fff;
 68 | 			}
 69 | 		}
 70 | 		.next-all {
 71 | 			background-color: #66f;
 72 | 			color: #fff;
 73 | 			& ~ li {
 74 | 				background-color: #09f;
 75 | 				color: #fff;
 76 | 			}
 77 | 		}
 78 | 		.next-filter {
 79 | 			background-color: #66f;
 80 | 			color: #fff;
 81 | 			& ~ .filter {
 82 | 				background-color: #09f;
 83 | 				color: #fff;
 84 | 			}
 85 | 		}
 86 | 	}
 87 | 	.button {
 88 | 		& + .button {
 89 | 			margin-left: 20px;
 90 | 		}
 91 | 		label {
 92 | 			display: block;
 93 | 			padding: 0 10px;
 94 | 			height: 40px;
 95 | 			background-color: #3c9;
 96 | 			cursor: pointer;
 97 | 			line-height: 40px;
 98 | 			font-size: 16px;
 99 | 			color: #fff;
100 | 			transition: all 300ms;
101 | 		}
102 | 		input:checked + label {
103 | 			padding: 0 20px;
104 | 			border-radius: 20px;
105 | 			background-color: #f66;
106 | 		}
107 | 	}
108 | }
109 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/气泡背景墙.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce" data-title="气泡背景墙">
  3 | 		<ul class="bubble-bgwall">
  4 | 			<li v-for="v in 10" :key="v">Love</li>
  5 | 		</ul>
  6 | 	</div>
  7 | </template>
  8 | 
  9 | <style lang="scss" scoped>
 10 | .bruce {
 11 | 	padding: 0;
 12 | 	height: 400px;
 13 | 	background-image: linear-gradient(270deg, #8146b4, #6990f6);
 14 | }
 15 | .bubble-bgwall {
 16 | 	overflow: hidden;
 17 | 	position: relative;
 18 | 	margin: 0 auto;
 19 | 	width: 100%;
 20 | 	max-width: 1200px;
 21 | 	height: 100%;
 22 | 	li {
 23 | 		display: flex;
 24 | 		position: absolute;
 25 | 		bottom: -200px;
 26 | 		justify-content: center;
 27 | 		align-items: center;
 28 | 		border-radius: 10px;
 29 | 		width: 50px;
 30 | 		height: 50px;
 31 | 		background-color: rgba(#fff, .15);
 32 | 		color: #ccc;
 33 | 		animation: bubble 15s infinite;
 34 | 		&:nth-child(1) {
 35 | 			left: 10%;
 36 | 		}
 37 | 		&:nth-child(2) {
 38 | 			left: 20%;
 39 | 			width: 90px;
 40 | 			height: 90px;
 41 | 			animation-duration: 7s;
 42 | 			animation-delay: 2s;
 43 | 		}
 44 | 		&:nth-child(3) {
 45 | 			left: 25%;
 46 | 			animation-delay: 4s;
 47 | 		}
 48 | 		&:nth-child(4) {
 49 | 			left: 40%;
 50 | 			width: 60px;
 51 | 			height: 60px;
 52 | 			background-color: rgba(#fff, .3);
 53 | 			animation-duration: 8s;
 54 | 		}
 55 | 		&:nth-child(5) {
 56 | 			left: 70%;
 57 | 		}
 58 | 		&:nth-child(6) {
 59 | 			left: 80%;
 60 | 			width: 120px;
 61 | 			height: 120px;
 62 | 			background-color: rgba(#fff, .2);
 63 | 			animation-delay: 3s;
 64 | 		}
 65 | 		&:nth-child(7) {
 66 | 			left: 32%;
 67 | 			width: 160px;
 68 | 			height: 160px;
 69 | 			animation-delay: 2s;
 70 | 		}
 71 | 		&:nth-child(8) {
 72 | 			left: 55%;
 73 | 			width: 40px;
 74 | 			height: 40px;
 75 | 			font-size: 12px;
 76 | 			animation-duration: 15s;
 77 | 			animation-delay: 4s;
 78 | 		}
 79 | 		&:nth-child(9) {
 80 | 			left: 25%;
 81 | 			width: 40px;
 82 | 			height: 40px;
 83 | 			background-color: rgba(#fff, .3);
 84 | 			font-size: 12px;
 85 | 			animation-duration: 12s;
 86 | 			animation-delay: 2s;
 87 | 		}
 88 | 		&:nth-child(10) {
 89 | 			left: 85%;
 90 | 			width: 160px;
 91 | 			height: 160px;
 92 | 			animation-delay: 5s;
 93 | 		}
 94 | 	}
 95 | }
 96 | @keyframes bubble {
 97 | 	0% {
 98 | 		opacity: .5;
 99 | 		transform: translateY(0) rotate(45deg);
100 | 	}
101 | 	25% {
102 | 		opacity: .75;
103 | 		transform: translateY(-400px) rotate(90deg);
104 | 	}
105 | 	50% {
106 | 		opacity: 1;
107 | 		transform: translateY(-600px) rotate(135deg);
108 | 	}
109 | 	100% {
110 | 		opacity: 0;
111 | 		transform: translateY(-1000px) rotate(180deg);
112 | 	}
113 | }
114 | </style>


--------------------------------------------------------------------------------
/icss-set/src/components/component/气泡背景墙.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="bruce" data-title="气泡背景墙">
  3 | 		<ul class="bubble-bgwall">
  4 | 			<li v-for="v in 10" :key="v">Love</li>
  5 | 		</ul>
  6 | 	</div>
  7 | </template>
  8 | 
  9 | <style lang="scss" scoped>
 10 | .bruce {
 11 | 	padding: 0;
 12 | 	height: 400px;
 13 | 	background-image: linear-gradient(270deg, #8146b4, #6990f6);
 14 | }
 15 | .bubble-bgwall {
 16 | 	overflow: hidden;
 17 | 	position: relative;
 18 | 	margin: 0 auto;
 19 | 	width: 100%;
 20 | 	max-width: 1200px;
 21 | 	height: 100%;
 22 | 	li {
 23 | 		display: flex;
 24 | 		position: absolute;
 25 | 		bottom: -200px;
 26 | 		justify-content: center;
 27 | 		align-items: center;
 28 | 		border-radius: 10px;
 29 | 		width: 50px;
 30 | 		height: 50px;
 31 | 		background-color: rgba(#fff, .15);
 32 | 		color: #ccc;
 33 | 		animation: bubble 15s infinite;
 34 | 		&:nth-child(1) {
 35 | 			left: 10%;
 36 | 		}
 37 | 		&:nth-child(2) {
 38 | 			left: 20%;
 39 | 			width: 90px;
 40 | 			height: 90px;
 41 | 			animation-duration: 7s;
 42 | 			animation-delay: 2s;
 43 | 		}
 44 | 		&:nth-child(3) {
 45 | 			left: 25%;
 46 | 			animation-delay: 4s;
 47 | 		}
 48 | 		&:nth-child(4) {
 49 | 			left: 40%;
 50 | 			width: 60px;
 51 | 			height: 60px;
 52 | 			background-color: rgba(#fff, .3);
 53 | 			animation-duration: 8s;
 54 | 		}
 55 | 		&:nth-child(5) {
 56 | 			left: 70%;
 57 | 		}
 58 | 		&:nth-child(6) {
 59 | 			left: 80%;
 60 | 			width: 120px;
 61 | 			height: 120px;
 62 | 			background-color: rgba(#fff, .2);
 63 | 			animation-delay: 3s;
 64 | 		}
 65 | 		&:nth-child(7) {
 66 | 			left: 32%;
 67 | 			width: 160px;
 68 | 			height: 160px;
 69 | 			animation-delay: 2s;
 70 | 		}
 71 | 		&:nth-child(8) {
 72 | 			left: 55%;
 73 | 			width: 40px;
 74 | 			height: 40px;
 75 | 			font-size: 12px;
 76 | 			animation-duration: 15s;
 77 | 			animation-delay: 4s;
 78 | 		}
 79 | 		&:nth-child(9) {
 80 | 			left: 25%;
 81 | 			width: 40px;
 82 | 			height: 40px;
 83 | 			background-color: rgba(#fff, .3);
 84 | 			font-size: 12px;
 85 | 			animation-duration: 12s;
 86 | 			animation-delay: 2s;
 87 | 		}
 88 | 		&:nth-child(10) {
 89 | 			left: 85%;
 90 | 			width: 160px;
 91 | 			height: 160px;
 92 | 			animation-delay: 5s;
 93 | 		}
 94 | 	}
 95 | }
 96 | @keyframes bubble {
 97 | 	0% {
 98 | 		opacity: .5;
 99 | 		transform: translateY(0) rotate(45deg);
100 | 	}
101 | 	25% {
102 | 		opacity: .75;
103 | 		transform: translateY(-400px) rotate(90deg);
104 | 	}
105 | 	50% {
106 | 		opacity: 1;
107 | 		transform: translateY(-600px) rotate(135deg);
108 | 	}
109 | 	100% {
110 | 		opacity: 0;
111 | 		transform: translateY(-1000px) rotate(180deg);
112 | 	}
113 | }
114 | </style>


--------------------------------------------------------------------------------
/icss/src/components/component/滚动指示器.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="bruce flex-ct-x" data-title="滚动指示器">
 3 | 		<div class="scroll-indicator">
 4 | 			<div>
 5 | 				<article>
 6 | 					<h1>2019中国互联网企业100强榜单</h1>
 7 | 					<p>8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。</p>
 8 | 					<p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p>
 9 | 					<p>一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。</p>
10 | 					<p>二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。</p>
11 | 					<p>三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。</p>
12 | 					<p>四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。</p>
13 | 					<p>五是“独角兽” 企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。</p>
14 | 					<p>六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。</p>
15 | 				</article>
16 | 			</div>
17 | 		</div>
18 | 	</div>
19 | </template>
20 | 
21 | <style lang="scss" scoped>
22 | .scroll-indicator {
23 | 	overflow: hidden;
24 | 	position: relative;
25 | 	border: 1px solid #66f;
26 | 	width: 500px;
27 | 	height: 300px;
28 | 	&::after {
29 | 		position: absolute;
30 | 		left: 0;
31 | 		right: 5px;
32 | 		top: 2px;
33 | 		bottom: 0;
34 | 		background-color: #fff;
35 | 		content: "";
36 | 	}
37 | 	div {
38 | 		overflow: auto;
39 | 		height: 100%;
40 | 		&::-webkit-scrollbar {
41 | 			width: 5px;
42 | 		}
43 | 		&::-webkit-scrollbar-track {
44 | 			background-color: #f0f0f0;
45 | 		}
46 | 		&::-webkit-scrollbar-thumb {
47 | 			border-radius: 2px;
48 | 			background-color: #66f;
49 | 		}
50 | 	}
51 | 	article {
52 | 		padding: 0 20px;
53 | 		background: linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;
54 | 		background-size: 100% calc(100% - 298px + 5px);
55 | 		> * {
56 | 			position: relative;
57 | 			z-index: 9;
58 | 		}
59 | 	}
60 | 	h1 {
61 | 		line-height: 40px;
62 | 		text-align: center;
63 | 		font-size: 20px;
64 | 	}
65 | 	p {
66 | 		margin-top: 20px;
67 | 		line-height: 20px;
68 | 		text-indent: 2em;
69 | 	}
70 | }
71 | </style>


--------------------------------------------------------------------------------