属性部分之续

今天的属性比较有意思,带上过渡效果,让人眼前一亮,也让我知道以前不怎么知道的

属性。

action~

1、background-origin

设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat 此属性才会生效。

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

div{
            background: url(地址) no-repeat;
            background-origin:border-box;
        }

2、background-clip

设定背景图像向外裁剪的区域。

background-clip : border-box | padding-box | content-box | text

3、background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进 行伸缩。

auto     默认值,不改变背景图片的原始高度和宽度。

<长度值>    成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放。

<百分比>   0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上。

cover       可选。阴影的尺顾名思义为覆盖,即将背景图片等比缩放以填满整个容器寸。

contain     可选。阴影的颜色。请参阅 CSS 颜容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止色值。

div{
        background:url(img_flwr.gif);
        background-size:80px 60px;
        background-repeat:no-repeat;
}

4、背景样式缩写

background: 背景色  背景图片  背景平铺方式  背景定位

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

5、多重背景

是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加

注意:

用逗号隔开每组 background 的缩写值;

如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明 所有背景图片应用该属性值。

background-color 只能设置一个。

background: url(image) no-repeat center center/100px 100px,url(image2) no-repeat left center/300px 300px;

6、list-style-type

控制列表每一项的头部图标

ul { list-style-type:disc;}        /*实心圆*/
ul { list-style-type:circle;}        /*空心圆*/
ul { list-style-type:square;}        /*实心方块*/
ul { list-style-type:none;}        /*不显示项目符号*/
ol { list-style-type:decimal;}        /*阿拉伯数字*/
ol { list-style-type:lower-roman;}        /*小写罗马数字*/
ol { list-style-type:upper-alpha;}        /*大写英文字母*/

7、ist-style-image

用图片来定义列表的每一项的头部图标

ul {list-style-image:url(images/arrow.gif)}

8、transform

transform-function包含以下几个方法:

translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。

translateX(): 指定对象X轴(水平方向)的平移

translateY(): 指定对象Y轴(垂直方向)的平移

rotate(): 指定对象的2D

rotation(2D旋转),需先有 <‘ transform-origin ‘> 属性的定义

scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

div{
            width: 100px;
            height: 100px;
            background: red;
            transform: translate(20px,20px) scale(2,2) skew(40deg,40deg);
            transform-origin: 0 0;

        }
transform: translateX(100px) translateY(200px);

transform: translate3d(100px,200px,300px);

9、过渡动画

1. transition-property(过渡属性)

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:

第一,在默认样式中声明元素的初始状态样式;

第二,声明过渡元素最终状态样式,比如悬浮状态;

第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

基本上可以把以上属性归纳为带有数值的 属性,都支持过渡动画

(其中visibility可以看成 是0和1,它可以常常搭配opacity属性,

来实现一 个元素渐隐渐显并最终隐藏或显示)。

最简单写法 是直接用all代表所有属性

div{
-webkit-transition-property:width,height,color;
transition-property:width,height,color;
}

2.transition-duration(过渡所需时间)

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,

也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。

 -webkit-transition-duration: .5s;
  transition-duration: .5s;

3. transition-timing-function(动画--过渡函数)

指过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))

linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))

ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)

         -webkit-transition-timing-function:ease-in;
                       transition-timing-function:ease-in;

4. transition-delay(动画--过渡延迟时间)

transition-delay属性和transition-duration属性极其类似,

不同的是transition-duration是用来设置过渡动画的持续时间,

而transition-delay主要用来指定一个动画开始执行的时间,

也就是说当改变元素属性值后多长时间开始执行。

      -webkit-transition-delay:.1s;
                    transition-delay:.1s;

5. transition(过渡)

      -webkit-transition: all .5s ease-in .1s;
                   transition: all .5s ease-in .1s;

知识补充:

到目前为止,transition功能支持从一个属性值平滑过渡到另一个属性值。

使用transition功能实现动画的缺点是只能指定属性的开始值与终点值,然后

在这两个属性值之间实现平滑过渡,不能实现更为复杂的动画效果。

缩写:

-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
时间: 2024-11-05 12:22:30

属性部分之续的相关文章

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

Android Multimedia框架总结(十三)CodeC部分之OpenMAX框架初识及接口与适配层实现

转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52629598 前言:上篇中介绍OMX事件回调,从今天开始,走入Codec部分之OpenMAX框架里.看下今天的Agenda如下: 一张图回顾音视频同步 一张图看清OpenMAX在Android系统中位置 OpenMAX是什么 OpenMax IL简介 OpenMax IL结构 Android中OpenMax的使用情况 OpenMa

基础部分之System、Object、Calendar、StringBuffer

System.out.println(obj)和 System.out.println(obj.toString())区别 public static void main(String[] args) { Object o = new Object(); System.out.println(o);//[email protected] System.out.println(o.toString());//[email protected] } 两者结果完全一致,分析:System类 out为S

(三)企业部分之nginx(未完)

1.nginx安装 所需软件包:nginx-1.8.0.tar.gz tar zxf nginx-1.8.0.tar.gz cd nginx-1.8.0 yum install pcre-devel  openssl-devel  -y ./configure --prefix=/usr/local/lnmp/nginx --with-http_ssl_module --with-http_stub_status_module make make install vim /root/.bash_

(四)企业部分之PHP(未完)

1.PHP安装 软件包:php-5.6.19.tar.bz2 re2c-0.13.5-1.el6.x86_64.rpm gd-devel-2.0.35-11.el6.x86_64.rpm tar jxf php-5.6.19.tar.bz2 yum install curl-devel re2c-0.13.5-1.el6.x86_64.rpm gd-devel-2.0.35-11.el6.x86_64.rpm gmp-devel net-snmp-devel libxml2-devel -y c

(?)企业部分之nagios(未完)

##nagios安装## ##可参考官网文档 1.tar jxf nagios-cn-3.2.3.tar.bz2 cd nagios-cn-3.2.3 yum install gd-devel-2.0.35-11.el6.x86_64.rpm -y groudadd nagcmd useradd -M -d /usr/local/nagious -G nagcmd nagios usermod -G nagcmd apache ./configure --with-command-group=n

(?)企业部分之ganglia(未完)

昨天的 开启禁用的服务 6.11 server3开启服务--nagios  httpd server4 server3 下载包 ganglia-web-3.4.2.tar.gz libconfuse-2.6-3.el6.x86_64.rpm libconfuse-devel-2.6-3.el6.x86_64.rpm rrdtool-devel-1.3.8-6.el6.x86_64.rpm ganglia-3.4.0.tar.gz yum install -y rpm-build rumbuild

(?)企业部分之MySQl

(1)MySQL数据的复制 MySQL数据库支持同步复制.单向.异步复制,在复制的过程中一个服务器充当主服务器,而一个或多个服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务器的更新.当一个从服务器连接主服务器时,它通知主服务器从服务器在日志中读取的最后一次成功更新的位置.从服务器接收从那时起发生的任何更新,然后封锁并等待主服务器通知新的更新. 请注意当你进行复制时,所有对复制中的表的更新必须在主服务器上进行.否则,你必须要小心

(五)企业部分之lnmp:memcache

1.memcached安装 yum install memcached /etc/sysconfig/memcached start yum install telnet telnet 127.0.0.1 11211 2.配置 php -m 可以看到php不支持memcached 解压memcache-2.2.5.tgz 进入解压目录 运行phpize##会自动生成configure ./configure --prefix=/usr/local/lnmp/php/modules --enabl