个人中心
gpt4 book ai didi

html - 如何动画从顶部下降的 div 并旋转？

转载 作者：行者123 更新时间：2023-12-03 17:09:20 25 4
gpt4 key购买 nike

大家好，我正在尝试制作像手机从顶部掉下来的动画，当它到达底部时它会旋转并倾斜以使其看起来是 3d 形状，但似乎我制作的动画在它到达时一直闪烁100% 在关键帧中，任何人都可以向我展示我如何实现这一目标的技巧、技巧或示例吗？谢谢这里是我的代码希望它有帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script defer src="brands.js"></script>
  <script defer src="solid.js"></script>
  <script defer src="fontawesome.js"></script>
    <style type="text/css">
        .phone{
            width: 600px;
            height: 1080px;
            background-color: black;
            border-radius: 9%;
            margin: 50% auto;
            position: relative;
            animation: bounce 2s ease-in-out forwards;
        }
        @keyframes bounce {
        0%   { transform: translateY(-500px); }
        50%  { transform: translateY(0); }
        70% { transform: translateY(-200px); }
        100%{
            transform: translateY(-50px) rotate(30deg) skew(5deg,347deg);;
        }
        }
        .inner-phone{
            width: 553px;
            height: 1039px;
            background-color: #f5f7fa;
            position: absolute;
            left: 9px;
            top: 14px;
            border-radius: 9%;
            overflow: hidden;
        }
        .inner-phone:before{
            content: "";
            width: 200px;
            height: 10px;
            background-color: black;
            position: absolute;
            bottom: 50px;
            left: 0;
            right: 0;
            margin:auto;
            border-radius: 50px;
            z-index: 1;
        }       
        .inner-slider{
            width: 330px;
            height: 170px;
            position: relative;
            margin-left: 201px;
            margin-top: 30px;
            perspective: 1400px;
            transform-style: preserve-3d;
            z-index: 10;
        }
        .circle{
          position: absolute;
          width: 150px;
          text-align: center;
          height: 150px;
          left: 0;
          top: 0;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          cursor: pointer;
          transition: transform 400ms ease;     
          background-color: red;
          box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
          transform: translate3d(0%, 0, 0px);
          transition: 0.5s ease-in-out;
        }
        .circle label{
            line-height: 10px;
        }
        .icon{
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 44px;
          font-size: 30px;
        }
        .one {
          background: tomato;
          transform: translate3d(0%, 0, 0px);
        }

        .two {
          background: yellowgreen;
          transform: translate3d(73%, 0, -450px);
        }

        .three {
          background: dodgerblue;
          transform: translate3d(148%, 0, -1045px);
        }

        .four {
          background: slateblue;
          transform: translate3d(-239%, 0, -1045px);
        }

        .five {
          background: violet;
          transform: translate3d(-110%, 0, -450px);
        }
        .inner-screen{
            width: 100%;
            height: 100%;
        }
        .chat-screen{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .container-chat{
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            transition: all 0.5s ease-in;
        }
        .chat-item{
            min-width: 100%;
        }
        .ci1{
            background-color: tomato;
        }
        .ci2{
            background-color: yellowgreen;
        }
        .ci3{
            background-color: dodgerblue;
        }
        .ci4{
            background-color: slateblue;
        }
        .ci5{
            background-color: violet;
        }
        #wrapper {
          width: 100%;
          margin: 200px auto;
        }

        body {
          font-family: Arial;
          background: #fff;
        }

        .chat ul {
          margin: 0px;
          padding: 0px;
          list-style: none;
        }

        .message-left .message-time {
          display: block;
          font-size: 12px;
          text-align: left;
          padding-left: 30px;
          padding-top: 4px;
          color: #ccc;
          font-family: Courier;
        }

        .message-right .message-time {
          display: block;
          font-size: 12px;
          text-align: right;
          padding-right: 20px;
          padding-top: 4px;
          color: #ccc;
          font-family: Courier;
        }

        .message-left {
          text-align: left;
          margin-bottom: 16px;
        }

        .message-left .message-text {
          max-width: 80%;
          display: inline-block;
          background: #fff;
          padding: 15px;
          font-size: 14px;
          color: #999;
          border-radius: 30px;
          font-weight: 100;
          line-height: 1.5em;
        }

        .message-right {
          text-align: right;
          margin-bottom: 16px;
        }

        .message-right .message-text {
          line-height: 1.5em;
          display: inline-block;
          background: #5ca6fa;
          padding: 15px;
          font-size: 14px;
          color: #fff;
          border-radius: 30px;
          line-height: 1.5em;
          font-weight: 100;
          text-align: left;
        }

        .chat {
          padding: 20px;
        }

        .chat-container {
          height: 400px;
          overflow: scroll;
          overflow-y:hidden;
          overflow-x: hidden;
          padding-right: 16px;
        }

        .spinme-right {
          display: inline-block;
          padding: 15px 20px;
          font-size: 14px;
          border-radius: 30px;
          line-height: 1.25em;
          font-weight: 100;
          opacity: 0.2;
        }

        .spinme-left {
          display: inline-block;
          padding: 15px 20px;
          font-size: 14px;
          color: #ccc;
          border-radius: 30px;
          line-height: 1.25em;
          font-weight: 100;
          opacity: 0.2;
        }

        .spinner {
          margin: 0;
          width: 30px;
          text-align: center;
        }

        .spinner > div {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          display: inline-block;
          -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
          animation: sk-bouncedelay 1.4s infinite ease-in-out both;
          background: rgba(0,0,0,1);
        }
         
        .spinner .bounce1 {
          -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
        }

        .spinner .bounce2 {
          -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-bouncedelay {
          0%,
          80%,
          100% {
            -webkit-transform: scale(0)
          }
          40% {
            -webkit-transform: scale(1.0)
          }
        }

        @keyframes sk-bouncedelay {
          0%,
          80%,
          100% {
            -webkit-transform: scale(0);
            transform: scale(0);
          }
          40% {
            -webkit-transform: scale(1.0);
            transform: scale(1.0);
          }
        }
        .rich-message{
            width: 100%;
            height: 440px;
            background-size: 100%;
            background-position-x:0px;
            background-position-y:26px;
            margin-top: 80%;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="inner-phone">
            <div class="inner-screen">
                <div class="chat-screen">
                    <div class="container-chat">
                        <div class="chat-item ci1">
                            <div id="wrapper">
                              <div class="chat">
                                <div class="chat-container">
                                  <div class="chat-listcontainer">

                                    <ul class="chat-message-list">
                                    </ul>

                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="chat-item ci2"> 
                        </div>
                        <div class="chat-item ci3">
                        </div>
                        <div class="chat-item ci4">
                        </div>
                        <div class="chat-item ci5">
                        </div>                                  
                    </div>
                </div>
                <div class="rich-message">
                </div>
            </div>
        </div>
        <div class="phone-drop-shadow"></div>
    </div>
    <div class="portal-phone">
        
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript">
    var dd = document.getElementsByClassName('circle');
    var chatMessages = [{
      name: "ms1",
      msg: "Who are you?",
      delay: 1000,
      align: "right",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms2",
      msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
      delay: 6000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms3",
      msg: "Could you describe Freedactics in one sentence?",
      delay: 3000,
      align: "right",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms4",
      msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
      delay: 7000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms5",
      msg: "And the longer version?",
      delay: 3000,
      align: "right",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms6",
      msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
      delay: 11000,
      align: "left",
      showTime: false,
      time: "19:58"
    },
    {
      name: "ms7",
      msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
      delay: 10000,
      align: "left",
      showTime: false,
      time: "19:58"
    },
    {
      name: "ms8",
      msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
      delay: 8000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms9",
      msg: "What makes you different from other learning platforms?",
      delay: 4000,
      align: "right",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms10",
      msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
      delay: 8000,
      align: "left",
      showTime: false,
      time: "19:58"
    },
    {
      name: "ms11",
      msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
      delay: 4000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms12",
      msg: "What is your vision for the future?",
      delay: 4000,
      align: "right",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms14",
      msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
      delay: 9000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms15",
      msg: "Thanks! Something you want to add?",
      delay: 3000,
      align: "left",
      showTime: true,
      time: "19:58"
    },
    {
      name: "ms16",
      msg: "You are welcome! Yes, check out freedactics.com!",
      delay: 9000,
      align: "left",
      showTime: true,
      time: "19:58"
    }
                       ];
    var chatDelay = 0;

    function onRowAdded() {
      $('.chat-container').animate({
        scrollTop: $('.chat-container').prop('scrollHeight')
      });
    };
    $.each(chatMessages, function(index, obj) {
      chatDelay = chatDelay + 4000;
      chatDelay2 = chatDelay + obj.delay;
      chatDelay3 = chatDelay2 + 10;
      scrollDelay = chatDelay;
      chatTimeString = " ";
      msgname = "." + obj.name;
      msginner = ".messageinner-" + obj.name;
      spinner = ".sp-" + obj.name;
      if (obj.showTime == true) {
        chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
      }
      $(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
      $(msgname).delay(chatDelay).fadeIn();
      $(spinner).delay(chatDelay2).hide(1);
      $(msginner).delay(chatDelay3).fadeIn();
      setTimeout(onRowAdded, chatDelay);
      setTimeout(onRowAdded, chatDelay3);
      chatDelay = chatDelay3;
    });    
    </script>
</body>
</html>

最佳答案

使用 css rotate3d 更容易实现您想要实现的目标功能。
您可以通过使用 transform: rotate3d(-0.3, 1, 0, 390deg) 来模拟倾斜元素的旋转。 :

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: rotate 1s infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate3d(-0.3, 1, 0, 390deg); /* 405 = 360 + 45 */
  }
}
<div></div>

因此，在您的情况下，只需添加坠落动画，您就会得到手机掉在地上的这种印象: 

body {
  height: 350px;
  position: relative;
}

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  top: 0%;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: fall 1s infinite;
}

@-webkit-keyframes fall {
  25% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 45deg);
  }
  100% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 405deg);
    /* 405 = 360 + 45 */
  }
}
<div>
  <p>
    A text...
  </p>
</div>

关于html - 如何动画从顶部下降的 div 并旋转？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66668131/

25 4 0
文章推荐： javascript - 如何根据嵌套对象数组的对象搜索输入查找所有匹配值
文章推荐： c++ - 程序在 QT opencv 中意外完成
文章推荐： reactjs - React-Number-Format 将值作为 float 传递给验证
文章推荐： python - 用 Python 绘制 Highcharts 图
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com