前端案例【鼠标悬停 发光按钮】

参考：images/op/black/4.jpg · YanH/html_css_demo - Gitee.com

1.vw,vh单位

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响

1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

2.CSS3

radial-gradient是C3中的径向渐变

background: radial-gradient(center, shape, size, start-color, ..., last-color);

3.伪元素

常见的伪元素选择器：
  ::first-letter 选择元素文本的第一个字（母）。
  ::first-line 选择元素文本的第一行。
  ::before 在元素内容的最前面添加新内容。
  ::after 在元素内容的最后面添加新内容。
  ::selection匹配用户被用户选中或者处于高亮状态的部分
  ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
原文链接：https://blog.youkuaiyun.com/m0_37686205/article/details/88396191

4.盒子添加阴影

  box-shadow

5.盒子倒影效果

 -webkit-box-reflect

酷炫！巧用 -webkit-box-reflect 倒影实现各类动效_前端劝退师的博客-优快云博客

6. 过渡transition

transition 可以设置 CSS 属性的过渡效果，它有以下几个属性

1）transition-property 用于指定应用过渡属性的名称：none|all|property,

可以设置过渡的属性，颜色属性，转换属性，渐变属性，阴影属性
2）transition-duration 用于指定这个过渡的持续时间
3）transition-delay 用于指定延迟过渡的时间
4）transition-timing-function 用于指定过渡的类型（过渡函数）

ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡

linear：匀速

ease-in：慢速开始，加速效果

ease-out：以慢速结束，减速效果

ease-in-out：规定以慢速开始和结束，先加速后减速效果

7.自定义属性

        <a href="#" style="--i:1">点赞</a>

        <a href="#" style="--i:2">关注</a>

        <a href="#" style="--i:3">评论</a>

        <a href="#" style="--i:4">收藏</a>

        <a href="#" style="--i:5">分享</a>

        //--i就是自定义属性

案例13