随笔分类 -  css

摘要：知识点①translate（x,y,z） X表示只在X轴(水平方向)移动元素。 Y表示只在Y轴(垂直方向)移动元素。 Z表示只在Z轴移动元素，前提是元素本身或者元素的父元素设定了透视值。②Transation(all,none,ident) 示例：transition:width（表示单个元素） 0.5s(时间) ease(表现形式如ease-in,ease-out,ease-in-out); Transation是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。 如果只针对单个或者多个CSS属性进行变换，就可以用这个属性来进行单独设置。style*{ paddi... 阅读全文

摘要：主要知识点① transform属性： ratate（旋转度数） scale（等比例缩放） skew(x , y);让元素倾斜显示,包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。②animate 适用于鼠标经过产生宽度，高度，left，top等等 示例transition:1s ease all;所有事件产生动画！div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-cou... 阅读全文

摘要：html部分内容<div class="header"> <div class="eye_left"></div> <div class="eye_right"> <div class="eye_in"></div> </div> <div class="head_bottom"></div></div>css部分*{ padding:0; margin:0;}.header{ 阅读全文

摘要：闲着没事，逛了下googlepaly网站 看着他们的tabs选项卡样式竟然用的不是图片，而是css实现的斜边，没事简单说了一下自己理解的其中的原理1，理解border的原理查看样式style部分border-bottom:24px solid #F00; border-right:24px solid transparent; border-top:24px solid #F00; border-left:24px solid transparent;图片以前以为border是个中规中矩的长方形，我们可以看出来其实border的图片并不是中规中矩的长方形.而是梯形的结构，最终接近于三角形如图： 阅读全文