# animationCSS

**Repository Path**: yhuiye/animationCSS

## Basic Information

- **Project Name**: animationCSS
- **Description**: 基于VUE框架整理了学习的css动画的代码，原作者alphardex“我写CSS的常用套路(附demo的效果实现与源码）”
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-03-06
- **Last Updated**: 2022-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# animationCSS

#### 介绍
基于VUE框架整理了学习的css动画的代码，原作者alphardex 在知乎发表的文章“我写CSS的常用套路(附demo的效果实现与源码）”

需要掌握的知识：VUE+JS+SASS

#### 软件架构
软件架构说明


#### 安装教程

1.  git clone
2.  npm install
3.  npm run serve

#### 使用说明

1. animationCSS文件夹是vue代码的文件夹

2. StaggerAnimation.vue文件

    交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。

3. DivideTxt.vue文件

    用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽。 

    一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：`delay + Math.abs(i - middle) * step`，其中中间元素的下标`middle = letters.filter(e => e !== "").length / 2` 

    代码中包含了以上两种：动画从文本起始位置开始；动画从文本中间开始。

4. Snow.vue文件

    随机粒子动画，我们可以实现效果：给几百个粒子添加交错动画，并且交错时间随机，位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。

5. PseudoClass.vue

    伪类，文中添加了:hover,:after两个伪类。实现了button悬浮边框动画的效果，实现button文字滚动抖动的效果。
    边框border的动画，通过在button标签里添加border样式，用上层border的动画模拟看着像button边框的动画。
    重点在定义hover和unhover时transition属性。

6. MultBorder.vue

    做为PseudoClass.vue的扩展，按钮不只有一个边框，通过绝对定位和padding实现了三个边框的按钮样式，并通过`:nth-child()`伪类实现元素定义。动画效果跟上个按钮一致。

7. PseudoStrip.vue

    是伪类的扩展，::before和::after不仅可以增加文字，还可以设置样式，通过伪类增加一个条形背景。在其上设置动画，产生一种条形划过文字的效果。

8. FloatText.vue

    利用伪类实现文字的上下滚动，可以通过opacity由0-1的变化，以及translateY的变化实现。还可以通过overflow:hidden。实现超出部分隐藏的效果。
    这个文件中对分割文本进行扩充。可以将分割后的单个字母赋值到span的data-*中。
    代码`span.dataset.text = letter// 给每个span增加dataset，可以通过attr获取`

9. HoverShining.vue

    做出一束光划过按钮的效果。同样利用了伪类::before，通过渐变背景颜色创建这束光。给出tanslateX(-100%)到tanslateX(100%)是这束光划过的过程，利用 `overflow: hidden` 障眼法营造这种效果。

10. TodoList.vue

    对原生表单元素的动画进行创新。`label`标签将`input`标签和`span`标签包裹起来，同时将原生的input隐藏，利用`i`标签模拟单选框的样式（在选择后方便修改单选框的样式）。模拟出单选框到对勾的样式，和文字颜色变暗，通过伪类实现文字上划线的效果。
    注意label标签不能由for属性。否则不能将span和input事件传递到label上。

11. BorderRadius.vue

    1、调整圆角实现不规则的曲边形状，`border-radius: 5% 5% 15% 15% / 15% 15% 50% 50%;`的实际意义是`border-radius-left: 5% 15%`。一次类推，做出光滑的圆角。
    2、利用after伪类添加背景框，注意背景框的移动是在外层div下，而移动的距离通过js修改css的属性传递参数`--active-index`,使用的方法是`this.$refs.svg.style.setProperty('--active-index', activeIndex)`，通过`refs`找到对应的dom元素。也有`document.documentElment.style.setProperty()`不过后者在vue中不适用。
    3、计算移动距离`$active-width:calc(var(--svg-width) * var(--active-index));`必须使用`var(--name)`不能使用`$name`,否则不起作用。

12. Pagination.vue

    1、模拟了分页的数字跳转和prev和next的功能
    2、样式中设置了多层box-shadow，使阴影更自然。
    3、沿用js修改css属性的方法，获取active数组的index，方便prev和next功能实现。注意每次click事件后要重新给`--active-index`赋值
    4、svg样式的修改要在全局+important

13. CrimsonCrescent.vue

    1、模拟红新月的效果，利用`box-shadow: 0.5em -0.5em 0.3em crimson inset;`，需要增加模糊距离属性。
    2、filter属性需要在before和after伪类上，否则会在整体上增加效果。

14. StaggerGlowText.vue
  
    1、利用`text-shadow`属性创建发光文本。

15. NeonText.vue

    1、利用`text-shadow`多层嵌套，实现霓虹灯效果。
    2、`animation-duration:0.1s`营造出快速闪动霓虹效果。

16. BounceThreed.vue

    1、在sass中创建函数，多层嵌套`text-shadow`，实现文本3D效果。
    2、利用了append函数

17. FillText.vue

    1、`-webkit-text-stroke`是给文本描边
    2、background的`linear-gradient`样式类似于图像，可以有`background-size`属性
    3、`background-clip: text;`是给字体添加背景

18. ConfirmModal.vue

    1、利用before伪类添加背景变化，after伪类添加文字变化。

19. ParticleButton.vue

    利用radial-gradient属性增加径向背景图片。注意`overflow:visible`，否则不显示。

20. LightWuhan.vue

    利用h5的filter属性设置`grayscale(100%)`图片灰度，`grayscale(0)`为原图片灰度。
    同时利用js的dom控制方法`img.style.filter = 'grayscale(0)'`添加点击事件。

21. GaugeChart.vue

    要想使a标签没有跳转功能，则去掉href属性。
    利用conic-gradient圆锥渐变，创造出gauge属性，使用到getPropertyValue和setProperty和setAttribute方法/注意conic-gradient不支持firefox

22. BackdropFilter.vue

    利用filter属性创造出毛玻璃效果。`-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);`。在firefox浏览器中不支持backdrop-filter。在chrome浏览器查看

23. VideoMaskText.vue

    css3的混合模式：`mix-blend-mode:screen`。
    在CSS3混合模式中，目前仅有16种：normal，multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity。其中每一种混合模式都有其自的计算模式

24. NameCard.vue

    联系人card。增加了clip-path属性是通过屏蔽和裁减来隐藏元素的一部分的工具。`clip-path:inset(上，右，下，左)`设置属性。也可以设置circle和三角形及任意形状。

25. CardReflection.vue

    镜像效果，主要代码 `-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent, rgba(0,0,0,0.4));` 。div的背面元素是否显示`backface-visibility: hidden;`。3D旋转效果 `transform-style: preserve-3d;`