必看!HTML&CSS实现3D翻转卡片动画

效果演示

这段代码是一个HTML和CSS的组合,用于创建一个具有3D翻转效果的卡片,当鼠标悬停在卡片上时,卡片会翻转显示背面内容。
在这里插入图片描述

HTML

<div class="myCard">
    <div class="innerCard">
        <div class="frontSide">
            <p class="title"></p>
            <p>鼠标移入</p>
        </div>
        <div class="backSide">
            <p class="title"></p>
            <p>鼠标移出</p>
        </div>
    </div>
</div>
  • myCard 创建了一个类名为 “myCard” 的div元素,它将作为卡片的容器。
  • innerCard 创建了一个类名为 “innerCard” 的div元素,它将作为卡片的内部结构。
  • frontSide 和 backSide 分别创建了类名为 “frontSide” 和 “backSide” 的div元素,它们分别代表卡片的正面和背面。
  • title,分别显示在卡片的正面和背面,显示文字“前”和“后”。
  • p创建了两个段落,分别显示在卡片的正面和背面,提示用户鼠标的移入和移出动作。

CSS

.myCard {
  background-color: transparent;
  width: 190px;
  height: 254px;
  perspective: 1000px;
}

.title {
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

.innerCard {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.myCard:hover .innerCard {
  transform: rotateY(180deg);
}

.frontSide,
.backSide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  color: white;
  box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.frontSide,
.frontSide::before {
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.backSide,
.backSide::before {
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.backSide {
  transform: rotateY(180deg);
}

.frontSide::before,
.backSide::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  z-index: -1;
  border-radius: 1em;
  filter: blur(20px);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    opacity: 0.3;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}
  • .myCard 类定义了卡片容器的样式,背景透明,宽度200px,高度180px,perspective: 1000px; 定义了3D空间的透视效果。
  • .title 类定义了标题的样式,字体大小为1.5em,字体加粗,文本居中,无外边距。
  • .innerCard 类定义了卡片内部结构的样式,相对定位,宽度和高度填满容器,文本居中,transition: transform 0.8s; 表示变换效果的过渡时间为0.8秒,transform-style: preserve-3d; 保持3D效果,cursor: pointer; 将鼠标光标设置为指针形状。
  • 当鼠标悬停在 .myCard 上时,.innerCard 将绕Y轴旋转180度,从而显示卡片的背面。
  • .frontSide 和 .backSide 类定义了卡片正面和背面的样式,绝对定位,显示为flex布局,宽度和高度填满容器,backface-visibility: hidden; 隐藏背面,边框、圆角、颜色和字体加粗。
  • .frontSide 和它的伪元素 ::before 定义了正面的背景渐变效果。
  • .backSide 和它的伪元素 ::before 定义了背面的背景渐变效果。
  • .backSide 类定义了背面的初始状态,绕Y轴旋转180度,使其在卡片背面。
  • .frontSide::before 和 .backSide::before 伪元素定义了一个绝对定位的覆盖层,用于创建模糊效果,animation: animate 5s linear infinite; 定义了一个名为 “animate” 的动画,使模糊效果循环变化。
  • @keyframes animate 定义了一个关键帧动画 “animate”,用于控制伪元素的透明度变化,从0.3变化到1再回到0.3,形成循环动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值