CSS3实现卡片晃动效果

今天带来的这段代码实现了在一个图片上增加一个时间倒计时的功能,并且当鼠标移动时,倒计时板块会产生晃动效果。具体实现方式是利用JavaScript计算剩余时间并将其显示在界面上,同时添加鼠标移动事件以及CSS样式来实现晃动效果。

一、演示图

CSS3实现卡片晃动效果

二、具体代码

三、分析代码

  • 使用CSS样式设置卡片容器的透视度(perspective)和卡片内部的两个面的布局。
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
  • 使用JavaScript监听卡片容器的鼠标移入和移出事件,并根据事件触发的情况修改卡片内部的transform属性来实现翻转效果。
const flipCard = document.querySelector('.flip-card');

flipCard.addEventListener('mouseenter', () => {
  flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(180deg)';
});

flipCard.addEventListener('mouseleave', () => {
  flipCard.querySelector('.flip-card-inner').style.transform = 'rotateY(0deg)';
});
  • 当鼠标移入时,通过querySelector方法获取卡片内部的元素,然后将它的transform属性设置为”rotateY(180deg)”,这样就可以让卡片翻转并显示背面内容了。当鼠标移出时,同样获取元素并将属性设置为”rotateY(0deg)”来使卡片翻转回正面。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
css3

CSS3实现动画卡片悬停

2023-6-10 9:09:30

css3html5javascript

WordPress网站B2主题会员展示模块

2023-6-15 0:04:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索