3450399331
网站制作

网站制作中常见的CSS3语法

发表日期:2024-11-01   作者来源:www.ysqhds.com   浏览:0   标签:网站制作    

伴随主流浏览器不断地更新与进步,CSS搭配js所形成的网页动画成效,可以用CSS3的语法直接呈现,在图片的网站建设上更能降低图片成效,防止档案容量过大导致存取困难。

有什么CSS3语法在前台网站制作中是最常被用的呢?

1. RGBA设定元素妆色

可设定元素的颜色,主要借助颜色的RGB值,与设定元素的透明度。

范例网站制作中常见的CSS3语法

border-radius: 10px;

-webkit-border-radius: 10px; (针对chrome浏览器)

-moz-border-radius: 10px; (针对firefox浏览器)

3. Text Shadow文字阴影

可设定文字阴影

范例网站制作中常见的CSS3语法

box-shadow: 1px 2px 3px #000;

-webkit-box-shadow: 1px 2px 3px #000; (针对chrome浏览器)

-moz-box-shadow: 1px 2px 3px #000; (针对firefox浏览器)

5. transition过渡动画

可设定动画成效

transition-property网站制作中常见的CSS3语法动画时间,预设为0

transition-timing-function网站制作中常见的CSS3语法

linear:以相同速度开始至结束的成效

ease:慢速开始,然后加快,之后慢速结束的成效

ease-in网站制作中常见的CSS3语法以慢速结束的成效

ease-in-out网站制作中常见的CSS3语法在cubic-bezier函数中概念值,是0~1之间的数值

一般在设定动画速度时,大多用ease-in或ease-out来取代,但借由cubic-bezier,可以得到更多种速度控制的动画成效。

transition-delay网站制作中常见的CSS3语法

div{

width:100px;height:100px;

transition-property:width;

transition-duration:1s;}

div:hover{width:200px;}

以上会导致宽度改变的滑动成效

6. Gradient Background设定背景渐层

上下渐层网站制作中常见的CSS3语法GradientType=1

渐层起始颜色网站制作中常见的CSS3语法endcolorstr=#

范例网站制作中常见的CSS3语法网站制作中常见的CSS3语法网站链接:

如没特殊注明,文章均为登烈建站 原创,转载请注明来自http://www.nousuan.com/news/zhizuo/2/14774.html