Tag: css3

如何学习matrix矩阵

类似图中这样的三维变换,比如旋转、倾斜,可以用matrix矩阵来表示,但是我不太明白背后的原理,不知道该学哪些东西入手,高数的线性方程,这些天复习了下后也只是会计算,不知道该怎么和图形结合起来

sublime text2 的less2css插件怎么使用

要怎么样才能在保存less文件的时候,自动生成css文件 这四个选项中前3个可以干嘛的?求详解?刚下软件不久,小白一个!!!

CSS3 动画是表现还是行为?

我们常说表现、内容、行为要分离,在CSS3之前时我们分辨得很清楚。但是现在发现利用CSS3你可以做纯CSS的选项卡,纯CSS的下拉菜单,可以实现缓动效果,动画效果,利用 input[type=checkbox]:checked还可以实现点击响应。CSS3干了不少JavaScript一直在做的事。CSS3 的 content 还可以生成HTML内容。这个时候如何理解“表现、内容、行为”的分离? 看了这篇文章 谈谈我的“分离”观 还是疑惑。我们说不能认为脚本就是行为,脚本可以生成内容也可以改变表现,但里面提到“行为,指由用户触发的由脚本与服务器端的交互”,那么弹窗也不算行为?或者说到了现在,已经没必要分清楚?你怎么理解?

CSS3 中 transition-duration 对 display: none/block 属性无效?

代码如下面所示,我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换。但是,实际展示的时候,width 变换确实用了2秒,但display并没有,请问这是为什么呢? HTML <div class=’transition-example’ id=’width-duration’> <div class="box">o</box> </div> CSS .transition-example { width: 40px; height: 40px; background: red; margin: 30px; color: #FFF; font-size: 20px; } #width-duration, .box { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } #width-duration:hover { width: 80px; } .box { display: none; } #width-duration:hover […]

怎么把<footer class="footer">放到页面的尾部

请问怎么通过css可以把footer放到页面的最下面。

假如你的网站要兼容IE8,你还会用CSS3的tr:nth-child(odd)来画斑马纹吗?

首先一点,要兼容IE8,肯定需要这句$("tr:nth-child(odd)").css("background","#999"); 这句JS,已经处理了全部的浏览器了,实现斑马纹还需要用到CSS吗? tr:nth-child(odd){ background: #999; } 你会怎样实现斑马纹?

CSS3 animation动画,循环间的延时执行该怎么弄?

如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的。 .item{ webkit-animation: revolving 1s 3s infinite; animation: revolving 1s 3s infinite; } @-webkit-keyframes revolving{ 0%{ -webkit-transform: perspective(700px) rotateX(90deg); } 50%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); } }

使用 CSS3 的 Media Query 浏览器会加载其他不同分辨率的 css 文件么

比如我分开写了两个根据分辨率不同情况下的 css 样式: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 那么,我在宽度小于 400px 的分辨率下,smallScreen.css 是否会同时被加载? 如果是,那么当调整分辨率时大于 400px 小于 600px,smallScreen.css 才开始加载么?

网页上的img引用的图片如何适配retina屏幕呢?

如果是CSS里的,可以用下面的代码适配,但是如果是的又该怎么适配呢? @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { }

有好的Blog的CSS样式吗?

RT,最近想写个Blog,但是苦于设计CSS,除了Bootstrap之外,有比较好的CSS模板吗?

.