Tag: css3
导航进度条
我正在尝试建立进度菜单栏（类似于piccsy投资者的一个http://www.piccsy.com/investors/ ） 它测量页面的高度并进度％。 关于如何做的任何想法？ 谢谢，尼古拉。
添加和删除两个类之间添加动画的问题
你能不能看看这个演示，让我知道为什么我无法在添加和删除fixed-top和fixed-bottom两个类之间生成平滑过渡（类似Smooth Scroll），而我已经在其中添加了以下css角色？ -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; var lastScrollTop = 0; $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st > 500) { $(‘.box’).removeClass(“fixed-bottom”).addClass(“fixed-top”); } } else { if (st < 500) { $('.box').removeClass("fixed-top").addClass("fixed-bottom"); } } lastScrollTop = st; }); […]
如何使用css动画将div移动到水平然后垂直？
我想使用css动画将div移动到水平然后垂直，如下图所示。 黑色箭头线表示我想要移动绿色框的方式。 但是水平移动后的盒子对角移动，如蓝色箭头所示，而不是垂直向下箭头显示垂直移动。 .mybox { width: 100px; height: 100px; background-color: lawngreen; } .myanimation{ -webkit-animation: simple 3s forwards ease; } @-webkit-keyframes simple { 50% { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); -o-transform: translateX(300px); transform: translateX(300px); } 100% { -webkit-transform: translateY(300px); -moz-transform: translateY(300px); -ms-transform: translateY(300px); -o-transform: translateY(300px); transform: translateY(300px); } } 这是plunker链接
模态框与css关键帧冲突
我创建了一个模态框，工作正常！ 之后，我解决使用css关键帧插入fadeInUp效果。 但是，在完成此操作后，模态框失去了居中位置。 谁能帮我解决这个问题？ 提前致谢！ 模态框与关键帧conflit DEMO 原始模态盒DEMO
幻灯片动画在Firefox中运行良好但在chrome中断断续续
我正在建立一个网站，当你点击另一个位于页面左侧，顶部或右侧的div的按钮时，如果将中心div推出屏幕。 左，上和右div将使用jquery ajax加载，并使用css3进行动画处理。 这是我正在谈论的页面： http://www.uvm.edu/~areid/homesite/index.html 尝试在Chrome和Firefox中单击左眼。 你会看到Firefox中的动画很流畅但是在chrome中断断续续。 有谁知道为什么会发生这种情况？ 我也想知道是否有人知道我如何可能加速网站/使过渡看起来更顺畅。 感谢你们的帮助 最好， 凯蒂
将子宽度设置为纯CSS中父级的高度
我可以在纯CSS中将child-div的宽度设置为等于parent-div 高度的宽度吗？ JsFiddle演示 到目前为止，我一直在使用jQuery： $(“#child-div”).width($(“#child-div”).parent().height()); 这在Pure CSS中是否可以实现？ 出于某些原因，我需要将它放在Pure CSS中。 这是我的HTML： Hello 和CSS： #parent-div{ background:#ddd; height:80%; width:30%; position:absolute; } #child-div{ position:relative; background:#333; color:#FFF; transform: rotate(270deg); transform-origin: 0 0 ; top:100%; height: /* What ???? */; } 任何诡计？
使用JavaScript / JQuery在页面加载时将相对/视口大小转换为固定大小
希望你过得愉快。 我目前正在开发一个网站，其中几乎所有的测量（字体大小，填充，边距，宽度，高度等）都是使用视口单元vw和vh制作的。 我使用这些单位是因为它们是最好的，使页面看起来像我想要的不同的屏幕分辨率，不像像素大小。 我想知道是否可能，是在页面加载后，得到所有这些测量的非相对值（例如，如果我说1vw，我的屏幕是1000px，非相对值应该是10px）和用那些替换我的css3表上的相对值。 这可能听起来很荒谬，但我的观点是允许用户放大和缩小页面，并实际放大或缩小。 目前，无论用户做什么样的缩放，页面都保持不变，除了我有的重复图像。 我想在javascript中这样做，因为我的语言是我最熟悉的html中的客户端脚本，因为我的java起源。 或者，也许有一个我不知道的function，只是在放大时忽略相对值？ 如果是的话，请告诉我。
3D转换（translate3D）似乎导致移动设备上缓慢的jQuery动画
我正在使用CSS翻译3D并缩放3D以获得响应式导航菜单。 在触摸设备上，更具体地说，iPhone，它在同一页面上导致单独的jQuery动画执行缓慢，几乎就像在动画时闪烁一样。 任何人都可以解释这个问题吗？ 如果它有任何相关性，我使用的是SASS： nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include transition-delay( ease, 0s ); @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) ); @include transform-origin( 50% 0% ); } } } 下面是一个缓慢运行的jQuery片段： this.container.filter(‘:visible’).animate({ ‘left’: ‘-=’ + self.childWidth + ‘px’ }, […]
如何使用css或jquery创建图像（见图）
你知道如何采取这样的效果： 图像 徘徊在图片上？ 我一直在搜索css和jquery，但仍然没有达到我需要的。 请给我一个解决方案来做到这一点。 非常感谢！ （抱歉我的英文）
通过页面更改保持div打开？
我一直试图在页面底部留下一个div“页脚”，并通过页面更改保持打开状态。 我已经通过在主内容div上使用JQuery的.load函数来实现这一点，但是，使用该方法，当有人访问不同的页面时，URL保持不变。 有没有办法保持链接更改URL，但保持div打开？ 我计划通过所述div播放音乐，因此它无法在页面切换之间关闭，或者音乐将停止/必须重新缓冲。
