css:hover用法（8）transform位移、缩放、旋转效果(hover、transition、trasform)

最新推荐文章于 2024-04-22 20:04:35 发布

前端小云儿

最新推荐文章于 2024-04-22 20:04:35 发布

阅读量640

点赞数

分类专栏：前端静态页面以及逻辑文章标签： css3

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126661281

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 14 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  float: left;
  position: relative;
  width: 500px;
  height: 750px;
  margin: 100px 200px;
  overflow: hidden;
}
.box > img {
  width: 500px;
  height: 750px;
}
.box > * {
  transition: 1s;
  position: absolute;
  left: 0px;
  top: 0px;
}
.box h2 {
  color: white;
  width: 200px;
  transform: translateX(20px) translateY(450px);
}
.box p {
  color: white;
}
.box p:nth-of-type(1) {
  transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2) {
  transform: translateY(180px) translateX(-150px);
  transition: 1s 0.1s;
}
.box p:nth-of-type(3) {
  transform: translateY(220px) translateX(-150px);
  transition: 1s 0.2s;
}
/*鼠标滑动效果*/
.box:hover p:nth-of-type(1) {
  transform: translateY(300px) translateX(10px);
}
.box:hover p:nth-of-type(2) {
  transform: translateY(350px) translateX(10px);
}
.box:hover p:nth-of-type(3) {
  transform: translateY(400px) tran

了解本专栏