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

最新推荐文章于 2024-07-26 21:01:28 发布

原创最新推荐文章于 2024-07-26 21:01:28 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #学习

前端专栏收录该内容

26 篇文章

订阅专栏

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

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-state	running \| paused