css3透明度与过度属性

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3透明度与过度属性相关的知识，希望对你有一定的参考价值。

参考技术A opacity:x x值为0~1，值越小越透明，在ie低版本的不支持

filter:alpha(opacity=x) x值为0~100，值越小越透明， ie低版本支持filter:alpha(opacity=x)

background: rgba（）：也可以改变透明度，a的值为0~1，值为1时完全不透明

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

过渡属性（ transition-property ）：transition-property 过渡或动态模拟的CSS属性，property：指定的CSS属性（width、height、background-color属性等）all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡所需的时间（ transition-duration ）：定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡动画函数（ transition-timing-function ）：指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

transition-delay 过渡开始出现的延迟时间

练习：

linear 规定以相同速度开始至结束的过渡效果

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果 (一开始会很慢后面快结束的时候会加快)

ease-out 规定以慢速结束的过渡效果 (一开始会很快后面快结束的时候会变慢)

ease-in-out 规定以慢速开始和结束的过渡效果

过渡延迟时间（ transition-delay ）正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 2s

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断速度会变快 -2s 会出现卡顿

0：默认值，元素过渡效果立即执行

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系，z-index值大的层位于其值小的层上方

总结：网页中的元素都含有两个堆叠层级，未设置绝对定位时所处的环境，z-index是0，设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定，改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。

vue+transition+opacity实现淡入淡出过度透明度

1、HTML部分

<div id="app">
	<div class="transition-box">
		<div :class="transition: true, 'is-show': isShow" @click="clickSwitch">
			<span style="font-size: 27px; font-weight: 700;">点击切换</span>
		</div>
	</div>
</div>

以上代码需要引入以下文件：
1、<link rel="stylesheet" href="./index.css">
2、<script src="/node_modules/vue/dist/vue.js"></script>
3、<script src="./index.js"></script>

2、JavaScript部分

new Vue(
	el: "#app",
    data() 
        return 
            isShow: false,
        
    ,

    methods: 
        clickSwitch() 
            this.isShow = !this.isShow;
        
    
);

3、css部分

.transition-box 
	width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;


.transition 
    width: 150px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #E6A23C;
    border-radius: 30px;
    cursor: pointer;
    /* 过度 */
    transition: all 1s;
    /* 透明度为0，完全透明 */
    opacity: .3;


.is-show 
    height: 150px;
    line-height: 150px;
    border-radius: 0;
    /* 透明度为1，就是不透明 */
    opacity: 1;