第八章 CSS3 过渡、变形和动画

最新推荐文章于 2024-12-27 17:15:00 发布

崔佳宇_

最新推荐文章于 2024-12-27 17:15:00 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

分类专栏： # 读书笔记《响应式Web设计：HTML5和CSS3实战》文章标签：大数据

本文链接：https://blog.youkuaiyun.com/nullccc/article/details/125793988

读书笔记《响应式Web设计：HTML5和CSS3实战》专栏收录该内容

6 篇文章

订阅专栏

8.1 什么是 CSS3 过渡以及如何使用它

<html>
<head>
    <style>
        a {
            display: block;
            width: 100px;
            height: 50px;
            background-color: #ccc;
            transition: box-shadow .5s; /* 创建0.5秒的过度动画 */
        }

        a:hover {
            box-shadow: inset 0 -50px 0 #CC3232;
        }
    </style>
</head>

<body>
    <nav>
        <a href="#"></a>
    </nav>
</body>
</html>

效果如下，transition: box-shadow 0.5s; 将会耗时 0.5 秒完成这个动作。

8.1.1 过渡相关的属性

transition-property	要过渡的 CSS 属性的名字（如 background-color 、text-shadow或者all， all会过渡所有可以过渡的属性）。
transition-duration	定义过渡效果持续的时长（用秒进行定义，例如.3s、 2s或1.5s）。
transition-timing-function	定义过渡期间的速度变化（例如ease、 linear、ease-in、 ease-out、 ease-in-out或者cubic-bezier）。
transition-delay	可选，用于定义过渡开始前的延迟时间。相反，将值设置为一个8.1 什么是 CSS3 过渡以及如何使用它负数，可以让过渡效果立即开始，但过渡旅程会在半路结束。同样是用秒进行定义，例如.3s、 2s或2.5s。

实例写法：

style {
/*...（其他样式） ...*/
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

8.1.2 过渡的简写语法

我们可以把这些独自声明的属性组合成一个简写版：

transition: all 1s ease 0s;

8.1.3 在不同时间段内过渡不同属性

.style {
/* ...（其他样式） ... */
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}

此处我们通过transition-property来指定过渡border、 color和text-shadow。然后
在transition-duration声明中，我们设定边框过渡效果应该2秒内完成、文字颜色3秒、文字
阴影8秒。由逗号分隔的过渡持续时间按顺序对应上面的CSS属性。

8.1.4 理解过渡调速函数

ease、 linear、 ease-in、 ease-out、 ease-in-out和cubic-bezier都是做什么用的呢？其实它们就是预置好的贝塞尔曲线，本质上是缓动函数。或者更简单地说，就是过渡在数学上的描述。可视化这些曲线通常更简单，所以我向你推荐http://cubic-bezier.com/和http://easings.net/。

8.2 CSS 的 2D 变形

scale	用来缩放元素（放大和缩小）
translate	在屏幕上移动元素（上下左右）
rotate	按照一定角度旋转元素（单位为度）
skew	沿X和Y轴对元素进行斜切
matrix	允许你以像素精度来控制变形效果

8.2.1 scale

.scale:hover {
transform: scale(1.4);
}

8.2.2 translate

.translate:hover {
transform: translate(-20px, -20px);
}

8.2.3 rotate

.rotate:hover {
transform: rotate(30deg);
}

8.2.4 skew

.skew:hover {
transform: skew(40deg, 12deg);
}

8.2.5 matrix

.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}