个人中心
gpt4 book ai didi

jquery - Css 水平显示动画并停止 50%

转载 作者：行者123 更新时间：2023-11-28 14:37:31 26 4
gpt4 key购买 nike

我试图让红色封面背景向左滑动并在大约 50% 处停止，因此左侧 col-6 背景保持红色，右侧 col-6 清晰。目前我是通过按钮事件触发的，但最终会在页面加载时自动执行。我现在正在旋转 90 度。如何通过 css 变换/动画执行此幻灯片动画？我是 CSS 动画的新手，不确定我是否以正确的方式处理这个问题。有没有更好的方法来处理这种类型的显示动画？

我正在尝试按照网上看到的这个演示进行操作: https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design# 

.get-app-wrap {
  overflow: hidden;
}
.get-app-wrap .animate-wrap {
  position: relative;
}
.get-app-wrap .animate-wrap::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background-color: #d4272e;
  top: 0;
  left: 0;
  bottom: 0;
  transform: rotate(0deg);
  transform-origin: 0px 0px;
  transition: transform linear 0.7s;
}
.get-app-wrap .animate-wrap.animated::after {
  transform: rotate(90deg);
}
.get-app-wrap .app-texts {
  color: #000;
}
.get-app-wrap .app-texts .app-text-padding {
  padding-right: 11rem;
  padding-left: 11rem;
}
.get-app-wrap .app-texts hr {
  color: #000;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
    <script src="./index.js"></script>
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />


    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>

    <div class="get-app-wrap mt-5">

        <div class="row animate-wrap">
            <div class="col-sm-6 pr-0">
                <div class="app-texts ">
                    <div class="app-text-padding pt-5 pb-5">
                        <h1>App headline here</h1>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
                            quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
                            aperiam autem!</p>
                        <h3 class="">Sub Headline Here</h3>
                        <ul>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                        </ul>
                        <hr class="pr-0">
                        <div>
                            <h3 class="">Get the Apps</h3>
                            <div class="row">
                                <div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
                                        alt="" class="img-fluid"></div>
                                <div class="col-sm-3">
                                    <img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
                                        alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 ">
                <div class="app-image text-center pt-3">
                    <img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
                </div>
            </div>

        </div>
    </div>
    <button id="reveal-button">Reveal</button>

<script>

$("#reveal-button").on('click', function() {
	$(".animate-wrap").toggleClass('animated');
});
</script>
</body>

</html>

最佳答案

您应该使用 scaleX 属性而不是旋转

.get-app-wrap .animate-wrap.animated::after {
  transform: scaleX(.32);
}

Here你有代码笔，如果有帮助请告诉我!

你可以添加一个类到带有文本的div，例如.show-text

    <div class="row animate-wrap">
        <div class="col-sm-6 show-text pr-0">

然后是这个

.col-sm-6.show-text{
  z-index: 2;
}

关于jquery - Css 水平显示动画并停止 50%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53290561/

26 4 0
文章推荐： swift - 玩家在移动时口吃 - Sprite Kit
文章推荐： ios - 我如何判断我的计时器是否按时进行？
文章推荐： css - Safari 不会使用@font-face 使用文本对齐对齐
文章推荐： ios - 如何更新 Firebase-Database 树中的最新条目？
行者123
个人简介

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

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