前端CSS卡片动画效果的实现

先来看看具体效果图如下：

HTML代码如下：

<!DOCTYPE html>
<html>
<head><title>【每日一练】CSS产品卡片动画效果的实现</title>
</head>
<body><div class="card"><div class="cover"><img src="watch1.png"></div><div class="details"><div><img src="watch2.png"><h3>苹果电话手表</h3><h2>¥ 1999</h2><a href="https://www.webqdkf.com/" target="_blank">添加购物车</a></div></div></div>
</body>
</html>

CSS代码：

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #09383e;
}
.card
{position: relative;margin: 20px 0;width: 300px;height: 400px;background: #fff;transform-style: preserve-3d;transform: perspective(2000px);box-shadow: inset 300px 0 50px rgba(0,0,0,.15),0 20px 20px rgba(0,0,0,.15);transition: 1s;
}
.card:hover
{transform: perspective(2000px) translateX(50%);box-shadow: inset 20px 0 50px rgba(0,0,0,.15), 0 10px 100px rgba(0,0,0,.15);
}.card .cover
{position: relative;width: 100%;height: 100%;transform-origin: left;z-index: 2;transition: 1s ease-out;background: #fff;display: flex;justify-content: center;align-items: center;transform-style: preserve-3d;overflow: hidden;
}
.card .cover img
{max-width: 100%;z-index: 1;
}
.card:hover .cover
{transform: rotateY(-180deg);
}
.card .cover::before
{content: '';position: absolute;width: 10px;background: #fff;height: 150%;transform: rotate(36.5deg);box-shadow: 0 0 0 20px #47bfce;transition: 0.5s;transition-delay: 1s;
}
.card:hover .cover::before
{width: 0px;box-shadow: 0 0 0 250px #47bfce;transform: rotate(143.5deg);
}
.card .details
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 20px;display: flex;justify-content: center;align-items: center;text-align: center;overflow: hidden;
}
.card .details h3
{font-weight: 500;margin: 5px 0;
}
.card .details h2
{font-size: 1.5em;color: #e82a5b;font-weight: 600;
} .card .details a
{display: inline-block;padding: 8px 20px;margin-top: 5px;background: #47bfce;color: #fff;font-weight: 500;letter-spacing: 1px;border-radius: 25px;text-decoration: none;
}

前端CSS卡片动画效果的实现相关推荐

CSS产品卡片动画效果的实现
在软件开发中,CSS真的是很特别的存在,严格意义上来讲,CSS并不是一门编程语言,表面上看,它好像很简单,其实,在大型的开发项目中,CSS有多复杂,只有写过的人才知道. 记得有次,我跟一个安卓开发的同 ...
html怎么打开时出现动画效果,html5动画制作打开抽出卡片动画效果代码
特效描述:html5动画打开抽出卡片动画效果.抽出卡片特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Sample paper Lorem ipsum dolor sit a ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画方式一: $("div"). ...
CSS animate动画效果
1.CSS动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它 ...
是谁，在敲打我窗-CSS雨滴动画效果
1.扯闲篇是谁在敲打我窗是谁在撩动琴弦那一段被遗忘的时光渐渐地回升出我心坎是谁在敲打我窗是谁在撩动琴弦记忆中那欢乐的情景慢慢地浮现在我的脑海那缓缓飘落的小雨不停地打在我 ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...

前端CSS卡片动画效果的实现

前端CSS卡片动画效果的实现相关推荐

最新文章

热门文章