大佬教程收集整理的这篇文章主要介绍了html5 – CSS3单向转换?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我可以让它设置为只有一个“平滑下来”的效果吗?我想的解决方案是在CSS中,如果可能的话,避免JavaScript。
逻辑流程:
>用户点击元素
>转换需要0.5s来将背景颜色从白色更改为黑色
>用户放开鼠标左键
>转换需要0.5s来将背景颜色从黑色更改为白色
我想要的是:
>用户点击元素
>转换需要0s来改变
>用户放开鼠标按钮
>过渡需要0.5s来改变…
没有“过渡时间”,但有一个“过渡时间”的时间。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> /* transition out,on mouseup,to white,0.5s */ input { BACkground:white; -webkit-transition:BACkground 0.5s; -moz-transition:BACkground 0.5s; -ms-transition:BACkground 0.5s; -o-transition:BACkground 0.5s; transition:BACkground 0.5s; } /* transition in,on click,to black,0s */ input:active { BACkground:black; -webkit-transition:BACkground 0s; -moz-transition:BACkground 0s; -ms-transition:BACkground 0s; -o-transition:BACkground 0s; transition:BACkground 0s; } </style> </head> <body> <input type="button" value="click me to see the transition effect!"> </body> </html>
以上是大佬教程为你收集整理的html5 – CSS3单向转换?全部内容,希望文章能够帮你解决html5 – CSS3单向转换?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。