前言
「作者主页」:雪碧有白泡泡
「个人网站」:雪碧的个人网站
「推荐专栏」:
★java一站式服务 ★
★ React从入门到精通★
★前端炫酷代码分享 ★
★ 从0到英雄,vue成神之路★
★ uniapp-从构建到提升★
★ 从0到英雄,vue成神之路★
★ 解决算法,一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★
★后端进阶之路★
先上效果
简单预览
这里可以直接 看查源码内容, 刷新,最后一个是 放大**跳转网页** 点击运行后即可有如下效果,拖动鼠标即可
可随鼠标移动
核心代码
script代码
<script>
var top=document.getElementById('top')
var content=document.getElementById('content')
var card=document.getElementById('card')
var imgBox=document.getElementById('imgBox')
top.addEventListener("click", ()=>{
addClass(content,'moveOut')
setTimeout(()=>{
addClass(card,'showCard')
},500)
})
card.onmouseover=()=>{
toggleClass(imgBox,'imgBoxAct')
}
card.onmouseout=()=>{
toggleClass(imgBox,'imgBoxAct')
}
function hasClass(obj,cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
};
function addClass(obj,cls) {
if (!hasClass(obj,cls)) obj.className += " " + cls;
}
Object.prototype.removeClass = function removeClass(obj,cls) {
if (hasClass(obj,cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
};
function toggleClass(obj,cls){
if(this.hasClass(obj,cls)){
this.removeClass(obj,cls);
}else{
this.addClass(obj,cls);
}
};
</script>
代码解释
-
当
top
元素被点击时,给content
元素添加moveOut
类,并在 500 毫秒后给card
元素添加showCard
类。 -
当鼠标移动到
card
元素上时,给imgBox
元素添加imgBoxAct
类;当鼠标移出card
元素时,移除imgBoxAct
类。 -
定义了四个函数:
-
hasClass(obj, cls)
:判断obj
元素是否包含cls
类。 -
addClass(obj, cls)
:给obj
元素添加cls
类。 -
Object.prototype.removeClass
:给obj
元素移除cls
类。 -
toggleClass(obj, cls)
:如果obj
元素包含cls
类,则移除该类;否则添加该类。
-
部分css代码
这段代码是一个CSS样式表,用于设计一个网页的背景和一个卡片的样式。以下是每个部分的解释:
.bg{
width: 100vw;
height: 100vh;
background:#f39c72;
padding-top: 140px;
font-family: "楷体","楷体_GB2312";
}
这段代码定义了一个类名为“bg”的元素,它的宽度和高度分别为视口的宽度和高度,背景颜色为橙色,顶部有一个内边距为140像素的空白区域,字体为“楷体”。
.bg:before{
background-size:cover;
background:url(../images/moonCakeBg.png) repeat center;
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
animation:bgMove 10s infinite linear;
}
这段代码定义了一个伪元素,它是“bg”元素的前置元素。它的背景图片是一个月饼的图片,重复平铺,居中对齐。它的位置是绝对定位,占据整个视口,有一个名为“bgMove”的动画,持续时间为10秒,无限循环,线性变化。
.card{
position:absolute;
z-index: 4;
width:350px;
height:600px;
left:50%;
top:50%;
display: none;
cursor: pointer;
transform:translate(-50%,-50%);
background: url(../images/cardBg2.png)no-repeat;
background-size:100% 100%;
transform-style:preserve-3d;
perspective:1700px;
background-color:#6375fd;
box-shadow:inset 300px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
transition:1s;
}
这段代码定义了一个类名为“card”的元素,它是一个卡片。它的位置是绝对定位,居中对齐。它的宽度和高度分别为350像素和600像素。它的背景图片是一个蓝色的图片,不重复平铺,居中对齐。它的变换样式是3D保留,透视点距离为1700像素。它的背景颜色是深蓝色,有一个阴影效果。它的过渡效果持续1秒。
.card:hover{
/* perspective:2000px; */
box-shadow:inset 20px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
}
这段代码定义了当鼠标悬停在“card”元素上时的样式。它的阴影效果会变化。
.card .imgBox{
width:100%;
height:100%;
position:relative;
transform-origin:left;
background: url(../images/ByteDance.png)no-repeat;
background-size:100% 100%;
transition:1s;
}
.imgBoxAct{
background: url(../images/cardBg1.png)no-repeat!important;
background-size:100% 100%!important;
}
.card:hover .imgBox{
transform:rotatey(-135deg);
}
这段代码定义了一个类名为“imgBox”的元素,它是“card”元素的子元素,用于显示卡片的图片。它的宽度和高度分别为100%。它的位置是相对定位。它的变换原点是左侧。不重复平铺,居中对齐。它的过渡效果持续1秒。当鼠标悬停在“card”元素上时,它会旋转135度。此外,还定义了一个类名为“imgBoxAct”的元素,用于显示卡片的背景图片。
.card .details{
position:absolute;
top:0;
left:0;
box-sizing:border-box;
z-index:-1;
transition: all .2s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
height: 100%;
padding: 130px 40px 50px;
}
.detailsContent p{
font-size: 16px;
line-height: 24px;
color: #302a28;
}
.card .details:hover{
transform: scale(1.1);
text-shadow:10px 40px 50px #6375fd;
}
h3{
font-size: 24px;
line-height: 24px;
color: #2d6da7;
}
p{
font-size: 14px;
line-height: 8px;
color: #2d6da7;
}
这段代码定义了一个类名为“details”的元素,它是“card”元素的子元素,用于显示卡片的详细信息。它的位置是绝对定位,左上角对齐。它的盒模型是border-box。它的z-index为-1,表示它在“card”元素的下方。它的过渡效果持续0.2秒。它的子元素是一个标题和一段文本。当鼠标悬停在“details”元素上时,它会放大1.1倍,并且有一个文本阴影效果。
.showCard{
display: block!important;
animation: showCard 1s linear!important;
animation-fill-mode:forwards!important;
}
@keyframes bgMove{
0%{
background-position:0px 0px;
}
100%{
background-position:200px 298px;
}
}
@keyframes showCard{
0%{
transform:translate(-80%,140%) scale(1);
}
70%{
transform:translate(-10%,-40%) scale(1.4);
}
100%{
transform:translate(-10%,-50%) scale(1.2);
}
}
这段代码定义了一个类名为“showCard”的元素,用于显示卡片。它的显示方式为块级元素。它有一个名为“showCard”的动画,持续时间为1秒,线性变化。动画结束后,元素的状态将保持在最后一帧。此外,还定义了两个关键帧动画,分别是“bgMove”和“showCard”。其中,“bgMove”用于控制背景图片的移动,“showCard”用于控制卡片的显示效果。
精彩福利
文章来源:https://www.toymoban.com/news/detail-712706.html
点击下方地址进入,里面有送书活动还有百度周边放送
链接地址可以私信我进群哦文章来源地址https://www.toymoban.com/news/detail-712706.html
到了这里,关于中秋特辑——3D动态礼盒贺卡(可监听鼠标移动)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!