失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css3透明度过度 CSS透明半透明与transition过渡效果

css3透明度过度 CSS透明半透明与transition过渡效果

时间:2023-11-25 16:09:20

相关推荐

css3透明度过度 CSS透明半透明与transition过渡效果

一、CSS透明与半透明

1、CSS3 整体透明

opacity : 1 ; 透明度

filter : alpha( opacity = 100 ); 老旧浏览器

IE8 -

2、CSS3 颜色透明

#RRGGBB

rgb( 255, 255, 255)

rgba( 255 , 255 , 255 , 1 ) alpha 透明度

3、png图片

二、transition 过渡(适用于数值变化 )

【隐藏,显示标签】

1、直接隐藏

display: none ;

显示

display: block / inline / inline-block ;

2、opacity: 0 ;

opacity: 1 ;

3、缩放

transform 变形

transform : scale( 1,1 );

scale( 0.5 , 0.5 )

scale( 2 ,2 )

4、超出隐藏

【旋转改变位置】 degree 度

transform : rotateX( 180deg );

rotateY( 180deg )

rotateZ( 180deg )

transform-origin 旋转原点

transform-origin :

【perspective 透视:近大远小】

父标签上

perspective : 500px;

如果觉得《css3透明度过度 CSS透明半透明与transition过渡效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。