【前端学习记录】CSS 2D转换、过渡及动效

本文介绍了CSS中的2D转换方法,包括rotate()用于旋转和scale()用于缩放元素。同时,详细讲解了transition属性,如何实现元素属性的平滑过渡,并提供了线性、慢进、快出等不同速度曲线的例子。此外,文章还阐述了如何创建和应用@keyframes动画,通过改变背景颜色展示了一个简单的动画示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2D转换方法

transform: rotate(); //旋转
transform: scale() // 缩放

过渡效果

transition是将元素的某个属性从“一个值”在指定时间内过渡到“另一个值”
格式
transition 属性名 持续时间 过渡方法
transition-property 属性名|all 对哪个属性进行变化
transition-duration 持续时间
transition-timing-function 过渡使用的方法(函数)

描述
linear匀速
ease慢快慢
ease-in慢快
ease-out快慢
ease-in-out慢快慢

代码样例(鼠标浮动后样式发生变化)

div {
        height: 30px;
        width: 100px;
        line-height: 30px;
        border-radius: 5px;
        color: #000;
        background-color: silver;
        transition: all 1s linear;
    }
    
    div:hover {
        color: white;
        background-color: #40c419;
    }
animal动画

1 定义动画 @keyframes规则
2 调用动画 animation属性

代码样例:

@keyframes myAnimal {
        0% {
            background-color: #1db163
        }
        40% {
            background-color: #b11d87
        }
        100% {
            background-color: #b11d40
        }
    }
    
    div:hover {
        animation: myAnimal 5s linear;
    }
描述
animation简写
animation-name引用@keyframes动画的名称
animation-duration动画完成时间
animation-timing-function规定动画的速度曲线,默认是“ease”
animation-play-staterunning | paused
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值