中秋特辑——3D动态礼盒贺卡(可监听鼠标移动)

这篇具有很好参考价值的文章主要介绍了中秋特辑——3D动态礼盒贺卡(可监听鼠标移动)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设
「作者主页」:雪碧有白泡泡
「个人网站」:雪碧的个人网站
「推荐专栏」

java一站式服务
React从入门到精通
前端炫酷代码分享
★ 从0到英雄,vue成神之路★
uniapp-从构建到提升
从0到英雄,vue成神之路
解决算法,一个专栏就够了
架构咱们从0说
★ 数据流通的精妙之道★
★后端进阶之路★

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设

先上效果

简单预览

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设

这里可以直接 看查源码内容, 刷新,最后一个是 放大**跳转网页** 点击运行后即可有如下效果,拖动鼠标即可

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设
可随鼠标移动

核心代码

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>

代码解释

  1. top 元素被点击时,给 content 元素添加 moveOut 类,并在 500 毫秒后给 card 元素添加 showCard 类。

  2. 当鼠标移动到 card 元素上时,给 imgBox 元素添加 imgBoxAct 类;当鼠标移出 card 元素时,移除 imgBoxAct 类。

  3. 定义了四个函数:

    • hasClass(obj, cls):判断 obj 元素是否包含 cls 类。

    • addClass(obj, cls):给 obj 元素添加 cls 类。

    • Object.prototype.removeClass:给 obj 元素移除 cls 类。

    • toggleClass(obj, cls):如果 obj 元素包含 cls 类,则移除该类;否则添加该类。
      中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设

部分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”用于控制卡片的显示效果。
中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设

精彩福利

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设

点击下方地址进入,里面有送书活动还有百度周边放送
链接地址可以私信我进群哦中秋特辑——3D动态礼盒贺卡(可监听鼠标移动),粉丝福利活动,前端炫酷代码分享,3d,计算机外设文章来源地址https://www.toymoban.com/news/detail-712706.html

到了这里,关于中秋特辑——3D动态礼盒贺卡(可监听鼠标移动)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 压枪源码,移动鼠标源码,监听鼠标源码,控制鼠标移动源码,控制鼠标移动脚本

    压枪源码,移动鼠标源码,监听鼠标源码,控制鼠标移动源码,控制鼠标移动脚本 加了很多注释了,肯定能看懂,双开火键,左键正常,侧键直接压开 先ahk官网下载安装后就能直接运行这个ahk文件了 一开始尝试python写,可以移动鼠标可以监听按键,游戏里不行,有延迟感,

    2024年02月16日
    浏览(41)
  • 【探索Linux世界|中秋特辑】--- 倒计时和进度条的实现与演示

    个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【Linux专栏】🎈 本专栏旨在分享学习Linux的一点学习心得,欢迎大家在评论区讨论💌 演示环境: centos7 在编写进度条之前我们需要先了解Linux缓冲区的知识。 下图是

    2024年02月08日
    浏览(39)
  • JavaScript 监听鼠标左右同时按下/同时按下移动

    基于原生JavaScript, 在使用 three.js 的 raycaster 模拟瞄准及射击时用到.

    2024年02月07日
    浏览(39)
  • 《Cesium 进阶知识点》- 监听鼠标移动和缩放等场景信息

    使用对象 Cesium.ScreenSpaceEventHandler 监听鼠标 Cesium.ScreenSpaceEventType.MOUSE_MOVE 和 WHEEL事件。 这里涉及到获取 级别 信息,详见《《Cesium 进阶知识点》- 获取当前场景的级别》

    2024年02月16日
    浏览(32)
  • unity 3D,镜头跟随鼠标移动

    一、鼠标隐藏,使用UI图片作鼠标图 二、射线在屏幕中央,用于交互 三、鼠标与摄像头跟随

    2024年02月12日
    浏览(74)
  • Unity鼠标控制3D物体的移动、旋转、缩放

    1.使用协程 2.鼠标左键控制物体移动,鼠标碰到物体,物体颜色改变 1. 控制物体左右旋转,上下旋转 2. 控制摄像机以物体为中心旋转 脚本挂载到摄像机上 1. 基于物体本身的Transform的缩放 2. 基于摄像机的远近的缩放 脚本挂载到摄像机上

    2024年02月11日
    浏览(52)
  • 前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)

    🤗博主:小猫娃来啦 🤗文章核心: gitee上开源一个移动端礼盒商城项目 项目样式老旧,ui设计较low,虽说现在大众的商城app都使用的是瀑布流布局,且功能更丰富。但本项目仅作为开源学习和技术交流,仅此而已。 前端采用搭建vue脚手架处理,使用JavaScript语言,后台采用

    2024年02月09日
    浏览(42)
  • 前端(十八)——gitee上开源一个移动端礼盒商城项目(前端+后台)

    🤗博主:小猫娃来啦 🤗文章核心: gitee上开源一个移动端礼盒商城项目 项目样式老旧,ui设计较low,虽说现在大众的商城app都使用的是瀑布流布局,且功能更丰富。但本项目仅作为开源学习和技术交流,仅此而已。 前端采用搭建vue脚手架处理,使用JavaScript语言,后台采用

    2024年02月08日
    浏览(47)
  • 鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点

    指的是鼠标在进入某个元素的时候触发的事件 指的是鼠标在离开某个元素时触发的事件 onclick-------------------------------------鼠标单击触发 ondblclick----------------------------------鼠标双击触发 onmousemove---------------鼠标在上面移动时触发 核心点以及坑点.onmouseover, onmouseout 如果绑定在同

    2024年02月15日
    浏览(35)
  • WEB 3D技术 three.js 3D贺卡(1) 搭建基本项目环境

    好 今天 我也是在网上学的 带着大家一起来做个3D贺卡 首先 我们要创建一个vue3的项目、 先创建一个文件夹 装我们的项目 终端执行 vue create 项目名称 例如 我的名字想叫 greetingCards 就是 因为这个名录 里面是全部都小写的 然后 下面选择 vue3 然后按下回车 等待项目创建完成

    2024年01月19日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包