自己做的视频发什么网站吗,国家先进制造业集群,wordpress 4.3 漏洞,wordpress主题缺少样表CSS3 新增了背景或元素运动过度效果属性 transition#xff0c;其中有一个取值为过渡实体 transition-property#xff0c;也就是设置什么参与过渡#xff0c;有多个实体可供选择#xff0c;如常用背景颜色(background-color)、背景图象(background-image)、字体颜色(color…CSS3 新增了背景或元素运动过度效果属性 transition其中有一个取值为过渡实体 transition-property也就是设置什么参与过渡有多个实体可供选择如常用背景颜色(background-color)、背景图象(background-image)、字体颜色(color)等。为便于选择不同的属性作为过渡实体以下将在文章最后列出所有可以参与过渡的属性。下面先看 transition-property 的语法规则再看在网页设计中具体使用实例。一、transition-property语法规则transition-property[, * ] none | all | 二、语法说明1、transition-property 可以设置多组值默认值为 allA、 表示第一组参与过渡的属性不能省略B、[]中的 表示第二组参与过渡的属性可以省略C、* 表示第三组、第四组、……第n组参与过渡的属性可以省略2、 取值分别如下A、none表示不设置参与过渡的属性B、all表示所有可以参与过渡的css属性具体见文章后面C、指定参与过渡的css属性 三、transition-property 多组过渡效果实例html代码过度属性为背景颜色transition-property:background-color;过度属性为边框颜色和宽度transition-property:border-color,border-width;过度属性为字体颜色transition-property:color;过度属性为字体大小transition-property:font-size;过度属性为阴影transition-property:text-shadow;CSS代码.transition-property{overflow:hidden;margin:0px;padding:0px;list-style:none;}.transition-property li{width:300px;height:60px;margin-bottom:10px;padding:6px;border:1px solid #ab9595;background-color:#e3e2e0;}.transition-property li.bgcolor{transition-property:background-color;transition-duration:.5s;transition-timing-function:ease;}.transition-property li.bdcolor{transition-property:border-color,border-width;transition-duration:.5s;transition-timing-function:ease-in;}.transition-property li.color{transition-property:color;transition-duration:.6s;transition-timing-function:ease-in-out;}.transition-property li.fontsize{transition-property:font-size;transition-duration:.5s;transition-timing-function:ease-in;}.transition-property li.textshadow{transition-property:text-shadow;transition-duration:.6s;transition-timing-function:ease-in-out;}.transition-property li:nth-child(1):hover{background-color:#ff0030;}.transition-property li:nth-child(2):hover{border-color:#0042ff; border-width:medium;}.transition-property li:nth-child(3):hover{color:#b21a06;}.transition-property li:nth-child(4):hover{font-size:18px;}.transition-property li:nth-child(5):hover{box-shadow:2px 2px 3px 3px rgba(200, 199, 199, .6);}效果图过度属性为背景颜色transition-property:background-color;过度属性为边框颜色和宽度transition-property:border-color,border-width;过度属性为字体颜色transition-property:color;过度属性为字体大小transition-property:font-size;过度属性为阴影transition-property:text-shadow;可选为过渡的属性属性名称类型transformallbackground-colorcolorbackground-imageonly gradientsbackground-positionpercentage, lengthborder-bottom-colorcolorborder-bottom-widthlengthborder-colorcolorborder-left-colorcolorborder-left-widthlengthborder-right-colorcolorborder-right-widthlengthborder-spacinglengthborder-top-colorcolorborder-top-widthlengthborder-widthlengthbottomlength, percentagecolorcolorcroprectanglefont-sizelength, percentagefont-weightnumbergrid-*variousheightlength, percentageleftlength, percentageletter-spacinglengthline-heightnumber, length, percentagemargin-bottomlengthmargin-leftlengthmargin-rightlengthmargin-toplengthmax-heightlength, percentagemax-widthlength, percentagemin-heightlength, percentagemin-widthlength, percentageopacitynumberoutline-colorcoloroutline-offsetintegeroutline-widthlengthpadding-bottomlengthpadding-leftlengthpadding-rightlengthpadding-toplengthrightlength, percentagetext-indentlength, percentagetext-shadowshadowtoplength, percentagevertical-alignkeywords, length, percentagevisibilityvisibilitywidthlength, percentageword-spacinglength, percentagez-indexintegerzoomnumber
