css-动画-transition-过渡动画

考点

过渡动画,单词
transition

过渡动画的简写格式
transition: 属性名		过渡时间		运行方式		动画延迟
transition:property	duration	liming-function		delay
例如:
transition: width	4s	ease	0s;
transition:	all	4s	lineal	3s;

过渡动画的运动方式,常用的有匀速,缓冲,请写出单词
匀速,linear
缓冲,ease

过渡动画的时间,要设置时间为3秒钟,应该怎么写这个三秒
3s

过渡动画的时间,要设置时间为500豪秒,如何写这五百豪秒
500ms

根据描述写出样式:过渡动画,让宽度发生变化,持续时间四秒钟,匀速运动,没有延迟
transition:width	4s	linear	0s;

根据描述写出样式:过渡动画,让全属性都变化,持续时间500豪秒,缓冲运动,3秒延迟
transition:width	500ms		ease	3s;

transition

在这里插入图片描述

用法

对于一个属性的简写
transition: 属性 持续时间 速度 延迟

对于多个属性的简写
transition: 属性1 持续时间1 速度1 延迟1, 属性2 持续时间2 速度2 延迟2;

对于全属性的变化(待核实)
transition:all 持续时间 速度 延迟


读音的拆分

tran
si
tion

意义

在这里插入图片描述

transition动画的属性

property设置过度的属性

在这里插入图片描述

transition-property:属性

duration设置过渡的时间

在这里插入图片描述
丢锐醒

trannsition-duration:过渡时间

过渡时间
秒,s。 例如一秒,1s
毫秒,ms,例如500毫秒,500ms

timing-function 过渡的运动方式

timing = time 的现在进行时
补充一个英语进行时的语法
动词+ing,代表正在进行
比如
吃eat是动词,正在吃,eating
笑lauth,正在笑,lauthing
同理
time,计时的意思
现在的分词 timeing
现在的分词另一种现态
以e结尾时,去掉e,加ing
timing

python中的现在分词
threading
thread+ing
import threading
t = threading.Thread

multiprocessing = multi多种的+process进程+ing现在分词

在这里插入图片描述

在这里插入图片描述

function
在这里插入图片描述

格式

transition-timing-function:方式

方式两种
一,linear,匀速。直线的意思,理解为速度值是不变的,直线的
二,ease,缓冲。

在这里插入图片描述

delay 时间延迟

在这里插入图片描述
地雷

用法

transition-delay:延迟时间

连写

transition: 属性 过渡时间 运行速度 动画延迟

应用

需要两个状态
应用的时候,会由状态A变为状态B

代码

<style>
    div{
        width: 100px;
        height: 30px;
        background: red;
        transition:width 4s ease 0s;
        /*transition:all 4s ease 3s;*/
    }

    div:hover{
        width: 600px;
        background: blue;
    }

</style>

<div>123</div>内容

效果
在这里插入图片描述

练习-

鼠标入图片时浮现出来说明文字
在这里插入图片描述

初步的样式

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background: black;
        color:gold;
    }
</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果
在这里插入图片描述

目标
让黑色的块脱离文档流

通过定位方式来脱离
三种定位方式
1相对定位
2绝对定位
3固定定位

经验方面
会把父容器设置一个相对定位,把子容器设置为一个绝对定位
好处
只需要把绝对定位的子容器进行重新定位就可
以父容器左上角作为x0y0的座标来定位

只有获得了定位属性的标签
才会具有left ,right,top ,bottom的属性

代码

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
        position: relative;
    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background: black;
        color:gold;
        position: absolute;
        left:0;
        top:0;
    }
</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果
在这里插入图片描述

让黑色的块到底部去
给黑色的块设置一个top值
让这个值=父容器的高度

完整版

代码

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
        position: relative;
        overflow: hidden;

    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background-color: rgba(0,0,0,0.2);
        color:gold;
        position: absolute;
        left:0;
        top:400px;
        transition:top 1s linear;
        /*opacity:0.2;*/
    }

    .outter:hover .info{
        top:300px;
    }

</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果
在这里插入图片描述

经验

设置透明度
1,如果只要背景颜色透明有变化,不影响文字
给定颜色属性的时候
使用rgba()方式
例如
background-color: rgba(0,0,0,0.2);

2,如果希望一个标签里所有的内容都同时有透明度的变化
使用属性opacity
opacity:0.2;

技术点
黑色的文字说明块不见
并不是使用的display:none
而是设置一个父容器的overflow:hidden来实现的

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值