前端大本营

HTML5,CSS3,Responsive,资料站

transition-delay 说明

transition-delay属性, 指定时间变化发生的时间。 <在过渡效果开始前等待> 值为指定的时间, 经过指定的时间开始变化。 默认值 0, 一开始就开始变化。

属性值

时间 经过多少时间开始变化 默认值为0
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition - delay</title>
<style>
div.sample {
background-color:blue; width:200px; height:50px; 
transition-property: background-color, width, height;
transition-duration:1s;
transition-timing-function:ease-in-out;
transition-delay:3s;
}

div.sample:hover {
background-color:aqua; width:400px; height:100px; 
}
</style>

</head>

<body>
<div class="sample">transition-delay</div>	
</body>
</html>
实例图  transition-delay
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | transition-delay 指定变化发生时间 —— CSS3 参考 时间变化已关闭评论

transition-timing-function 说明

transition-timing-function属性, 指定变化的时机及进展速度的时候使用。 <以相同的速度从开始到结束的过渡效果> 变化的过程中,对于变化的速度,进展的速度可以进行调整,使之更加平滑。

属性值

ease cubic-bezier(0.25, 0.1, 0.25, 1.0)(平滑的开始到结束) 默认值 <规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。> linear cubic-bezier(0.0, 0.0, 1.0, 1.0)(速度一定) <规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。> ease-in cubic-bezier(0.42, 0, 1.0, 1.0) (慢慢开始,渐进) <规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。> ease-out cubic-bezier(0, 0, 0.58, 1.0)(慢慢结束) <规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。> ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0) (慢慢开始慢慢结束) <规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。> cubic-bezier(n,n,n,n) 由(X1,Y1,X2,Y2)和P2与三次Bezier曲线的P1中指定 <在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-timing-function</title>
<style>
div.sample {
background-color:blue; width:200px; height:50px; 
transition-property: background-color, width, height;
transition-duration:1s;
transition-timing-function:ease-in-out;
}

div.sample:hover {
background-color:aqua; width:400px; height:100px; 
}
</style>

</head>

<body>
<div class="sample">transition-timing-function</div>	
</body>
</html>
实例图  transition-timing-function
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | transition-timing-function 变化的时机进展速度 —— CSS3 参考 时间变化已关闭评论

transition-duration 说明

transition-duration属性, 指定变化所用的时间。 <让过渡效果持续> 属性的值为时间,定义时间值由以前的值到新值花多少时间。 默认值为0, 代表不发生动画效果。 负值被认为0。

属性值

默认值 0 时间 变化所用时间。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-duration</title>
<style>
div.sample {
background-color:blue; width:200px; height:50px; 
transition-property: background-color, width, height;
transition-duration:1s;
transition-timing-function:ease-in-out;
}

div.sample:hover {
background-color:aqua; width:400px; height:100px; 
}
</style>

</head>

<body>
<div class="sample">transition - duration</div>	
</body>
</html>
实例图  transition-duration
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | transition-duration 指定变化所用时间 —— CSS3 参考 时间变化已关闭评论

transition-property 说明

transition-property属性,时间时空变化时适用于CSS的元素指定。 多个指定CSS要素名的时候,使用 , 号分隔。 值为none的时候,不会发生任何变化, all指定时,所有CSS元素全部变化。

属性值

all (默认值) 所有CSS元素属性都获得变化效果<所有属性都将获得过渡效果。> none 没有CSS元素会发生任何变化<没有属性会获得过渡效果。> property 指定的CSS元素,发生时间过度变化<定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-property</title>
<style>
div.sample {
background-color:blue; width:200px; height:50px; 
transition- property: background-color, width, height;
transition-duration:1s;
transition-timing-function:ease-in-out;
}

div.sample:hover {
background-color:aqua; width:400px; height:100px; 
}

</style>

</head>

<body>
<div class="sample">transition - property</div>	
</body>
</html>
实例图  transition-property
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | transition-property 时间变化适用于CSS元素名指定 —— CSS3 参考 时间变化已关闭评论

transition 说明

transition属性,适用于要素的时间时空变化时使用。 transition属性是 transition-property, transition-duration, transition-timing-function, transition-delay各属性的组合体。 这个属性的值的顺序性很重要, 时间的最初指为 transition-duration, 第二位时间指定值为transition-delay。

属性值

个属性值用空格分隔 顺序按以下规则 transition-property transition-duration transition-timing-function transition-delay 默认值 transition-property|none, transition-duration|0, transition-timing-function|ease, transition-delay|0
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition</title>
<style>
div.prefix_sample {
background-color:blue; width:200px; height:50px; 
-moz-transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;
-webkit-transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;
-o-transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;
-ms-transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;
}

div.prefix_sample:hover {
background-color:aqua; width:400px; height:100px; 
}
</style>

</head>

<body>
<div class="prefix_sample">transition</div>
</body>
</html>
实例图  transition
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | transition 时间变化指定 —— CSS3 参考 时间变化已关闭评论

perspective 说明

