css自左向右过渡,CSS 3从左边的过渡中滑入(CSS 3 slide-in from left transition)

CSS 3从左边的过渡中滑入(CSS 3 slide-in from left transition)

有没有一个跨浏览器解决方案来生成一个只有CSS的幻灯片转换，没有javascript？ 以下是html内容的一个例子：

},

function(){

$('.menu').animate({

left: "0px"}, 200);

...

问题是background-image无法动画，而css渐变实际上是浏览器渲染的图像。 您可以通过更改背景位置或使用不透明度来模拟渐变上的动画 这里有一篇关于动画渐变的文章： http ： //www.impressivewebs.com/animating-css3-gradients/ 有关可动画属性的列表，请查看http://www.w3.org/TR/css3-transitions/#animatable-properties The problem is that background

...

我通常做的是添加另一个名为overlay的元素，并在切换导航项以产生该效果时切换它。 我还会将导航按钮从导航中移出，以便您可以给它一个绝对位置，因为您需要应用z-index以在启用叠加时使其保持可见状态。 见下文......希望它有所帮助！ $(document).ready(function() {

var toggle = $('.toggle');

var osNav = $('.offScreen-nav');

var overlay = $('.overlay');

va

...

这是一个适合您的解决方案。 https://jsfiddle.net/smaefwrp/2/

html,

body,

img {

position: absolute;

top:0;

left: 0;

...

我认为当“悬停”出现在class btn的css行时会出现这个问题： .btn {

padding: 1rem 2rem;

}

我还注意到，直到我在https://codepen.io中测试它之前，它看起来没问题。 你所指的边界是左边的问题。 我在你的代码之前做了一些修改： 您可以访问此笔并播放代码。 body {

margin: 0;

padding: 0;

font-family: Arial, Hel

...

你只需要重复属性。 而不是 transition: left, right linear 0.25s;

尝试 transition: left linear 0.25s, right linear 0.25s;

You just need to repeat the attributes. So instead of transition: left, right linear 0.25s;

try transition: left linear 0.25s, right linear

...

这是一个jquery解决方案(因为你在评论中对jquery解决方案说了) $(".next").click(function(){

var current = $(".container").css("left");

if(current == "-100px"){

current="-200px";

}

else if(current == "0px"){

current="-100px";

}

$(".container").css("l

...

单击.button打开滑块。 单击滑块外的任何位置(包括按钮)关闭它 var isOpened = false;

$(document).click(function(e) {

if(isOpened && e.target.className=='slide-in') {

$(".slide-in").removeClass("active");

isOpened = false;

} else if(!isOpened && e.target.className=='b

...

我改变了你的CSS。 这不是完整的解决方案。 你将不得不玩一点来完善它。 但我认为它几乎接近你想要达到的目标。 工作演示 我只会添加我做的更改的CSS。 .menu-1990:hover > .child {

display:block;

opacity:1;

margin-left:60px;

height:auto;

-webkit-transition-duration: 2s;

-moz-transition-duration: 2s;

...