Question

我正在尝试使红色封面背景向左滑动并停止在大约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>

Answer 1

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

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

Here您有一个Codepen，请告诉我是否有帮助！

您可以将带有文本的类添加到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;
}

CSS显示动画水平并停止50％

1 个答案: