细品css3背景应用

background

css1:

background: background-color url(#) repeat attachment position;

cc3新增:

background-size :定义背景图片位置,两个值:水平和垂直偏移量

background-size : x y;

background-clip :指定背景绘制区域。共有 3 种情况:

(1) border-box 背景被裁剪到边框盒

(2) padding-box 背景被裁剪刀内边距框

(3) content-box 背景被裁剪到内容框

background-origin :设置元素背景图片的原始起始位置

(1)border-box

(2)padding-box

(3)content-box

background-origin :border-box || padding-box || content-box;

background-image: 指定一个或多个图片 ,或指定线性渐变或径向渐变

(1)指定图片 : background-image: url() , url(); //注意第一张图是放在最上面。

(2)渐变 :

线性渐变:

background-image: linear-gradient(方向 , color1, color2, color3…)

background-image: linear-gradient(角度 , color1, color2, color3…)

例子 : background-image: linear-gradient(to bottom right, red , yellow);

注意:1.指定角度渐变时,要注意旋转方向。 2.在指定color时,也可指定一个百分比数,指渐变从哪开始。3.重复渐变也有。

径向渐变 :

从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)

background: radial-gradient(center, shape size, start-color, …, last-color);(默认颜色结点均匀分布)

text

文本阴影(text-shadow)

该属性用于给文字设置阴影效果,一共有 4 个值。第一个值为水平偏移量,第二

个值为竖直偏移量,第三个值为模糊距离,第四个值为颜色。

换行

word-break 属性规定自动换行的处理方法。共有 3 个值:normal break-all keep-all

新文本属性

1、text-align-last 属性规定如何对齐文本的最后一行

2、text-overflow 属性规定当文本溢出包含元素时该如何处理。

transform

(1)平移 : translate(x,y) 将div平移x,y;

(2)旋转 : rotate(angle) 将div转转angle个角度

(3)放缩 : scale(x,y) 将div进行放缩

(4)倾斜 : skewX(angle) 将div倾斜angle个角度

注意:倾斜、放缩都会有一个轴线,div会根据这根轴线进行倾斜、放缩。

transform 3D;

(1)旋转 :rotateX(angle) rotateY(angle) rotateZ(angle) rotate3D(x,y,z,angle)

其中 0<x,y,z<1,真实度数 x*angle

注意 : 3D的转化看起来似乎与2D没什么不同,但它是真实3D转动,就好像一本书从正面翻到侧面,这是真正的3D转动。

(2)平移:比2D多了一个translateZ(z) . translate3d(x,y,z) 不可省略参数。

(3)缩放: 比2D多了一个scaleZ 。

transform-origin

更改转化点的位置(旋转、放缩的中心点)

转化矩阵,emmmm这个等用到在学吧,贼难记住

transform-style:指定嵌套元素是怎样在三维空间中呈现。

transform-style: flat|preserve-3d;

backface-visibility:定义当元素不面向屏幕时是否可见。

backface-visibility: visible|hidden;

perspective 定义 3D 元素距视图的距离,以像素计。即Z轴距离。

transition 过渡

当某个css需要平滑的从一个值过渡到另一个值的时候就可以用上了,这是一个非常强大的动画效果。

transition-property: none || all || 指定要过渡的css名称(如color);

transition-duration: time ; 指过度所用的时间。

指定以上两个过渡效果就已经成立!额外css:

transition-timing-function : 过渡速度的快慢

(1) linear ; //以线性的速度过渡css

(2) ease ; //平滑过渡

(3) ease-in ;//先慢后快

(4)ease-out; //先快后慢

(5)ease-in-out;//先慢后快,再慢

(6)cubic-bezier(n,n,n,n);//cubic-bezier函数变化

transition-duration: time ; //指定过渡触发之后过多少秒后开始过渡css

transition整合

transition: property duration timing-function delay;

animation 动画

作用:animation 属性是一个简写属性,用于设置六个动画属性

语法:animation: name duration timing-function delay iteration-count direction

说明:

animation-name : “String” ; //规定需要绑定到选择器的 keyframe 名称

animation-duration : time ; //规定完成动画所花费的时间,以秒或毫秒计

animation-timing-function 参数如上的transition-timing-function;

// 规定动画的速度曲线

animation-delay : time; //规定在动画开始之前的延迟

animation-iteration-count : n | infinite; //规定动画应该播放的次数

说明:n 定义动画播放次数的数值,infinite 规定动画应该无限次播放

animation-direction normal|alternate; //规定是否应该轮流反向播放动画

说明:normal 默认值,动画应该正常播放,alternate 动画应该轮流反向播放

注意:请始终规定 animation-duration 属性,否则时长为 0,动画不会播放

@keyframes 属性

作用:通过 @keyframes 规则,创建动画

说明:创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式,在动画过程中,能够

多次改变这套 CSS 样式,以百分比来规定改变发生的时间,或者通过关键词 “from” 和

“to”,等价于 0% 和 100%,0% 是动画的开始时间,100% 是动画的结束时间

例子:

div {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: mymove 5s infinite; -moz-animation: mymove 5s infinite;

}

@keyframes mymove {

0% {

top: 0px;

}

25% {

top: 200px;

}

75% {

top: 50px

}

100% {

top: 100px;

}

}

其他动画属性:

animation-play-state 属性

作用:animation-play-state 属性规定动画正在运行还是暂停

语法:animation-play-state: paused | running;
function(){ //外汇隔夜利息 www.fx61.com/interest.html

说明:paused 规定动画已暂停,running 规定动画正在播放

注释:可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画

animation-fill-mode 属性

作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见

语法:animation-fill-mode : none | forwards | backwards | both;

说明:none 不改变默认行为,forwards 当动画完成后,保持最后一个属性值(在最后一

个关键帧中定义),backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义),both 向前和向后填充模式都被应用

will-change

作用:提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置

语法:will-change:auto |

说明:auto 表示没有特别指定哪些属性会变化,浏览器需要自己去猜,然后使用浏览器经常使用的一些常规方法优化

最后建议一下css3都拿张图片或者div来一点一点实践一下,css在做特效方面非常有效。

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。