Image Hover Effects
无 Javascript，纯 CSS，一套你一直想找的即贴即用的鼠标滑过图片效果。快速体验 →
1. 诞生背景
写页面的时候，特别是营销页，官网，博客首页这种纯展示的页面时，我们通常需要上面这种效果。
根据 MDN 中 HTM5 语义化规范，
Hello World !
使用 CSS3 中的 transform 形变属性和 transition 过渡属性就能轻易实现：
figure {
position: relative;
display: inline-block;
margin: 0;
max-width: 100%;
background-color: #2266a5;
color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
figure > img {
vertical-align: top;
max-width: 100%;
}
figure figcaption {
background-color: #135796;
padding: 30px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
figure,
figure:before,
figure:after,
figure *,
figure *:before,
figure *:after {
box-sizing: border-box;
transition: all 0.35s ease;
}
/** fade **/
figure figcaption {
opacity: 0;
}
figure:hover figcaption {
opacity: 1;
}
figure:hover > img, figure:hover figcaption{
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
为何不打包成类似 xx.min.css 库 ？
因为大部分应用场景下，我们仅仅需要 1 个或 2 个效果，没有必要引入一整个 css 库，制作这个项目的初衷就是，为大家提供一个「即贴即用，用完就走，高度定制」的 CSS 效果片段。
如果你需要在项目里引入一个 CSS 库，那么请使用 imagehover.io 或者 Izmir 库。
2. 分类转场组合动效
有的朋友可能好奇酷炫的分类切换效果是怎么实现的？
vue 官网，进入/离开 & 列表过渡章节，请参考 flip 交错过渡效果 →
// your block ...
使用 lodash 库中的 _.shuffle 进行乱序排列：
_.shuffle(effects)使用 es6 中内置的 Array.prototype.sort() 排序，切换分类时将带有同一前缀的效果冒泡至前排：
.sort((a, b) => b.name.includes(id) ? 1 : -1)4. 白天/夜间主题
Darkmode 是目前比较流行的设计元素，网页支持切换白天/夜间主题，由于我个人比较偏向使用 TailwindCSS 这个框架，所以项目里也直接使用了这个生态的插件 tailwindcss-theming 实现这个以功能。
对 Darkmode 感兴趣的朋友可以看这个 Codepen 示例，自己用 CSS :root { --dark: #111111; } 变量实现一个。
另一个比较创新的方案是 Darkmode.js，它是通过设置页面的混合色值实现的，不过对复杂的页面效果不是很理想。
5. Github Page
众所周知，前端同学做完一个作品，可以免费部署到 Github Page 上，供大家预览。但问题是，国内访问 Github Page 速度很慢。难道我们要为了这些 html、css、js、img 静态资源去购买服务器吗？
这里推荐一个比较好的办法，修改 vue.config.js 将生产环境上的静态资源设置成 CDN：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? 'https://cdn.jsdelivr.net/gh/turkyden/image-hover@gh-pages/'
: '/'
}当你运行 vue cli 命令 yarn build 就能打包出 build/index.html 如下:
[jsdelivr]() 在中国大陆是拥有备案的，因此大家不必担心被墙的问题，而且在国内节点还是很多的，速度非常快。
6. CI/CD 自动化
开发环境和生产环境的代码不应该混到一起存放，一般情况下：
- master 主分支：存放源代码，包含所有源代码的资源文件；
- gh-pages 分支：存放编译后的代码，也就是 master 分支中的
/build文件夹下所有资源；
那么如何让这一过程自动化呢？ Github Action 提供了一整套解决方案，这里使用到的如下：
请看项目中的 .github/workflows/ci.yml
name: build-and-deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
BUILD_SCRIPT: npm install && npm run build7. 总结
希望大家结合自己的日常工作，切记不要重复造轮子，发挥自己的想象力，产出作品吧。仔细想一想，做一个项目，即使是纯前端的项目，也有这么多可以玩的。如果一个工具对他人有帮助，那就是有价值的。加油，给这个世界带来不一样的颜色吧！
最后，感谢 imagehover.io 原作者和整个开源社区。欢迎 Github Star ✨ 收藏噢！