html – 可以使用css3过渡轮廓颜色

html – 可以使用css3过渡轮廓颜色,第1张

概述是不是可以用 css3转换大纲? body{margin:10px;padding:0px;}#tDiv{ background-color:#999; width:500px; height:500px; color:black; outline: 5px dashed #222; -moz-transition: color 2s; 是不是可以用 css3转换大纲?

body{margin:10px;padding:0px;}#tdiv{    background-color:#999;    wIDth:500px;     height:500px;    color:black;   outline: 5px dashed #222;     -moz-Transition: color 2s;    -o-Transition: color 2s;    -webkit-Transition: color 2s;    Transition: color 2s;    -moz-Transition: outline-color .7s ease-out;    -o-Transition: outline-color .7s ease-out;    -webkit-Transition: outline-color .7s ease-out;    Transition: outline-color .7s ease-out;    -moz-Transition: background-color .7s ease-out;    -o-Transition: background-color .7s ease-out;    -webkit-Transition: background-color .7s ease-out;    Transition: outline-background .7s ease-out;   }#tdiv:hover{    color:green;    background-color:gold;    outline: 5px dashed magenta;}

http://jsfiddle.net/loren_hibbard/uKGCc/

这只会立即改变轮廓..

谢谢

解决方法 如果要应用多个不同的转换,则必须将它们合并为一个规则(并使用必要的前缀重复它们):

-webkit-Transition: color 2s,outline-color .7s ease-out,background-color .7s ease-out;   -moz-Transition: color 2s,background-color .7s ease-out;     -o-Transition: color 2s,background-color .7s ease-out;        Transition: color 2s,background-color .7s ease-out;

示例:http://jsfiddle.net/UF3Ht/6/

https://developer.mozilla.org/en-US/docs/CSS/transition-property

Transition:   [<'Transition-property'> || <'Transition-duration'> || <'Transition-timing-function'> || <'Transition-delay'> [,[<'Transition-property'> || <'Transition-duration'> || <'Transition-timing-function'> || <'Transition-delay'>]]*

当您多次使用同一属性时,只会照常应用最后一个属性:

Transition: outline-color .7s ease-out;    /* this will be overrIDden */Transition: background-color .7s ease-out; /* this will be used */
总结

以上是内存溢出为你收集整理的html – 可以使用css3过渡轮廓颜色全部内容,希望文章能够帮你解决html – 可以使用css3过渡轮廓颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1084298.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存