鼠标放在这个卡片组件的上面，我希望可以有点动画效果 ... 比如可以显示一点阴影 ..

在这个 card 样式里面，先用一个 cursor ... 设置一下指针的样式 .. 设置成 pointer ...

然后我们设置一下卡片元素的 hover 样式 .. &:hover .. 这个 & 表示引用 .. 在这里它就相当于是 .ui.card ..

也就是 sass 在编译成 css 的时候，会把这个 & 符号自动的替换成它表示的东西 ..

里面有一个 box-shadown ... 这个属性可以设置元素的阴影的效果 .. 这个属性的值是一个组合 ... 0 32px 48px rgba(0, 0, 0, 0.06)

第一个 0 表示的是阴影的 x 轴的偏移量 .. 32px 表示阴影的 y 轴偏移量 .. 48px 是阴影的模糊程度 ..

最后是一个用 rgba 的形式表示的颜色 ...

现在把鼠标放在卡片的上面，会出现一个阴影效果 .. 我们再去添加点过渡 .. 用一个 transition ... 过滤的属性是 box-shadown .. 时长是 .5s .. 半秒钟 ..

再去预览一下 ..

这样在显示这个阴影效果的时候，就会自然一些了 ...