上海 松江 网站制作,秦皇岛网络编辑网站,网络代运营推广,广州服装设计公司有哪些前言 「作者主页」#xff1a;雪碧有白泡泡 「个人网站」#xff1a;雪碧的个人网站 「推荐专栏」#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄#xff…前言 「作者主页」雪碧有白泡泡 「个人网站」雪碧的个人网站 「推荐专栏」 ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄vue成神之路★ ★ 解决算法一个专栏就够了★ ★ 架构咱们从0说★ ★ 数据流通的精妙之道★ ★后端进阶之路★ 文章目录 前言先上效果简单预览 核心代码script代码部分css代码 精彩福利 先上效果 简单预览 这里可以直接 看查源码内容 刷新最后一个是 放大**跳转网页** 点击运行后即可有如下效果拖动鼠标即可 可随鼠标移动
核心代码
script代码
scriptvar topdocument.getElementById(top)var contentdocument.getElementById(content)var carddocument.getElementById(card)var imgBoxdocument.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”用于控制卡片的显示效果。
精彩福利 点击下方地址进入里面有送书活动还有百度周边放送 链接地址可以私信我进群哦
