Tag: css3

更改屏幕宽度时隐藏导航栏上的元素

我目前正在使用Bootstrap v3.3.0,我想当用户更改屏幕宽度时,导航栏的最后一个元素(下拉列表前的LINK)消失并添加到下拉列表中。 我可以使用Bootstrap或任何JS库吗? 导航栏示例: http : //getbootstrap.com/examples/navbar/ 提前致谢。

滚动时缓动旋转动画

我有一个元素,我使用jquery / css3来滚动旋转。 麻烦的是滚动时有点跳跃,当你停下来时会立即停止。 我希望它更像是一个平滑的旋转,当你开始滚动时开始,然后在你停止滚动后缓慢停止,而不是每次滚动轮移动时旋转一组度数。 我的代码和链接如下: http://pollenbrands.com/rjj/ (向下滚动至100%水果) var angle = 1; jQuery(window).scroll(function() { jQuery(“.rotate”).css(‘-moz-transform’, ‘rotate(‘+angle+’deg)’).css(‘-webkit-transform’, ‘rotate(‘+angle+’deg)’).css(‘-o-transform’, ‘rotate(‘+angle+’deg)’).css(‘-ms-transform’, ‘rotate(‘+angle+’deg)’); angle+=6; if(angle==360) { angle=0; } });

如果元素是display:none; 在媒体查询中他们仍然加载?

今天刚考虑这个,这让我很好奇。 如果我在网站上有一些元素或div,例如video标记,如果我将此video标记设置为display:none; 在移动用户的媒体查询中。 当这些用户在他们的设备上查看该网站时,该网站是否仍会加载video及其元素,然后隐藏它们? 或者它是否阻止元素被加载? 它会影响加载时间吗? 我有一个用于桌面的html5video网站,当缩小时,它用移动设备的gif替换这些元素,因为html5无法在ios设备上自动播放。 这是否意味着选择display none会阻止video或其他任何元素影响移动加载时间?

单击使用相同的页面锚点后保持链接处于活动状态

基本上我有一个具有相同页面锚点的固定导航栏,我想在点击链接并将其带到页面的该部分后保持链接处于活动状态。 如果到另一个页面的链接,这很简单,但我无法弄清楚如何在这里。 这就是我所拥有的。 我将向您展示第一个链接和部分,因为解决方案很可能与以下链接相同。 我没有写任何CSS,因为我不知道该怎么做。 Scheduling A New WayTo ScheduleEverything One calendar that lets you manage schedules for your team and your spots, all in one calendar, with options of sharing your own personal schedule, and you can accept and decline appointments with any device.

无论如何将css3过渡动画添加到jQuery事件上的元素

有没有办法在jQuery事件上添加css3动画,例如: .box{ width:100px; height:100px; bakground-color:#000; } .animate{ width:0px; -webkit-transition-property: width; -webkit-transition-duration: 500ms; -moz-transition-property: width; -moz-transition-duration: 500ms; } click me to animate $(‘button’).click(function(){ $(‘.box’).addClass(‘animate’); });

IE 10和11中的灰度?

我试图找出如何让灰度在I​​E 10和11中工作。我有一个图标网格,我想要灰度。 它的构建如下: Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus. Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus. 第一个数字是全彩色。 第二个图包含“锁定灰度”类,使整个图形变灰。 它在Chrome,Safari和Firefox中运行良好。 但它在IE中不起作用。 我已经查看了各种解决方案,并试图实现一些jQuery插件(例如这一个和这个 ),但似乎它们是专门为灰度图像编写的。 有没有办法在IE中灰度图像不是图像? 我的图标包含在带蓝色边框的方形蓝色div中,我想强制一切都是灰色的。 更新:这是一个有问题的图标的小提琴 。

Div不会自动计算高度

我有一个包含2个元素的div。 第一个元素是span ,第二个元素是input ,如: FirstName container div的width设置为300px ,我希望它会根据孩子的身高自动计算它的高度。 这里计算它的高度,但不包括input元素高度。 这里发生了什么? 编辑 我的容器position : absolute因为某些原因我无法设置overflow : hidden

jQuery UI使效果不那么突然和生涩

我有一个小的切换边栏,我正在使用jQuery UI。 问题是这是非常生涩的行为。 无论如何它可能看起来像左/右平滑滚动? 我试图让shell像内部容器滑动一样顺畅地滑动。 目前,一旦内部div完成宽松,它就会攫取。 $(“.snapper”).click(function() { $(“.sidebar-wrapper”).toggle(“slide”, { direction: “right” }, 1000); $(“#sidebar”).css(“width” , “auto”); }); 在线示例。 http://frontendtrends.com/sidebar/

CSS Image会导致菜单出现问题

我有这个JSBIN菜单代码。 我一直试图在菜单中间放一张图片,就像JSBIN代码一样。 但是有两个问题: 从左侧菜单(“关于我们”)到边缘的距离和与右侧菜单的距离(“交换参考线”)是不同的。 图像会降低菜单。 我试图使用line-height设置并尝试使用图像的位置,但它没有帮助。 谢谢!

CSS菜单浮动半左半右

我想要一种方法让我的菜单浮动半左半。 因此,导航栏中间的徽标就像它一样浮动中心,然后一半菜单项位于菜单的左侧,另一半位于右侧。 这是我目前代码的工作目录: http : //theaamgroup.com/david-programs/brandit/ 基本上如果那不清楚我想在这里制作这个导航栏: 看起来像这样: HTML ‹ › Home About Contact Dropdown Action Another action Something else here Nav header Separated link One more separated link CSS /* GLOBAL STYLES ————————————————– */ body { padding-bottom: 40px; -webkit-text-size-adjust: none; -webkit-appearance: none; font-family: sans-serif; min-height: 416px; background-image: url(‘../img/bkg.png’); background-repeat: repeat; } /* CUSTOMIZE THE […]