项目作者: ultraBoJack

项目描述 :
利用css中的clip属性,结合sass中的插值、函数、循环等实现影视中炫酷的信号故障特效(glitch effect)
高级语言: JavaScript
项目地址: git://github.com/ultraBoJack/glitch-effect.git
创建时间: 2018-04-11T21:09:34Z
项目社区:https://github.com/ultraBoJack/glitch-effect

开源协议:

下载


mine

利用css中的clip属性,结合sass中的插值、函数、循环等实现影视中常见的信号故障特效(glitch effect)。

效果展示

glitch-effect

核心代码

  1. .container#{$n}:hover > .img5{
  2. filter: hue-rotate(180deg) opacity(0.8) saturate(0.2);
  3. transform: translate3d(-2px, 2px, 0);
  4. animation: glitch5-#{$n} #{3+random(3)}s step-end infinite;
  5. }
  6. @keyframes glitch2-#{$n} {
  7. $steps: 25 + random(25);
  8. @for $i from 0 through $steps{
  9. $randomBase: random(320);
  10. #{percentage($i * (1 / $steps) / 2)} {
  11. filter: brightness(random(30) / 10) hue-rotate(random(360)+deg);
  12. clip: rect($randomBase+px, (490+random(20))+px, ($randomBase + random(30))+px, (random(40) - 30)+px);
  13. }
  14. }
  15. to {
  16. clip: rect(0, 9999px, 500, 0)
  17. }
  18. }

Build Setup

  1. # install dependencies
  2. npm install
  3. # serve with hot reload at localhost:8080
  4. npm run dev
  5. # build for production with minification
  6. npm run build
  7. # build for production and view the bundle analyzer report
  8. npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.