span移动位置_CSS实现反光+导航栏下标移动+发光按钮+加载效果+海洋球（动态液体）...

b站看到一个up主（阿阳热爱前端）很厉害，各种css写出惊艳的特效，试着自己尝试实现出来。掌握了基本的设计思路，可以自己写出来。动画和变换，过渡用得很多。还有选择器等等都需要用到。这是up主的主页：

哔哩哔哩 ( ゜- ゜)つロ 乾杯~ Bilibili​space.bilibili.com 知乎视频​www.zhihu.com

首先是导航栏，实现下标的移动而不是以往的下标突然出现在对应选项下面，需要有个元素例如li或者div等都可当下标，设置对应初始位置，这里用到position属性还有对应要设置距离相对于页面哪一边（left，top，right，bottom），每当鼠标移到对应元素，设置对应下标的距离，这里使用到（~），设置transition才会有渐变效果。

玻璃反光（这里一束光我使用的是一个div实现的）是通过设置移动translate设置，还有动画animation属性（要定义一个动画），即可完成。还有使用到overflow属性，光束超出即截断隐藏。

发光按钮，首先发光是需要通过设置阴影，box-shadow来加持下效果。按钮边框移动我用四个span实现的，线条设置对应方向颜色渐变（背景颜色），设置动画效果是translate对应