perspective属性,适用于要素的transform效果,3D的深度指定。 深度的值为数值,默认值为none。<设置元素被查看位置的视图> perspective属性值为none或是0以下的时候,变形的深度不适用。 基本和 transform:perspective()函数相同 , 只不过perspective属性作用于子要素不作用于自身。

属性值

none(默认值) 数值 变形的深度数值指定。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>perspective</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 {
-moz-perspe ctive:500;
-webkit-perspe ctive:500;
-o-perspe ctive:500;
-ms-perspe ctive:500;
}
p.prefix_sample1 img, p.prefix_sample2 img{
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
perspe ctive:500;<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
perspe ctive不指定<br>
<img src="5.jpg">
</body>
</html>
实例图  perspective
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | perspective 3D变形的深度指定 —— CSS3 参考 DIV变形已关闭评论

transform-style 说明

transform-style属性,指定子要素进行平面化还是立体化的时候使用。<使被转换的子元素保留其 3D 转换>

属性值

flat(默认值) 要素指定 transform-style:flat;时,其子要素进行平面化即2D描画。 preserve-3d 维持子要素立体空间中的个个位置进行3D描画。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transform-style</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 {
-moz-transform -style:flat;
-webkit-transform-style:flat;
-o-transform -style:flat;
-ms-transform- style:flat;
}
p.prefix_sample2 {
-moz-transform -style:preserve-3d;
-webkit-transform -style:preserve-3d;
-o-transform- style:preserve-3d;
-ms-transform- style:preserve-3d;
}
p.prefix_sample1 img, p.prefix_sample2 img {
-moz-transform: rotateZ(30deg);
-webkit-transform: rotateZ(30deg);
-o-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
transform-style:flat;<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
transform-style:preserve-3d;<br>
<img src="5.jpg">
</p>	
</body>
</html>
实例图  transform-style
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | transform-style 子要素平面化立体化指定 —— CSS3 参考 DIV变形已关闭评论

transform-origin 说明

transform-origin属性,指定2D变形,还有就是3D变形时的原点指定。<设置旋转元素的基点位置> 值可以1个也可以2个,2个值的时候中间用空格分隔,指定一个值的时候,第二个值自动设置成center,两个值指定时,第一个值为水平方向,第二个值为垂直方向。 值可以是百分数也可以是普通长度,2D变形前的要素的左上位置(0,0)向右下方向的距离指定。还有3D变形,变形前的要素的左上位置(0,0,0)向右下方向的距离指定。值可以为负数,负的百分比。

属性值

百分比 变形要素的左上位置(0%,0%)开始百分比指定。3D场合Z方向为长指定(默认值为 50%,50%,0) 长 变性要素的左上位置(0,0)开始距离指定。3D变形为左上位置(0,0,0)开始距离指定。 键值 水平方向 left,center,right, 垂直方向 top,center,bottom,3D时Z轴的距离指定。 默认值 2D 50%,50%, 3D 50%,50%,0。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transform-origin</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;} 
p.prefix_sample1 img, p.prefix_sample2 img{
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);	
}
p.prefix_sample2 img {
-moz-transform -origin:200px 150px;
-webkit-transform -origin:200px 150px;
-o-transform -origin:200px 150px;
-ms-transform -origin:200px 150px;
}
</style>

</head>

<body>
<p class="prefix_sample1">
rotate(-45deg),不指定transform-origin属性<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
rotate(-45deg),transform-origin:right bottom的时候<br>
<img src="5.jpg">
</body>
</html>
实例图  transform-origin
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | transform-origin 2D变形3D变形原点 —— CSS3 参考 DIV变形已关闭评论

SAE WordPress 手工升级

因为SAE不提供FTP,所以升级的问题,叫我弄了好半天。不过参考了网上不少资料,终于可以简单的手动进行升级了。 1. 备份你的数据库和修改过的文件。 (升级失败不要怪我没提醒过你) 2. 从cn.wordpress.org下载最新的WordPress程序。 (其他地方的下载恐有问题) 3. 将wp-admin和wp-includes两个文件夹移出本地SVN的文件夹。(这里所指的SVN文件夹是你同步的文件夹不是SVN安装目录) 4. 将下载后的WordPress除了wp-content文件夹以外的文件全部复制到SVN的文件夹下。接着SVN Commit… 5. 在网页上输入 /你的博客.sinaapp.com/wp-admin/upgrade.php,即可完成升级了。  WordPress
更多技术问题,可以访问我的技术论坛
Tags:
Posted in 本站原创 | WordPress 最新博客程序在SAE服务器上 进行手工升级的方法已关闭评论

transform: perspective() 说明

perspective()函数,指定3D变形时的远近效果时使用。 其效果基本与 perspective属性相同。

属性值

perspective(n) 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>perspective</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: per spective(200);
-webkit-transform: per spective(200);
-o-transform: per spective(200);
-ms-transform: per spective(200);

-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
p.prefix_sample2 img {
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
} 
</style>

</head>

<body>
<p class="prefix_sample1">
perspective(200)<br>
<img src="5.jpg">
</p>
</body>
</html>
实例图  perspective
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | perspective () – transform 3D变形的深度 —— CSS3 参考 DIV变形已关闭评论