# GridAndNeumorphism

**Repository Path**: xf-sxrsjz/grid-and-neumorphism

## Basic Information

- **Project Name**: GridAndNeumorphism
- **Description**: grid布局，点击可切换新拟物风格，码云静态发布；
* js库
1 anime.js 利用js控制动画的库 npm i animejs -D
2 glide.js 轮播组件的库 npm i glidejs -D
3 isotope.metafizzy.co 成功案例的组件库 对案例进行排列筛选 npm install isotope-layout -D
4 scrollreveal.js 当页面滑动到某一个元素时，通过动画展示元素 npm install scrollreveal -D 
5 smooth-scroll.js 点击到黄链接流畅滑动页面元素 npm install smooth-scroll -D
* css库
fontawesome  图标字体库
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-17
- **Last Updated**: 2023-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# grid-and-neumorphism

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).



* js库
1 anime.js 利用js控制动画的库 npm i animejs -D
2 glide.js 轮播组件的库 npm install @glidejs/glide
3 isotope.metafizzy.co 成功案例的组件库 对案例进行排列筛选 1引用js文件 2
4 scrollreveal.js 当页面滑动到某一个元素时，通过动画展示元素 npm install scrollreveal -D 
5 smooth-scroll.js 点击到黄链接流畅滑动页面元素 npm install smooth-scroll -D

* css库
fontawesome  图标字体库
    npm install --save @fortawesome/fontawesome-svg-core Font Awesome的核心
    npm install --save @fortawesome/vue-fontawesome Vue环境中使用需要的Vue组件
    npm install --save @fortawesome/free-solid-svg-icons solid图标 （有solid，regular，light和brands）
    npm install --save @fortawesome/free-brands-svg-icons 商标图标依赖
mainjs中引用：
    import { library } from '@fortawesome/fontawesome-svg-core';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
    import { faCoffee } from '@fortawesome/free-solid-svg-icons'//每使用一个图标都要引用一下
    Vue.component('font-awesome-icon', FontAwesomeIcon);
    library.add(faCoffee)
使用：
    <font-awesome-icon icon="coffee" class="fa-2x"/>

* 选择器
  ：root选择器：选择文档的根元素，在HTML中，根元素永远是html
  ：not() 选择某个元素之外的所有元素
  ：empty 选择一个不包含任何子元素或内容的元素
  ：target 选取页面中的某个target元素
  :root {
    --primary-color: #ff434f;
  }
  .logo {
    color: var(--text-color-light-gray);
  }

  max-width: unset; 还原
  object-fit: cover; /**等比例缩放 */

  浏览器默认字体14px

  css3动画 简洁放大效果
  act{
    transition:0.4s;
  }
  act:hover {
    transform:translateY(-10px) scale(1.04);
  }