Question

我正试图在视口中从我的页面左侧滑入一个框，但是它使我的页面太宽而且一旦滚动过去我就无法让它从视口中反转它。这就是我所拥有的：

.box {
 background: #2db34a;
 border-radius: 6px;
 cursor: pointer;
 height: 95px;
 line-height: 95px;
 text-align: center;
 transition-property: background;
 transition-duration: 1s;
 transition-timing-function: linear;
 width: 95px;
 margin-top: 500px;
 }


#slide {
position: absolute;
right: -100px;
width: 100px;
height: 100px;
background: blue;
overflow: hidden;
animation: slide 0.5s forwards;
animation-delay: 1s
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
 }

@-webkit-keyframes moveToRight { 
 from { }
 to { -webkit-transform: translateX(100%); }
 }
@keyframes moveToRight { 
  from { }
 to { -webkit-transform: translateX(100%); transform: translateX(100%); }
 }

@-webkit-keyframes moveFromRight {
 from { -webkit-transform: translateX(100%); }
  }
@keyframes moveFromRight {
 from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

</style>

</head>


<body>

<div id="slide" class="box">Box</div>

</body>
</html>

我也不能使用任何插件来执行此操作。

CSS过渡制作页面太宽

0 个答案: