CSS3
文章平均质量分 55
kongjunchao159
这个作者很懒,什么都没留下…
展开
-
nth-child和nth-of-type区别
css3中nth-child和nth-of-type的区别:例子: 在这里,p:nth-child(2)和p:nth-of-type(2)效果一样,都是选择第二个P元素 在这里,p:nth-child(2)会选择第一个P元素,而p:nth-of-type(2)依然会选择第二个P元素解释:p:原创 2015-08-06 15:45:24 · 391 阅读 · 0 评论 -
CSS绘制三角形
使用css绘制三角形,主要利用了盒模型的border属性,当盒子内容的宽度和高度远小于盒子边框的宽度时,边框会显示为等腰梯形,由此,可以通过设置盒子宽度和高度为0,再利用透明边框来实现,代码如下 *{margin:0; padding:0;} body{padding:30px;} .san-1{width:0; height:0; border-left:50px原创 2016-09-07 15:56:31 · 483 阅读 · 0 评论 -
transform导致的border-radius失效问题
在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius属性,然后overflow:hidden,子元素最初没有问题,但是加上了一个animate动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是position定位的问题,但是改用了margin方式定位还是不行,后来发现可能是由于transform的问题,在父元素上加上一行-webkit-transform原创 2016-04-22 14:46:44 · 6630 阅读 · 1 评论 -
CSS中vh和vw单位设置宽高
响应式布局离不开百分比,但是,CSS百分比并不是所有问题的最佳解决方案,CSS的宽度是相对于包含它的父元素的宽度的,如果你想用视口的宽度或者高度,而不是父元素的,便可以使用vh和vw单位来设置宽高1vh等于1/100的视口高度,例如浏览器高度是900px,则1vh便等于9px,宽度同理例子:div{width:100vw; height:100vh;}该元素和浏览器等宽高也可以原创 2016-04-06 16:35:40 · 2197 阅读 · 0 评论 -
box-sizing和calc()盒模型
CSS中盒模型:CSS中盒模型分为两种,第一种是W3C的标准模型(即盒子的宽高等于内容的宽高,盒子的padding和border不计算在内),第二种是IE的传统模型(IE6以下,不含IE6,称为怪异模式或者QuirksMode,即盒子的宽高等于内容的宽高加上padding和border值)问题:当开发时,遇到盒子宽度需要占据整个屏幕的宽度时,设置宽度为100%,如若再加上border值原创 2015-09-24 09:26:09 · 466 阅读 · 0 评论 -
CSS3过渡和动画
例子:div{transform:translate(50px,100px);-ms-transform:translate(50px,100px);//IE9-webkit-transform:translate(50px,100px);//Safari and Chrome-o-transform:translate(50px,100px);//Opera原创 2015-08-06 16:12:18 · 463 阅读 · 0 评论 -
CSS3选择器
注意:IE8及之前版本不支持使用:nth-of-type给表格行设置条纹tr:nth-of-type(even){background-color:#ddd;} //设置偶数行背景色tr:nth-of-type(odd){background-color:#ddd;}//设置奇数行背景色使用:nth-child对齐表格列的内容公式:nth-child(a原创 2015-08-06 16:10:53 · 365 阅读 · 0 评论 -
css3滚动条动画
原创 2015-08-06 15:52:39 · 1458 阅读 · 0 评论 -
display:flex弹性布局
display:flex 火狐支持无前缀,谷歌和opera支持-webkit-前缀写法,比较适合移动端开发使用例子: 1 2 3header{display:-webkit-flex; -webkit-flex-flow:row;}header a{-webkit-flex:1; text-align:center;}注释:disp原创 2015-08-06 15:25:22 · 1606 阅读 · 0 评论 -
CSS3实现3D六面体
.cube > div{display:block; position:absolute; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; color:white;}.middle{border:1px dashed black; background:transparent;}原创 2015-08-06 15:24:41 · 1783 阅读 · 0 评论 -
CSS3属性选择器
[foo^="bar"] foo属性以bar开头[foo$="bar"] foo属性以bar结尾[foo*="bar"] foo属性包含bar例子:使用sprite技术整合图片.icon{background-image:url();width:16px;height:16px;}.icon-close{background-position:0px 2原创 2015-08-06 15:25:59 · 345 阅读 · 1 评论 -
JS控制animation事件
#div1{width:100px; height:100px; background-color:#F00;}.slidein{-webkit-animation-duration:3s; -webkit-animation-name:slidein; -webkit-animation-iteration-count:3; -webkit-animation-direction:alter原创 2015-08-06 15:23:06 · 6453 阅读 · 0 评论 -
小球跟随鼠标点击移动
#foo{width:50px; height:50px; border-radius:50px; background-color:#F00; position:absolute; top:0; left:0;-webkit-transition:all 1s;}var f = document.getElementById('foo');document.add原创 2015-08-06 15:23:57 · 1222 阅读 · 0 评论 -
animation阶跃函数step详解
首先,我们用CSS3的animation完成一个进度条动画 *{margin: 0; padding: 0;} .div-1{width: 200px; height: 20px; background-color: gray; position: relative;} .div-1::after{content: ''; background-color: red原创 2016-10-18 11:30:08 · 3416 阅读 · 0 评论