这里我总结了一下平时自己在项目中经常用到的20个CSS常用的样式，都是些个人的经验，这里分享给大家，希望对大家有所帮助1.强制文本单行显示：white-space:nowrap;2.设置溢出文本显示为省略标记：text-overflow:ellipsis;(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）其中clip表示直接裁切溢出的文本；值ellipsis表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；值ellipsis-word表示文本溢...
我昨天写三维正方体的时候，就用到了动画的语法 今天就来系统复习一下 过渡transition有着它的局限性 虽然简单，但是它只能在两个状态之间改变 并且它需要事件的驱动才能够进行 不能够自己运动 所以为了解决这样的问题 我们需要animation动画动画若想实现动画效果 仅仅有animation属性是不够的 我们还需要@keyframes规则 先来看一个例子p class="demo"></p>.demo { width: 100px; height: 100px; background-color: gold;...
CSS3 animation-direction 属性 ，CSS 参考手册 实例 先执行一遍动画，然后再反向执行一遍动画。检索或设置对象动画在循环中是否反向运动实例先执行一遍动画，然后再反向执行一遍动画：!DOCTYPE html> <html> <head> <style> p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; /* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite; -...
animation复合属性。检索或设置对象所应用的动画特效。如果有多个属性值时以"，"隔开，适用于所有元素，包含伪对象:after和:before1.animation-name 检索或设置对象所应用的动画名称 必须与规则@keyframes配合使用，eg:@keyframes animations animation-name:animations;2.animation-duration 检索或设置对象动画的持续时间 animation-duration:3s; 动画完成使用的时间为3s3.animation-timing-function 检索或设置对象动画...
RGBAbackground：rgba(0, 118, 160, .25);前三个值是RGB颜色值，最后一个值是水平的透明度（0 =透明，1 =不透明）。RBGA可应用于任何与颜色相关的属性如字体颜色，边框颜色，背景颜色，阴影的颜色，等 文本阴影 text-shadow（不需要判断浏览器）text-shadow:2px 3px 2px #000;文字阴影的结构是按照以下顺序：X -偏移，Y -偏移，模糊，和颜色;text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);设置为负值，X -偏移阴影转移到左侧。...
使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：注：chrome浏览器效果最佳，最终效果静态图： HTML代码如下： 练习一个小人的动画I?YOUCSS代码如下：/* CSS Document */body,html{width:100%;height:100%;margin:0;display:table;text-align:center; }.music1{display:none; }.warp{ margin-top:100px; vertical-align:middle; position:relative; }.backgroud_circle{width:400px;height:400px;border-radius:100...
字体属性：Font-family: {font-family: name} {font-family: cursive| fantasy | monospace | serif | sans-serif}Font-size: {font-size: 数值 | inherit |xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length}Font-style: {font-style: normal | italic | oblique | inherit}Font-weight: {font-weight: 100-900 | bold | bolder | lighter | normal}Font-variant: {font-v...
记录下项目中关于图片模糊效果的处理，要求：背景图必须通过img标签传入，而且头像要做成圆形的示例图片：HTML代码：<div class="introBox"><!--个人头像--><div class="imgShow"><img class="imgBground" src="resources/images/1.jpg" alt=""><ul class="details"><li class="smallImg"><img class="roundImg" src="resources/images/1.jpg" alt=""></li><li><p class="uname">吕良伟</p></li><li><p class="cellPhone">13218888...
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content : ”插入的文章”，或者 content:none 不插入内容#html <h1>这是h1</h1> <h2>这是h2</h2> #css h1::after{content:"h1后插入内容" } h2::after{content:none }运行结果：https://jsfiddle.net/dwqs/Lmm1r08x/嵌入文字符号可以使用content属性的 open-quote 属性值...
CSS3 可以将文本内容设计成像报纸一样的多列布局。像下面这样：这样的布局称为“多列布局”。对多列属性分别进行学习：对于 column 的所有属性，ie10+ 支持，firefox 不支持 column-span。除 firefox 外，所有浏览器都不支持 column-fill 属性。1. column-count: 需要分割的列数<p>记得早先少年时，大家诚诚恳恳，说一句是一句；清早上火车站，长街黑暗无行人，卖豆浆的小店冒着热气；从前的日色变得慢，车、马、邮件都慢，一生只够...
一、变形transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例：transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩阵变形*/ matrix(<number>,<number>,<number>,<number>,<number>,<number>); /*透视*/ perspective(length);transition：过度属性transition：过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果开始时间；trans...
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content : ”插入的文章”，或者 content:none 不插入内容#html <h1>这是h1</h1> <h2>这是h2</h2>#css h1::after{content:"h1后插入内容" } h2::after{content:none }运行结果：https://jsfiddle.net/dwqs/Lmm1r08x/嵌入文字符号可以使用content属性的 open-quote 属性值和...
display:box;是css3新添加的盒子模型属性，经典的布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性1.水平等宽盒子代码：<html> <head> <style> .wrap{width:600px;height:200px;display:box;display:-moz-box;display:-webkit-box; } .sectionOne{bac...
这篇文章讲述使用css3布局属性flex详细介绍html代码如下:<ul class="ul_box"><li><a href="#">html</a></li><li><a href="#">css</a></li><li><a href="#">javascript</a></li><li><a href="#">html5</a></li><li><a href="#">css3</a></li><li><a href="#">jquery</a></li></ul>css代码如下:.ul_box{margin:0;padding: 0;list-style: none; /*display: flex将对象作为弹性伸缩盒显示;flex-flow:flex-direction(确定弹性子元素排...
这篇文章主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。网页中的层叠规律是这样的：如果两个层都没有定义 position...