动效制作:
  • opacity: 0.2 模糊设置
  • transform: scale(1.07)放大到 1.07 倍
  • transition: all 0.5s 动画效果
  • 让图片放大不溢出的方法:在图片外套一个 div(注意以后图片不要直接放上去,用一个 div 把它框起来!)当 hover 到外 div 时,将图片放大,对外面的 div 设置 overflow: hidden;
  • 将播放按钮居中的方法:将播放按钮放在图片外 div 里,div 的 position 属性为 relative,播放按钮的属性为 absolute,calc(50% - 35px);就可以居中(35px 是播放按钮图片边长的 1/2)
  • hover 图片的时候,播放按钮的 opacity 从 0 变成 1.