圣龍骑士 圣龍骑士
90年出生到至今,没干过什么惊天动地的事情
关注数: 7 粉丝数: 117 发帖数: 2,706 关注贴吧数: 11
CSS吧头衔名更改!~希望大家喜欢 很早就有吧友建议更改下头衔名,但是一直想不到好的,这次尝试下,希望大家喜欢,有更好的建议可以反馈,谢谢大家。 我很早之前就改吧名片位布局者,所以这次更改头衔名以布局方面的属性命名。 1级:style 第一次写css是不是用的style? 2级:static 标准流,没有写css样式就是 3级:reset 去掉烦人的默认样式,让所有浏览器大一统吧 4级:table 纪念n年前的table布局,现在很多书籍还有这方面的教学 5级:float 使用div+css布局,float流布局,大行其道,现在很多人都还喜欢这个 6级:position 更加灵活的布局,relative和absolute我很爱 7级:display 行内元素变块元素,块元素变行内元素,五花八门。本来想写我最爱的inline-block的,我最喜欢用这个取代float,但是太长,没办法。 8级:columns 多列布局,现代浏览器都支持它。 9级:flexBox 弹性盒子布局,设计响应式布局时真的超赞的。 10级:Grid 网格布局,IE10最先支持的哦。最理想的的布局方式了。 11级:layouter 你已经是一个优秀的布局者了。 12级:template 13级:regions 一些未来出现的布局方式,暂时未被支持而已。 14级:responsive 响应式布局,现在大红大紫 15级:Design 很艺术了,可以设计了,嘿嘿 16级:大神 低调~ 17级:神秘家 此货怎么会有17级,怎么做到的。 18级:helpMe! 颈椎病患者 每个码农的最终归宿 = =。。 实在是想不出什么好东西了,有不少是充数的啦,希望大家喜欢。有更好的建议一定要说啊。
使用纯CSS制作sliding Menu Effect 昨天帮吧友解决一个问题的时候,有slide字眼,让我想起了以前使用jq制作的sliding Menu Effect。心里便想能不能使用css制作出来呢。捣鼓了一个晚上,制作时制作出来了,但是缺点非常大,毫无实际用处,后面再说,权当一乐了。代码贴出来给大家看看:使用伪类选择符和transition制作。 <style type="text/css"> .nav{position:relative; list-style:none; height:35px; text-align:justify; width:600px;} .nav:after{content:""; display:inline-block; width:100%;} .nav li:not(:last-child){display:inline-block; height:30px; line-height:30px; cursor:pointer; text-align:justify;} .nav li:last-child{position:absolute; width:100%; height:10px; bottom:0px;} .nav li:last-child span{position:absolute; height:5px; width:32px; left:0px; transition:all .5s ease; background:black;} .nav li:nth-child(1).selected ~ li:last-child span{left:0px; width:32px;} .nav li:nth-child(2).selected ~ li:last-child span {left:107px; width:32px;} .nav li:nth-child(3).selected ~ li:last-child span {left:214px; width:24px;} .nav li:nth-child(4).selected ~ li:last-child span {left:311px; width:80px;} .nav li:nth-child(5).selected ~ li:last-child span {left:464px; width:24px;} .nav li:nth-child(6).selected ~ li:last-child span {left:562px; width:32px;} .nav li:nth-child(1):hover ~ li:last-child span {left:0px; width:32px;} .nav li:nth-child(2):hover ~ li:last-child span {left:107px; width:32px;} .nav li:nth-child(3):hover ~ li:last-child span {left:214px; width:24px;} .nav li:nth-child(4):hover ~ li:last-child span {left:311px; width:80px;} .nav li:nth-child(5):hover ~ li:last-child span {left:464px; width:24px;} .nav li:nth-child(6):hover ~ li:last-child span {left:562px; width:32px;} </style> <div class="wrapper"> <ul class="nav"> <li>首页</li> <li>HTML</li> <li>CSS</li> <li class="selected">Javascript</li> <li>XML</li> <li>JSON</li> <li><span></span></li> </ul> </div> 缺点相当大,看到这代码就知道除了IE10没戏了。代码太多,最重要是弹性太差,当布局改变了得重新计算width和left值,好蛋疼,基于以上缺点,此demo完全没用,还是得用js来写这些代码。
javascript操作css 这次说说javascript。前端三大代码,html、css、javascript(jquery)。我还是想说下css方面的。所以就写个javascript操作css的帖子。javascript也是前端最重要的功能语言,不懂这个真没法混啊~ 以前javascript作为脚本语言的时候,主要功能就是操作dom,很多就是操作元素的样式。 大家最熟悉应该就是style属性了。 比如:obj.style.display = "none"; 就可以把obj元素隐藏。但是这个style是把代码以内联的形式写进html里面的。读取属性的时候也只能读取内联形式的css。比如: <style> .test{width:50px;height:50px;} </style> <div id="inline" style="width:50px;height:50px;"></div> <div id="out" class="test"></div> <script> alert(document.getElementById('inline').style.width); //上面语句显示 "50px" alert(document.getElementById('out').style.width); //上面语句弹出空白,没有读取到<style>标签里面的css样式 </script> 如果js里面添加语句 document.getElementById('out').style.width = 100 + "px"; 则id="out"的div元素的HTML代码会变为 <div id="out" class="test" style="width:100px;"></div> 用style属性修改的css并没有修改css样式表里面的样式,只是以内联形式写进了html代码里面。但是由于内联的css优先级高,会覆盖css样式表里面的。 如果设置css的话,用style还是比较好的。但是如果读取css属性值呢?我们一般是把样式写在外部样式表,这样子怎么读取css属性值呢。这就是这个帖子主要讲的地方。
transform 2d 转换 各位亲爱的吧友好,这周着实不知道写什么好,只好写个transform充下数。上周写了transition和animation来创建动画,但是没有transform这个属性,动画总是那么的不完美,那么的没意思。这也是这周介绍下transform这个属性的原因。 在css2时代,如果要做一些图片转换角度,文字倾斜的效果,需要用ps等工具处理成一张背景透明图片,然后用图片展示,但是现在用css3完全可以用transform来做,而且有个很大的优点,图片不用处理,文字可选,产生后果后对布局不影响!transform也是用css3构建3d效果的主要属性,但是这周只介绍2d效果,下次再说3d吧。 其实没有什么好介绍的,transform很简单,看看手册便懂。用来设置元素的旋转、缩放、移动、倾斜效果。 旋转 transform:rotate(2turn); //旋转两圈 这里我说说角度单位,turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg 缩放 transform:scale(2,3)//X轴方向放大2陪,Y轴方向放大3陪 可分别设置scaleX(),scaleY() 移动transform:translate(10px,20px) //X轴方向移动10px,Y轴方向移动20px 这个效果跟设置了{position:relative; left10px; top:20px;} 相似.可以分别设置translateX(),translateY()。 倾斜transform:skew(10deg, 10deg) //X轴倾斜10度,Y轴倾斜10度 可以分别设置skewX(),skewY()这个效果不好理解,放两张图说明下matrix 矩阵,可以实现上面的所有效果,但是计算起来相当麻烦,所以很少用。这里只简单提下(其实我也只能简单提下 -。-) tansform:matrix(a,b,c,d,e,f);是6个数字的矩阵,假设原来的坐标是x,y。则经过这个矩阵计算后的X,Y坐标是ax+cy+e,bx+dy+f; 这个。。。数学好的自行研究下。直接写出实现上面效果的矩阵: 旋转:transform:matrix(cos&,sin&,-sin&,cos&,0,0); //&是要转换的角度,用这个符号代替 -。- 比如旋转30度 transform:matrix(0.86,0.5,-0.5,0.86,0,0); 相当于transform:rotate(30deg); 移动:transform:matrix(1,0,0,1,x,y) //相当于transform:translate(x,y) 缩放:transform:matrix(kx,0,0,ky,0,0) //相当于transform:scale(kx,ky) 倾斜:transform:matrix(1,tany&,tanx&,1,0,0) //相当于transform:skew(x&, y&) 介绍完了transform属性,还有讲讲transform-origin这个属性,就是实现转换效果的原点,用文字解析太啰嗦,直接上两张图,图中红点为原点。里面的原点设置是根据元素的坐标系,而不是窗口或者其它元素。 用于2d转换效果已经介绍完了,感觉很坑爹有没有。 -。- 这个属性目前要加上浏览器前缀才能使用: -webkit- -moz- -ms- -o- IE9+才支持。不过,低版本的IE浏览器有IE滤镜可是实现部分功能,就是不能和transition产生动画效果而已,楼下说说IE Matrix滤镜
【第一帖】闲谈css3的动画效果~ 大家好,今天是第一帖,给大家讲讲css3的动画效果。第一次写这样的帖子,有什么意见以及建议楼下回复,下次开贴会尽量改善。楼下轻拍~ 看这个帖子自备手册,对于属性本身,由于本人表达能力有限,请看手册。 现在网页前端制作很多动画效果都是用jquery来完成,但是通过css3,很多效果都可以只用css来完成。 在讲css3之前,首先讲下动画,动画跟电影,电视一样,都是利用人的眼睛有视觉暂留的特性,在一幅画没有在人的眼睛消失之前播放下一副画 ,给人造成一种流畅的视觉变化效果。在电影里,是一秒钟放24幅画面。在jquery或者css3中,动画是以短时间改变一次属性达到动画效果,电 影里面的每一幅画或者css的每一次改变后的属性值我称之为帧。 学过premiere的朋友一定会记得里面的关键帧,这是产生动画效果的关键。同样,在css3里面,有@keyframes这个属性定义关键帧。动画的开始 和结束就可以理解为两个关键帧。关键帧有什么作用?我是这么理解,关键帧决定阶段动画的效果,打个比方,第一个关键帧时宽度是100px,第 二个关键帧是200px,时间是1s,那么就会在100px和200px这两个关键帧之间自动生成1s动画时间内需要播放的多个帧:105px、110px、115px、 ……、200px,这些帧就是连续播放产生了动画效果,这个阶段动画最后以200px结束。多个属性值的原理也是一样的。所以,定义了关键帧和时 间,就可以得到一个阶段动画的效果。多个阶段动画组成了一个完整动画。比如:第一个关键帧背景色是red,第二个关键帧背景色是green,第三个关键帧背景色是blue。那么完整动画效果是先完成第一个阶段动画red到green 的过渡,然后完成第二个阶段动画green到blue的过渡。最终效果为最后一个关键帧的属性值。 有点啰嗦了,表达能力也不是很好,大家将就着看。
1 下一页