网站门户建设方案,wordpress模板安装后效果和预览不同,十大网站app软件,中文网址和中文域名区别最近某音上出现了很多VR视频#xff0c;转动手机可以看到手机界面未显示出来的场景。这种事情我觉得我们也可以做到。
所以两种不同的3D VR卡片来了#xff1a;
第一种是横向或上下可以拖动极大的距离。卡片上的信息会随着拖动移动#xff0c;但不会显示更多的信息#x…最近某音上出现了很多VR视频转动手机可以看到手机界面未显示出来的场景。这种事情我觉得我们也可以做到。
所以两种不同的3D VR卡片来了
第一种是横向或上下可以拖动极大的距离。卡片上的信息会随着拖动移动但不会显示更多的信息 第二种是横向或者上下拖动距离有限。但卡片上显示信息可以表达的更多。 当然有实力的同学可以结合两者或者对它们进行魔改使其符合你们的需求~
下面分别是两种不同卡片的源码送给需要的同学~
第一种
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js/scriptstyleimport url(https://fonts.googleapis.com/css?familyRoboto);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,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxiIlPdqohYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZoEEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6ENcYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjMI2EfhA94iG3L7uKrRGdWD73ydlIB6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2IIjzZ8wqE4nilvQdkUdfhzI5QDWykw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4xKOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2qk7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wPttrqAsWpFG2awvsuOqbipWHgtuvuaAEA1Z/7gC9hesnr7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEsyqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9ptktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaAz8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK/q/AWR0tJzYHRULOa4MPW/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793OzBU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8ialgT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jqf8XNA5eeUKHWvJWJ2sgJ1SopwwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a4wz//6qy8JxjZsmxxy54w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt4/wuqcXY47QILbgAAAABJRU5ErkJggg);}.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?fitcropfmjpgh950q80w1925) 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 classwrapdiv classcard-shadow/divdiv classcarddiv classcard-frontdiv classcard-title3D perspective title/divdiv classcard-subtitle3D perspective subtitle/divdiv classcard-shine/div/div/div
/div
/body
scriptvar$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 langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js/scriptlink relstylesheet typetext/css hrefhttps://fonts.googleapis.com/css?familyPlayfairDisplay:700|Raleway:500.700stylebody {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 classtitleHover over the cards/h1
div idapp classcontainercard data-imagehttps://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr2autocompress,formatfitcropw1199h798q80cstinysrgbcroph1 slotheaderCanyons/h1p slotcontentLorem ipsum dolor sit amet, consectetur adipisicing elit./p/cardcard data-imagehttps://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr2autocompress,formatfitcropw1199h799q80cstinysrgbcroph1 slotheaderBeaches/h1p slotcontentLorem ipsum dolor sit amet, consectetur adipisicing elit./p/cardcard data-imagehttps://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr2autocompress,formatfitcropw1199h799q80cstinysrgbcroph1 slotheaderTrees/h1p slotcontentLorem ipsum dolor sit amet, consectetur adipisicing elit./p/cardcard data-imagehttps://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr2autocompress,formatfitcropw1199h811q80cstinysrgbcroph1 slotheaderLakes/h1p slotcontentLorem ipsum dolor sit amet, consectetur adipisicing elit./p/card
/div
div classOriginala hrefhttps://blog.csdn.net/qq_35241329?typeblogOriginal By TiMi先生/a/div
/body
scriptVue.config.devtools true;Vue.component(card, {template: div classcard-wrapmousemovehandleMouseMovemouseenterhandleMouseEntermouseleavehandleMouseLeaverefcarddiv classcard:stylecardStylediv classcard-bg :style[cardBgTransform, cardBgImage]/divdiv classcard-infoslot nameheader/slotslot namecontent/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
