当前位置：首页 > 游戏攻略 > 正文内容

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

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

 


旋转木马


网页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://lmwmm.com/post/2831.html

分享给朋友：
返回列表

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

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

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

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…

永久免费VPN，还不限流量，直接把付费VPN打趴下！

永久免费VPN，还不限流量，直接把付费VPN打趴下！

熟悉互联网的大牛，都知道1.1.1.1这个免费DNS地址，现在让互联网更安全，退出免费VPN。还不来试试?您只需轻轻一按即可获得更安全的互联网。当互联网建成时，计算机不是移动的。他们坐在数据中心旁边的办公室里。互联网已经发生了变化，但30年…

索尼发布PS5「9.00」系统更新：PG全新游戏互动悉数登场！

索尼发布PS5「9.00」系统更新：PG全新游戏互动悉数登场！

索尼发布PS5主机固件更新至「9.00」版本，此次更新文件大小约为1.2GB。该版本的主要改进在于提升DualSense无线控制器的喇叭音量，并通过降噪技术减少按键时产生的背景噪音，以改善PG游戏试玩过程中的语音聊天。新增功能包括电源指示灯…

AI编程助手Devin登场！PG游戏编程将因此彻底改变！

AI编程助手Devin登场！PG游戏编程将因此彻底改变！

随着生成式人工智能（AI）的崛起，越来越多人开始担心自己的工作是否会被AI所取代。如今，连程序员都感到压力山大！新兴公司Cognition在成立不到60天的时间里，宣布推出了全球首位「AI工程师」Devin，这一消息在PG SOFT电子科技…

苹果加速AI发展：悄悄收购新创公司改写BBIN游戏未来

苹果加速AI发展：悄悄收购新创公司改写BBIN游戏未来

苹果CEO蒂姆·库克曾多次宣称，苹果将在生成式人工智能领域发挥重要作用，并表示今年将会公布相关成果。据《BBIN GAMES》电子游戏报道，苹果在今年悄悄收购了加拿大初创企业DarwinAI，这标志着苹果在人工智能领域的新一步发展。据BBI…

黑公网安备 黑公网安备 23010302001359号    黑ICP备2022000645号-1    全站地图 系统登录

Powered By Z-BlogPHP. Theme by TOYEAN.