前端实例——明日方舟PRTS时装回廊

最新推荐文章于 2024-09-20 20:24:36 发布

Dream cast

最新推荐文章于 2024-09-20 20:24:36 发布

阅读量585

点赞数 1

分类专栏：前端实例文章标签： html5 javascript css 前端 css3

本文链接：https://blog.csdn.net/re_uzume1/article/details/126130556

版权

前端实例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、目标对象

链接：https://prts.wiki/w/%E6%97%B6%E8%A3%85%E5%9B%9E%E5%BB%8A

明日方舟PRTS时装回廊

二、分析

该元素在z轴上可分为两层底层与悬浮窗
当鼠标放在元素上移动时元素会根据鼠标相对于元素中心进行变换

三、业务逻辑处理

 <div class="cont">
        <!-- 图片层 -->
        <div class="rwimg" id="rwimg">
            <!-- 图片背景的网点 -->
            <div class="cirbox">
                <div class="cirbg"></div>
            </div>
            <!-- 主图片 -->
            <div class="fiter">
                <img src="https://prts.wiki/images/5/50/%E5%8D%8A%E8%BA%AB%E5%83%8F_%E6%B3%A5%E5%B2%A9_skin2.png" alt=""
                    id="rw">
            </div>
        </div>

        <!-- 左上角logo -->
        <div class="icon">
            <img src="https://prts.wiki/images/3/3d/Skin_brand_%E9%9F%B3%E5%BE%8B%E8%81%94%E8%A7%89.png" alt="">
        </div>

        <!-- 文本层 -->
        <div class="charnameEn">黑曜石</div>
        <div class="skinname">AMBIENCE SYNESTHESIA</div>

    </div>

/* 公共样式 */
*{
    margin: 0;
    padding: 0;
}
img{
    width: 100%;
    height: 100%;
    pointer-events: none !important;
}
body{
    --color1:rgba(0,0,0,.2);
    --size1:10px;
    --size2:5px;
    background-image: url(https://prts.wiki/images/d/d8/Bg-mc-icon-demo.png);
    transform-style: preserve-3d;
}

/* 主容器 */
.cont{
    margin:200px auto;
    width: 120px;
    height: 276px;
    position: relative;
    z-index: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px;
    transform: perspective(500px) scale(1);
    transform-style: preserve-3d;
    perspective: 500px;
    overflow:hidden;

}
.cont:hover{
    transform: perspective(500px) scale(1.2);
    overflow:visible;
}


/* 背景层网点 */
.cirbox{
    overflow: hidden;
    position: absolute;
    right: 0px;
    bottom: -3px;
    width: 120px;
    height: 100px;
}
.cirbg{
    width: 120px;
    height: 100px;
        background-image: radial-gradient(var(--color1) 6%, transparent 7%), radial-gradient(var(--color1) 12%, transparent 13%), radial-gradient(var(--color1) 16%, transparent 17%), radial-gradient(var(--color1) 20%, transparent 21%), radial-gradient(var(--color1) 25%, transparent 26%), radial-gradient(var(--color1) 26%, transparent 27%), radial-gradient(var(--color1) 30%, transparent 31%), radial-gradient(var(--color1) 32%, transparent 33%), radial-gradient(var(--color1) 35%, transparent 36%), radial-gradient(var(--color1) 32%, transparent 33%), radial-gradient(var(--color1) 35%, transparent 36%), radial-gradient(var(--color1) 32%, transparent 33%), radial-gradient(var(--color1) 35%, transparent 36%), radial-gradient(var(--color1) 32%, transparent 33%), radial-gradient(var(--color1) 35%, transparent 36%), radial-gradient(var(--color1) 32%, transparent 33%);
        background-size: var(--size1) var(--size1);
        background-position: 0 0,var(--size2) 5px, 0 10px,var(--size2) 15px, 0 20px,var(--size2) 25px, 0 30px,var(--size2) 35px, 0 40px,var(--size2) 45px, 0 50px,var(--size2) 55px, 0 60px,var(--size2) 65px, 0 70px,var(--size2) 75px, 0 80px,var(--size2) 85px, 0 90px,var(--size2) 95px, 0 100px,var(--size2) 105px;
        background-repeat: repeat-x;
        transform: rotate(-15deg);
        z-index: 1;
}


/* 主图片容器 */
.fiter{
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 240px;
    filter: brightness(1) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 5px);
    transform-style: preserve-3d;
    z-index: 3;
}
#rwimg{
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 240px;
    z-index: 3;
    filter: brightness(1);
    transform-style: preserve-3d;
    transform: perspective(500px) scale(1);
    perspective: 500px;
}
#rwimg img{
    position: absolute;
    z-index: 3;
    transform: translateZ(0px);
}


