使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> 练习一个小人的动画 I ? Y O U ...
CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 p>i:first-child {color: red}firstsecond //伪类 :first-child 添加样式到第一个子元素如果我们不使用...
What? image-rendering作为现阶段还处于实验性质中的css属性,他的作用是在浏览器对图片进行比例缩放时,设置其缩放使用的算法,从而来得到我们最终想要的图片结果。而且这个属性可以应用于img,canvas和background-image中。 Note 由于该属性未得到所有浏览器的支持,本文直接在文章里应用该属性,所以阅读此文时请使用最新版本的浏览器 Usage image{ image-rendering:auto;} 其可选的值有: auto使用默认算法,即...
最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下: .pie_radius{ width:250px;height:250px; background-color:#34...
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容。举例说明: .before:before{content:you before; color:red;} me 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before。我们来看效果: //在指定元素的内容 me 前添加了新内容 you before 我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值...
项目中经常有遇到需求半透明的情况,如图片、文字、容器、背景等等,每次都要去翻以前的项目,不甚其烦。现在一次性做个小结,方便自己查阅,也同时分享给大家: 一、 元素容器透明 1 .div{2 opacity: 0.5; /* Firefox、Chorme、Opera等主流浏览器识别 */3 filter:alpha(opacity=50); /* IE6及以上IE浏览器识别 */4 } 说明: 1. opacity:* 取值0-1之间,由全透明向不透明递增,超过1之后默认不透明; 2...
background: url(Plus.png) no-repeat scroll 90% 90% / auto 90%;这个斜杠后面是什么意思 斜杠前面的90% 90%又是什么意思呢 是background-size吗? 回复讨论(解决方案) background-size,第一个90%是宽,第二个90%是高 “ / ” 后面的背景属性是CSS3新增的,有三个:[ background-size] [background-origin] [background-clip]; background: [background-color] [background-image] [backgrou...
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position、float、overflow、z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位: html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。CSS中的单位是必须要写的,因为它没有默认单位。 绝对单位:1 in=2.54cm=25.4mm=72pt=6pc。各种单位的含义:in:英寸Inches (1 英寸 = 2.54...
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态。本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案。 基础知识 float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是...
position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。 基础知识 postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。 position四种类型 (1)staticstatic是position属...
position属性的定义和用法:检索或设置对象的定位方式。设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有margin,但仍有padding和边框border。要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个。否则上述属性会使用他们...
最近在看到一篇关于如何实现水平垂直居中,发现有许多属性值,自己并不了解,特此Google一番,查到,摘抄过来,方便以后查阅,下面是如何实现水平垂直居中的博文。 解读CSS布局之-水平垂直居中 html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display...
CSS background 属性总结
css3出来已经很久了,现在来谈判断浏览器是否支持某个css3的属性虽说有点过时了,但是还是可以谈谈的,然后,此篇主要谈的不是判断是否支持,而是怎么封装更好,为什么这么封装,欢迎吐槽。 入题,判断浏览器是否支持css3 transition,方法很简单,只需要下面这句代码就行了: transition in document.body.style chrome和ie支持document.body,但是Firefox不支持,Firefox支持document.documentElement,对于没有doctype...
与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍。一.word-break属性:此属性用来设定文本如何进行换行。语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行。2.b...