想写点代码相关的，在床上盘腿正坐冥想了两天两夜也想不到有什么好写的，总之先这样水一篇。

样例：

左侧翻转卡片

整体结构是一个div包着二个div

<div class="card">
   <div class="front">//用来放卡片正面的文字
   </div>
   <div class="back">//用来放卡片背面的文字
   </div>
</div>

首先card用position:relative定位，front和back用position:absolute定位并且宽度和高度都为100%（用display: flex;flex-direction: column; justify-content: center;之类的将内容放到中间），使三者位置重合。

关键之处是为front和back添加backface-visibility: hidden;让其从背面不可见，然后用transform: rotateY(180deg);将back翻转到背面，使其成为真正意义上的卡片。

最后给card添加上鼠标悬浮样式（ .card:hover{transform: rotateY(180deg);} ）和过渡效果（transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); //稍微有点转过头的可爱曲线）。

完成了！

鼠标处的背景效果

用我聪明的小脑袋自己想出来的，用js实现，效果：

其主体是一个背景为白色的div元素border-radius: 50%;将其变成圆形，然后用模糊滤镜（例如：filter: blur(60px);），呈现出扩散的效果。

跟随鼠标的效果就是用鼠标的x和y作为它的top和left定位，最后将其大小设为0，在鼠标悬浮:hover里填入实际的大小就好了，我还给大小变化添加了过渡效果（写这篇文章时我发现鼠标离开时几乎没有过渡效果于是又修改了）。

有什么想法或疑问欢迎与我讨论。