/* 左上角logo */
.icon{
    position: absolute;
    top: 0px;
    left: -25px;
    width: 115px;
    z-index: 1;
    filter: brightness(1) drop-shadow(rgba(0, 0, 0, 1) 0px 5px 0px);
    transform: scale(1);
    transition: all .3s;
}
.cont:hover .icon{
    left: -65px;
    top:-40px;
    transform: scale(.8);
}


/* 文本 */
.charnameEn {
    position: absolute;
    top: 244px;
    left: 4px;
    color: #5b5b5b;
    font-weight: bold;
    font-size: 13px;
    line-height: 12px;
  }
.skinname {
    position: absolute;
    bottom: 4px;
    left: 4px;
    color: #9d9d9d;
    font-size: 18px;
    line-height: 12px;
    white-space: nowrap;
    font-weight: bold;
    transform: scale(.5);
    transform-origin: left;
  }

// 获取元素
var cont = document.getElementsByClassName('cont')[0];
var rw = document.getElementById('rw');
var rwimg = document.getElementsByClassName('rwimg')[0];
var charEn = document.getElementsByClassName('charnameEn')[0];
var skinname = document.getElementsByClassName('skinname')[0];
var cirName = document.getElementsByClassName("cirbg")[0];
var body = document.getElementsByTagName('body')[0];
var fiter = document.getElementsByClassName('fiter')[0];
var icon = document.getElementsByClassName("icon")[0];
var contX, contY, rwX, lcs;


//业务逻辑
window.onmousemove = function () {
    cont.onmouseenter = function () {
        cont.style.transform = "perspective(500px) ";
        body.style.transform = "scale(1.2)"
        cont.onmousemove = function (e) {

            //得到元素中心坐标
            var Hf = cont.offsetHeight / 2;
            var Wf = cont.offsetWidth / 2;

            //得到鼠标实际相对于元素的位置
            var trueX = e.clientX - cont.offsetLeft;
            var trueY = e.clientY - cont.offsetTop;


            //处理关键参数（坐标与元素变化之间的关系）
            contX = (trueX - Wf) / 4;
            contY = (trueY - Hf) / 6 + 180;
            rwX = (trueX - Wf) / 10;
            lcs = trueY / 200;
            if (lcs < 1) {
                lcs = 1;
            }


            //修改元素样式
            //提亮
            rw.style.filter = "brightness(" + lcs + ")";
            //主容器旋转
            cont.style.transform = "rotateY(" + contX + "deg" + ")" + " " + "rotateX(+" + contY + "deg" + ") perspective(200px) scaleY(-1)";
            //图片偏移
            rw.style.left = rwX / 2 + "px";
            rw.style.transform = "translateZ(50px) translateX(" + contX / 4 + ")" + "translateY(" + contY / 4 + ")";
            //图片阴影控制
            fiter.style.filter = "drop-shadow(rgba(0, 0, 0, 0.3) " + contX / 3 + "px " + (contY - 160) / 3 + "px 5px)";
            //盒子阴影控制
            cont.style.boxShadow = "rgba(0, 0, 0, 0.2)" + contX + "px " + (contY - 160) + "px 5px";
            rwimg.style.transform = "transtionZ(50deg)";



        }
        cont.onmouseleave = function () {
            //复原

            body.style.transform = "scaleY(-1)";
            cont.style.boxShadow = "rgba(0, 0, 0, 0.2) 0px 5px 5px";
            rw.style.left = 0;
            cont.style.transform = "perspective(500px) scaleY(-1)";
            rw.style.transform = "";
            fiter.style.filter = "brightness(1) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 5px)";
            rwimg.style.transform = "transtionZ(0deg)";

        }
    }
}