分享两组不同的3D VR卡片

2023-11-22 15:10
文章标签 3d 分享 不同 卡片 vr 两组

本文主要是介绍分享两组不同的3D VR卡片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近某音上出现了很多VR视频,转动手机可以看到手机界面未显示出来的场景。这种事情我觉得我们也可以做到。

所以两种不同的3D VR卡片来了:

第一种是横向或上下可以拖动极大的距离。卡片上的信息会随着拖动移动,但不会显示更多的信息:
在这里插入图片描述
第二种是横向或者上下拖动距离有限。但卡片上显示信息可以表达的更多。
在这里插入图片描述
当然,有实力的同学可以结合两者或者对它们进行魔改,使其符合你们的需求~

下面分别是两种不同卡片的源码,送给需要的同学~

第一种:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><style>@import url(https://fonts.googleapis.com/css?family=Roboto);html, body {font-family: "Roboto", sans-serif;height: 100%;}body {background: linear-gradient(to bottom, #ddd 0%, #f0f0f0 40%);transform-style: preserve-3d;transform: perspective(800px);background-image: url(data:image/png;base64,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);}.wrap {position: absolute;perspective: 600px;height: 100%;width: 100%;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;text-align: center;}.card-shadow, .card {margin: 0 auto;margin-top: 100px;width: 300px;height: 450px;z-index: 1;position: absolute;border-radius: 10px;top: 0px;bottom: 0px;left: 0px;right: 0px;}.card {background: #fff url("https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?fit=crop&fm=jpg&h=950&q=80&w=1925") 50% 50%;background-size: 450%;}.card-shine {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;z-index: 1;border-radius: 10px;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);z-index: -1;}.card-shadow {top: 10px;transform-style: preserve-3d;transform: translateZ(40px);z-index: -1;background: #B3B3B3;transform: scale(0.5, 0.5);box-shadow: 0 0 30px 10px #aaa;}.card-front, .card-title, .card-subtitle {position: absolute;color: #FFF;transform-style: preserve-3d;}.card-front {border-radius: 10px;width: 100%;height: 100%;z-index: 0;background-color: rgba(0, 0, 0, 0.1);}.card-title {font-weight: 700;text-align: left;left: 30px;bottom: 140px;font-size: 35px;line-height: 30px;text-shadow: 0 5px 8px rgba(0, 0, 0, 0.65);transform: translateZ(0px);overflow: hidden;margin: 0;width: 80%;}.card-subtitle {font-weight: normal;text-align: left;left: 30px;width: 80%;bottom: 80px;font-size: 25px;line-height: 20px;text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);transform: translateZ(0px);}</style>
</head>
<body>
<div class='wrap'><div class='card-shadow'></div><div class='card'><div class='card-front'><div class='card-title'>3D perspective title</div><div class='card-subtitle'>3D perspective subtitle</div><div class='card-shine'></div></div></div>
</div>
</body>
<script>var$card = $('.card'),$cardTitle = $('.card-title'),$cardSubtitle = $('.card-subtitle'),$cardShine = $('.card-shine'),$cardShadow = $('.card-shadow'),currentMousePos = { x: 0, y: 0 },mouseFromCenter = { x: 0, y: 0 };$(document).mousemove(function(event) {varwHeight= $(window).height(),wWidth= $(window).width();currentMousePos.x = event.pageX;currentMousePos.y = event.pageY;mouseFromCenter.x = currentMousePos.x - (wWidth / 2);mouseFromCenter.y = currentMousePos.y - (wHeight / 2);vararound1 = -1 * (currentMousePos.y * 100 / wHeight * 0.2 - 10) + 'deg',around2 = 1 * (currentMousePos.x * 100 / wWidth * 0.2 - 10) + 'deg',trans1 = (currentMousePos.x * 100 / wHeight * 0.3 ) + 'px',trans2 = (currentMousePos.y * 100 / wHeight * 0.3 ) + 'px',dy = event.pageY - wHeight / 2, //@h/2 = center of posterdx = event.pageX - wWidth / 2, //@w/2 = center of postertheta = Math.atan2(dy, dx), // angle between cursor and center of poster in RADangle = theta * 180 / Math.PI - 90,mousePositionX = ( currentMousePos.x / wWidth) * 100,mousePositionY = 50+( currentMousePos.y / wHeight)*10;// gradient angle and opacity for card shine effect$cardShine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + (currentMousePos.y / wHeight) * .7 + ') 0%,rgba(255,255,255, 0) 80%)');// card pos and angle$card.css({"-webkit-transform": "translate3d(" + trans1 + ", " + trans2 +", 0) scale(1) rotatex(" + around1 + ") rotatey(" + around2 + ")",'background-position': mousePositionX + '%' + ' ' + (currentMousePos.y / wHeight) * 50  + '%'});// card shadow pos and angle$cardShadow.css({"transform": "scale(.9,.9) translateX(" + ((mouseFromCenter.x * -0.02) + 12) + "px) translateY(" + ((mouseFromCenter.y * -0.02) + 12 ) + "px) scale(1.0) rotateY(" + (mouseFromCenter.x / 25) * 0.5 + "deg) rotateX(" + ((mouseFromCenter.y / -25) ) + "deg)" });$cardTitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.7) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.65) + "px)"});$cardSubtitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.5) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.15) + "px) translateZ(60px)"});});
</script>
</html>

第二种:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700"><style>body {margin: 40px 0;font-family: "Raleway";font-size: 14px;font-weight: 500;background-color: #BCAAA4;-webkit-font-smoothing: antialiased;}.title {font-family: "Raleway";font-size: 24px;font-weight: 700;color: #5D4037;text-align: center;}p {line-height: 1.5em;}h1 + p, p + p {margin-top: 10px;}.container {padding: 40px 80px;display: flex;flex-wrap: wrap;justify-content: center;}.card-wrap {margin: 10px;transform: perspective(800px);transform-style: preserve-3d;cursor: pointer;}.card-wrap:hover .card-info {transform: translateY(0);}.card-wrap:hover .card-info p {opacity: 1;}.card-wrap:hover .card-info, .card-wrap:hover .card-info p {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);}.card-wrap:hover .card-info:after {transition: 5s cubic-bezier(0.23, 1, 0.32, 1);opacity: 1;transform: translateY(0);}.card-wrap:hover .card-bg {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);opacity: 0.8;}.card-wrap:hover .card {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;}.card {position: relative;flex: 0 0 240px;width: 240px;height: 320px;background-color: #333;overflow: hidden;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);}.card-bg {opacity: 0.5;position: absolute;top: -20px;left: -20px;width: 100%;height: 100%;padding: 20px;background-repeat: no-repeat;background-position: center;background-size: cover;transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);pointer-events: none;}.card-info {padding: 20px;position: absolute;bottom: 0;color: #fff;transform: translateY(40%);transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);}.card-info p {opacity: 0;text-shadow: black 0 2px 3px;transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);}.card-info * {position: relative;z-index: 1;}.card-info:after {content: "";position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);background-blend-mode: overlay;opacity: 0;transform: translateY(100%);transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);}.card-info h1 {font-family: "Playfair Display";font-size: 36px;font-weight: 700;text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;}.Original{position: fixed;display: flex;align-items: center;justify-content: space-between;padding: 20% 0 0 80%;width: 100%;z-index: 3;height: 7em;font-family: "Bebas Neue", sans-serif;font-size: clamp(0.66rem, 2vw, 1rem);letter-spacing: 0.5em;}a{color: black;text-decoration: none;}</style>
</head>
<body>
<h1 class="title">Hover over the cards</h1>
<div id="app" class="container"><card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="><h1 slot="header">Canyons</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="><h1 slot="header">Beaches</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="><h1 slot="header">Trees</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr=2&auto=compress,format&fit=crop&w=1199&h=811&q=80&cs=tinysrgb&crop="><h1 slot="header">Lakes</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card>
</div>
<div class="Original"><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</body>
<script>Vue.config.devtools = true;Vue.component('card', {template: `<div class="card-wrap"@mousemove="handleMouseMove"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"ref="card"><div class="card":style="cardStyle"><div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div><div class="card-info"><slot name="header"></slot><slot name="content"></slot></div></div></div>`,mounted() {this.width = this.$refs.card.offsetWidth;this.height = this.$refs.card.offsetHeight;},props: ['dataImage'],data: () => ({width: 0,height: 0,mouseX: 0,mouseY: 0,mouseLeaveDelay: null }),computed: {mousePX() {return this.mouseX / this.width;},mousePY() {return this.mouseY / this.height;},cardStyle() {const rX = this.mousePX * 30;const rY = this.mousePY * -30;return {transform: `rotateY(${rX}deg) rotateX(${rY}deg)` };},cardBgTransform() {const tX = this.mousePX * -40;const tY = this.mousePY * -40;return {transform: `translateX(${tX}px) translateY(${tY}px)` };},cardBgImage() {return {backgroundImage: `url(${this.dataImage})` };} },methods: {handleMouseMove(e) {this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;},handleMouseEnter() {clearTimeout(this.mouseLeaveDelay);},handleMouseLeave() {this.mouseLeaveDelay = setTimeout(() => {this.mouseX = 0;this.mouseY = 0;}, 1000);} } });const app = new Vue({el: '#app' });
</script>
</html>

这篇关于分享两组不同的3D VR卡片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/411018

相关文章

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

Python解析器安装指南分享(Mac/Windows/Linux)

《Python解析器安装指南分享(Mac/Windows/Linux)》:本文主要介绍Python解析器安装指南(Mac/Windows/Linux),具有很好的参考价值,希望对大家有所帮助,如有... 目NMNkN录1js. 安装包下载1.1 python 下载官网2.核心安装方式3. MACOS 系统安

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4

Python中常用的四种取整方式分享

《Python中常用的四种取整方式分享》在数据处理和数值计算中,取整操作是非常常见的需求,Python提供了多种取整方式,本文为大家整理了四种常用的方法,希望对大家有所帮助... 目录引言向零取整(Truncate)向下取整(Floor)向上取整(Ceil)四舍五入(Round)四种取整方式的对比综合示例应

Python如何计算两个不同类型列表的相似度

《Python如何计算两个不同类型列表的相似度》在编程中,经常需要比较两个列表的相似度,尤其是当这两个列表包含不同类型的元素时,下面小编就来讲讲如何使用Python计算两个不同类型列表的相似度吧... 目录摘要引言数字类型相似度欧几里得距离曼哈顿距离字符串类型相似度Levenshtein距离Jaccard相

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

linux进程D状态的解决思路分享

《linux进程D状态的解决思路分享》在Linux系统中,进程在内核模式下等待I/O完成时会进入不间断睡眠状态(D状态),这种状态下,进程无法通过普通方式被杀死,本文通过实验模拟了这种状态,并分析了如... 目录1. 问题描述2. 问题分析3. 实验模拟3.1 使用losetup创建一个卷作为pv的磁盘3.

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具