当前位置：首页 > 游戏攻略 > 网页3D效果(一键复制)

网页3D效果(一键复制)

微信用户1年前 (2024-04-27)游戏攻略836

 


旋转木马


网页3D效果(一键复制)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 第二步：样式 */
      body {
        /* 景深给body 因为是从整个屏幕看得 */
        perspective: 1000px;
        /* background-color: rgb(0, 0, 0); */
      }

      section {
        position: relative;
        width: 300px;
        height: 200px;
        /* border: 1px solid red; */
        /* 大盒子要居中 因为小盒子要移动一些距离 */
        margin: 150px auto;
        /* transform: rotateX(-70deg); */
        transform-style: preserve-3d;
        /* 可以先把大盒子沿着X轴旋转一下 看得更清晰 */
        animation: aa 8s linear infinite;
      }

      @keyframes aa {
        0% {}

        100% {
          transform: rotateY(360deg);
        }
      }

      div {
        /* 通过绝对定位让所有的盒子重叠在一起 */
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(0.jpg) no-repeat;
        background-size: 100% 100%;
        /* 给盒子添加阴影 （光效） */
        box-shadow: 1px 2px 22px 1px rgb(255, 255, 255);
        /* 给图片添加倒影效果 */
         -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
      }
      
      div>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      section div:nth-child(1) {
        /* 第1个盒子直接往前平移一段距离即可 不需要旋转 */
        transform: translateZ(400px);
      }

      section div:nth-child(2) {
        /* 第2个盒子先沿着Y轴旋转60deg 在沿着Z轴平移指定的距离 */
        transform: rotateY(60deg) translateZ(400px);
      }

      section div:nth-child(3) {
        /* 第3个盒子先沿着Y轴旋转120deg 在沿着Z轴平移指定的距离 */
        transform: rotateY(120deg) translateZ(400px);
      }

      section div:nth-child(4) {
        /* 第3个盒子先沿着Y轴旋转180deg 在沿着Z轴平移指定的距离 */
        transform: rotateY(180deg) translateZ(400px);
      }

      section div:nth-child(5) {
        /* 第3个盒子先沿着Y轴旋转240deg 在沿着Z轴平移指定的距离 */
        transform: rotateY(240deg) translateZ(400px);
      }

      section div:nth-child(6) {
        /* 第3个盒子先沿着Y轴旋转300deg 在沿着Z轴平移指定的距离 */
        transform: rotateY(300deg) translateZ(400px);
      }
    </style>
  </head>

  <body>
    <section>
      <div>
        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
      <div>
        <img src="https://images.pexels.com/photos/735423/pexels-photo-735423.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
      <div>
        <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
      <div>
        <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
      <div>
        <img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
      <div>
        <img src="https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
      </div>
    </section>
  </body>

</html>

 这个玩意好像没什么实际用途....



立体导航栏


