初级Web开发者求助：如何实现特定CSS动画与尖角样式？

一、尖角样式实现 #

尖角样式通常用CSS伪元素结合边框属性实现，以下是两种常见场景的代码示例：

1. 容器顶部向下的尖角 #

/* 父容器需设置相对定位 */
.angled-container {
  position: relative;
  background: #fff;
  padding: 2rem;
}

.angled-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  /* 利用边框绘制三角形区域 */
  border-bottom: 20px solid #fff;
  border-left: 100vw solid transparent;
}

2. 卡片侧边的尖角 #

.card-with-corner {
  position: relative;
  background: #f5f5f5;
  width: 300px;
  padding: 1.5rem;
}

.card-with-corner::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  /* 绘制直角三角形 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f5f5f5;
}

可根据目标尖角的方向、尺寸，调整边框宽度、颜色以及伪元素的位置参数。

二、图片位移弹跳动画实现 #

你之前使用transform和@keyframes未成功，大概率是关键帧的参数没匹配目标效果。以下是模拟模板中图片进入时的位移弹跳动画代码：

/* 图片初始状态：隐藏在视口下方 */
.image-bounce {
  opacity: 0;
  transform: translateY(50px);
  animation: bounceIn 0.8s ease-out forwards;
}

/* 定义弹跳关键帧 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px); /* 向上反弹 */
  }
  80% {
    transform: translateY(5px); /* 小幅度回落 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 最终归位 */
  }
}

使用时给图片或图片容器添加image-bounce类即可。如果需要滚动到视图才触发动画，可结合JavaScript的Intersection Observer API，监听元素进入视口时添加该类。

内容的提问来源于stack exchange，提问作者Davi