滚动人物悬空效果

代码语言:html

所属分类:视觉差异

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
article {
  max-width: 500px;
  margin: 2rem auto;
  font: 1.5rem/1.5 system-ui;
}

figure {
  padding: 0;
  margin: 0;
  position: relative;
  padding-bottom: 150px;
}
figure img {
  max-width: 100%;
  display: block;
  margin-bottom: 120px;
}
figure img.top {
  position: absolute;
  top: 115px;
  left: 0;
}
figure figcaption {
  border: 5px solid #009688;
  color: #009688;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 1;
  padding: 0.25rem;
  text-align: c.........完整代码请登录后点击上方下载按钮下载查看

网友评论0