网页3D效果(一键复制)

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      nav {
        height: 48px;
        background-color: aliceblue;
      }

      ul {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      li {
        width: 100px;
        height: 100%;
        list-style-type: none;
        position: relative;
        transform-style: preserve-3d;
        transition: all 0.6s;
      }

      a {
        display: inline-block;
        text-decoration: none;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 48px;
        color: #000000;
      }

      .en {
        width: 100%;
        height: 100%;
        outline: 1px solid #00aa7f;
        position: absolute;
        z-index: 2;
        transform: translateZ(24px);
      }

      .zh {
        width: 100%;
        height: 100%;
        background-color: #00aa7f;
        outline: 1px solid #00aa7f;
        color: #fff;
        position: absolute;
        z-index: 2;
        transform: translateY(24px) rotateX(-90deg);
      }

      li:hover {
        transform: rotateX(90deg);
      }
    </style>
  </head>
  <body>

    <nav>
      <ul>
        <li>
          <a href="#" class="en">Home</a>
          <a href="#" class="zh">首页</a>
        </li>
        <li>
          <a href="#" class="en">List</a>
          <a href="#" class="zh">商品列表</a>
        </li>
        <li>
          <a href="#" class="en">Car</a>
          <a href="#" class="zh">购物车</a>
        </li>
        <li>
          <a href="#" class="en">About</a>
          <a href="#" class="zh">关于我们</a>
        </li>
        <li>
          <a href="#" class="en">Contant</a>
          <a href="#" class="zh">联系我们</a>
        </li>
        <li>
          <a href="#" class="en">Login</a>
          <a href="#" class="zh">登录</a>
        </li>
      </ul>
    </nav>

  </body>
</html>

 


翻转注册登录


网页3D效果(一键复制)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>翻转样式</title>
    <style>
      /* 动态背景 */
      @keyframes move {
        100% {
          transform: translate3d(0, 0, 1px) rotate(360deg);
        }
      }

      .background {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: #3E1E68;
        overflow: hidden;
      }

      .background span {
        width: 20vmin;
        height: 20vmin;
        border-radius: 20vmin;
        backface-visibility: hidden;
        position: absolute;
        animation: move;
        animation-duration: 45;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }


      .background span:nth-child(0) {
        color: #FFACAC;
        top: 90%;
        left: 47%;
        animation-duration: 8s;
        animation-delay: -17s;
        transform-origin: 2vw 17vh;
        box-shadow: -40vmin 0 5.494502440636581vmin currentColor;
      }

      .background span:nth-child(1) {
        color: #FFACAC;
        top: 31%;
        left: 5%;
        animation-duration: 40s;
        animation-delay: -14s;
        transform-origin: -5vw -14vh;
        box-shadow: -40vmin 0 5.192195104974926vmin currentColor;
      }

      .background span:nth-child(2) {
        color: #FFACAC;
        top: 18%;
        left: 62%;
        animation-duration: 20s;
        animation-delay: -5s;
        transform-origin: -18vw -12vh;
        box-shadow: 40vmin 0 5.72205756381233vmin currentColor;
      }

      .background span:nth-child(3) {
        color: #FFACAC;
        top: 71%;
        left: 45%;
        animation-duration: 30s;
        animation-delay: -2s;
        transform-origin: -4vw -20vh;
        box-shadow: -40vmin 0 5.303503038071778vmin currentColor;
      }

      .background span:nth-child(4) {
        color: #E45A84;
        top: 90%;
        left: 38%;
        animation-duration: 15s;
        animation-delay: -48s;
        transform-origin: 7vw -9vh;
        box-shadow: -40vmin 0 5.882238754040052vmin currentColor;
      }

      .background span:nth-child(5) {
        color: #583C87;
        top: 34%;
        left: 32%;
        animation-duration: 30s;
        animation-delay: -36s;
        transform-origin: -6vw -15vh;
        box-shadow: 40vmin 0 5.183333217256063vmin currentColor;
      }

      .background span:nth-child(6) {
        color: #583C87;
        top: 25%;
        left: 41%;
        animation-duration: 21s;
        animation-delay: -47s;
        transform-origin: -10vw -5vh;
        box-shadow: 40vmin 0 5.345257098222438vmin currentColor;
      }

      .background span:nth-child(7) {
        color: #E45A84;
        top: 16%;
        left: 39%;
        animation-duration: 30s;
        animation-delay: -33s;
        transform-origin: -15vw 3vh;
        box-shadow: -40vmin 0 5.693872337330205vmin currentColor;
      }

      .background span:nth-child(8) {
        color: #583C87;
        top: 42%;
        left: 55%;
        animation-duration: 46s;
        animation-delay: -50s;
        transform-origin: -6vw 25vh;
        box-shadow: 40vmin 0 5.588315610213253vmin currentColor;
      }

      .background span:nth-child(9) {
        color: #E45A84;
        top: 78%;
        left: 25%;
        animation-duration: 44s;
        animation-delay: -21s;
        transform-origin: -4vw -12vh;
        box-shadow: -40vmin 0 5.82170170819547vmin currentColor;
      }

      .background span:nth-child(10) {
        color: #E45A84;
        top: 73%;
        left: 77%;
        animation-duration: 41s;
        animation-delay: -40s;
        transform-origin: 21vw -11vh;
        box-shadow: -40vmin 0 5.838449416658446vmin currentColor;
      }

      .background span:nth-child(11) {
        color: #E45A84;
        top: 48%;
        left: 81%;
        animation-duration: 33s;
        animation-delay: -42s;
        transform-origin: 6vw 19vh;
        box-shadow: 40vmin 0 5.848850560573668vmin currentColor;
      }

      .background span:nth-child(12) {
        color: #E45A84;
        top: 77%;
        left: 7%;
        animation-duration: 25s;
        animation-delay: -1s;
        transform-origin: 15vw 24vh;
        box-shadow: -40vmin 0 5.800039290361969vmin currentColor;
      }

      .background span:nth-child(13) {
        color: #E45A84;
        top: 77%;
        left: 38%;
        animation-duration: 51s;
        animation-delay: -40s;
        transform-origin: -1vw -13vh;
        box-shadow: -40vmin 0 5.876822672246133vmin currentColor;
      }

      .background span:nth-child(14) {
        color: #583C87;
        top: 58%;
        left: 98%;
        animation-duration: 7s;
        animation-delay: -1s;
        transform-origin: -19vw -20vh;
        box-shadow: -40vmin 0 5.622075629639948vmin currentColor;
      }

      .background span:nth-child(15) {
        color: #583C87;
        top: 79%;
        left: 31%;
        animation-duration: 39s;
        animation-delay: -46s;
        transform-origin: 14vw 21vh;
        box-shadow: 40vmin 0 5.022352355698978vmin currentColor;
      }

      .background span:nth-child(16) {
        color: #E45A84;
        top: 41%;
        left: 74%;
        animation-duration: 37s;
        animation-delay: -4s;
        transform-origin: -19vw 3vh;
        box-shadow: 40vmin 0 5.049960684696969vmin currentColor;
      }

      .background span:nth-child(17) {
        color: #583C87;
        top: 56%;
        left: 34%;
        animation-duration: 26s;
        animation-delay: -35s;
        transform-origin: -16vw -7vh;
        box-shadow: -40vmin 0 5.11253385954465vmin currentColor;
      }

      .background span:nth-child(18) {
        color: #583C87;
        top: 84%;
        left: 2%;
        animation-duration: 14s;
        animation-delay: -39s;
        transform-origin: -10vw -6vh;
        box-shadow: 40vmin 0 5.903761483531039vmin currentColor;
      }

      .background span:nth-child(19) {
        color: #E45A84;
        top: 61%;
        left: 39%;
        animation-duration: 21s;
        animation-delay: -36s;
        transform-origin: 14vw 9vh;
        box-shadow: 40vmin 0 5.448311817969409vmin currentColor;
      }

      .background span:nth-child(20) {
        color: #E45A84;
        top: 33%;
        left: 5%;
        animation-duration: 8s;
        animation-delay: -7s;
        transform-origin: 4vw 2vh;
        box-shadow: 40vmin 0 5.013421190075091vmin currentColor;
      }

      /* 动态背景 */
      .box {
        width: 100%;
        height: 100vh;
        text-align: center;
        position: relative;
        perspective: 1000px;
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .box-zheng,
      .box-fan {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition-duration: .5s;
        transition-timing-function: 'ease-in';
      }

      .box-fan {
        transform: rotateY(180deg);
        visibility: hidden;
        position: absolute;
        top: 15%;
        left: 37%;
        right: 0;
        bottom: 0;
      }

      .box-fan {
        width: 320px;
        height: 490px;
        background-color: rgba(0, 0, 0, 0.24);
        border-radius: 6px;
        padding: 20px 32px;
      }

      .box-fz .box-zheng {
        transform: rotateY(180deg);
        visibility: hidden;
      }

      .box-fz .box-fan {
        transform: rotateY(360deg);
        visibility: visible;
      }


      body {
        background-color: aquamarine;
      }

      .box-zheng {
        width: 320px;
        /* height: 490px; */
        background-color: rgba(0, 0, 0, 0.24);
        border-radius: 6px;
        padding: 20px 32px;
      }



      h3 {
        font-size: 22px;
        color: #fff;
        text-align: center;
        margin-bottom: 40px;
        font-weight: 500;
        letter-spacing: 5px;
      }

      input {
        width: 100%;
        height: 35px;
        border: 1px solid #fff;
        background-color: transparent;
        padding-left: 10px;
        font-size: 12px;
        color: #fff;
        margin-bottom: 20px;
        outline: none;
        border-radius: 5px;
      }

      input::placeholder {
        color: #fff;
      }

      .yzmBox {
        display: flex;
        justify-content: flex-start;
      }

      .yzmBox input {
        width: 70%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .yzmBox .btn {
        cursor: pointer;
        width: 29%;
        background-color: #aa55ff;
        color: #d8d8d8;
        height: 35px;
        outline: none;
        border: 1px solid #aa55ff;
        font-size: 12px;
        border-radius: 6px;
        margin-left: 1%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      .forgetPwd {
        text-align: end;
        font-size: 12px;
        color: #ffffff;
        padding-right: 5px;
      }

      .loginBtn {
        width: 100%;
        line-height: 36px;
        text-align: center;
        font-size: 15px;
        color: #fff;
        border-radius: 6px;
        background: linear-gradient(to right, #aa55ff, #E45A84);
        outline: none;
        border: none;
        margin-top: 30px;
      }

      .no {
        margin-top: 30px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>

    <!-- 背景 -->
    <div class="background">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="box" id="reverse">
      <div class="box-zheng">
        <h3>欢迎登录</h3>
        <form action="">
          <input type="text" placeholder="请输入账号" required>
          <input type="password" placeholder="请输入密码" required>
          <p class="forgetPwd">忘记密码</p>
          <input type="submit" class="loginBtn" value="登录"></button>
          <p class="no" onclick="changeFz()">没有账号？立即注册</p>
        </form>
      </div>
      <div class="box-fan">
        <h3>注册新用户</h3>
        <form action="">
          <input type="text" placeholder="请输入账号" required>
          <input type="password" placeholder="请输入密码" required>
          <div class="yzmBox">
            <input type="text" placeholder="请输入验证码">
            <button class="btn">发送</button>
          </div>
          <p class="forgetPwd">忘记密码</p>
          <input type="submit" class="loginBtn" value="登录"></button>
          <p class="no" onclick="changeFz()">已有账号，去登陆</p>
        </form>
      </div>
    </div>
  </body>
</html>
<script>
  var isFz = false

  function changeFz() {
    isFz = !isFz
    if (isFz) {
      var boxClass = document.getElementById("reverse")
      boxClass.className = "box box-fz"

    } else {
      var boxClass1 = document.getElementById("reverse")
      boxClass1.className = "box"
    }
  }
</script>

本篇文章来源于微信公众号: 雪天前端

免责声明
    本网站在国家相关法律法规规定的范围内，只按现有状况提供文章发布第三方网络平台服务，本网站及其所有者非交易一方，也非交易任何一方之代理人或代表；同时，本网站及其所有者也未授权任何人代表或代理本网站及其所有者从事任何网络交易行为或做出任何承诺、保证或其他类似行为，除非有明确的书面授权。
    鉴于互联网的特殊性，本网站无法鉴别和判断相关交易各主体之民事权利和行为能力、资质、信用等状况，也无法鉴别和判断虚拟交易或正在交易或已交易之虚拟物品来源、权属、真伪、性能、规格、质量、数量等权利属性、自然属性及其他各种状况。因此，交易各方在交易前应加以仔细辨明，并慎重考虑和评估交易可能产生的各项风险。

扫描二维码推送至手机访问。

版权声明：本文由点度点度金讯时代-BLOG发布，如需转载请注明出处。

本文链接：https://www.lmwmm.com/post/2831.html

分享给朋友：
返回列表

上一篇：英特尔财报低于预期股价重挫，PG电子领域新格局！

下一篇：上百个精美网页Loading效果

“网页3D效果(一键复制)” 的相关文章

雨林木风 Win10 64位全新系统下载

雨林木风 Win10 64位全新系统下载

下载地址 系统文件较大，推荐使用“迅雷下载”，速度更快、更稳定！[Download]资源名称：雨林木风 Win10 64位全新系统下载文件大小：3.96G下载地址1：http://down.wzhyyds.xyz:81/deep/...

Adobe Audition 2020「Au 2020」破解版

Adobe Audition 2020「Au 2020」破解版

基本简介Au cc2020中文版是一款功能丰富的音频编辑工具。Adobe Audition CC 2020官方版涵盖了变调器、咔嗒声、爆音消除器、生成噪声、立体声扩展器等等功能，满足用户的多种音频处理需求。通过Au cc2020软件用户可以...

Adobe Photoshop 2020「Ps 2020」破解版

Adobe Photoshop 2020「Ps 2020」破解版

      ps 2020破解版是一款由Adobe公司推出的非常优秀的图像编辑处理工具，ps2020破解版有图像制作、图像扫描、编辑修改、广告创意、图像输入等功能。ps 2020破...

5款良心实用的软件推荐，真正的新系统必备，绝对刷新你的认知！

5款良心实用的软件推荐，真正的新系统必备，绝对刷新你的认知！

 1.Final2x 图片放大工具，免费开源 【开源项目】2.Gopeed 一款支持全平台的下载器 【官方下载】3.视频压缩神器 【下载链接】4.Optimizer 堪称是 Windows 系统上最好...

Windows 10 发布极限精简版！(Tiny10 x64 23H1) 支持 64 位系统和中文，只需7.8G空间

Windows 10 发布极限精简版！(Tiny10 x64 23H1) 支持 64 位系统和中文，只需7.8G空间

昨日，开发者 NTDEV 发布了 tiny10 2303，面向那些需要具有较小磁盘占用空间和最新更新的轻量级现代 Windows 10 版本的用户 下载地址：【链接直达】[Download]资源名称：tiny10 23h1 x64...

[网店商城] 分享一款免费开源的基础销售功能的RF微商城源码一端发布多端通用适配H5/微信小程/App

[网店商城] 分享一款免费开源的基础销售功能的RF微商城源码一端发布多端通用适配H5/微信小程/App

源码介绍：微商城一款免费开源的基础销售功能的微商城源码。基于 RageFrame2 的一款免费开源的基础销售功能的微商城，前端基于 uni-app，一端发布多端通用，目前已经适配 H5、微信小程序、QQ小程序、Ios App、Android...

黑公网安备黑公网安备 23010302001359号  黑ICP备2022000645号-1  全站地图

Powered By Z-BlogPHP. Theme by TOYEAN.