【响应式Web设计】读书笔记 - CSS（四） - 11

最新推荐文章于 2021-06-20 00:04:22 发布

一点编程

最新推荐文章于 2021-06-20 00:04:22 发布

阅读量513

点赞数 2

分类专栏：响应式Web设计文章标签：响应式web设计 css3

本文链接：https://blog.csdn.net/JasonAPoint/article/details/75173247

版权

响应式Web设计专栏收录该内容

12 篇文章 0 订阅

订阅专栏

【简介】CSS3 过渡、CSS3 变形

1. CSS3 过渡

CSS3 的过渡是创造视觉效果的方式，例如鼠标悬停在链接上时，链接会从状态一（没有红线）渐进地切换到状态二（带有红线）。

这里写图片描述

其中，过渡效果通过以下这行代码：

transition: box-shadow 1s;

在 box-shdow 上，耗时 1 秒，从现存状态切换到悬停状态。完整 HTML 如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

nav {
    display: flex;
}
a {
    font-family: sans-serif;
    color: #fff;
    text-indent: 1rem;
    background-color: #ccc;
    display: inline-flex;
    flex: 1 1 20%;
    align-self: stretch;
    align-items: center;
    text-decoration: none;
    transition: box-shadow 1s;
}
a + a {
    border-left: 1px solid #aaa;
}
a:hover {
    box-shadow: inset 0 -3px 0 #cc3232;
}
</style>
</head>
<body>
<nav>
    <a href="#">link-1</a>
    <a href="#">link-2</a>
    <a href="#">link-3</a>
    <a href="#">link-4</a>
    <a href="#">link-5</a>
</nav>
</body>
</html>

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：定义过渡开始前的延迟时间。

单独使用各种过渡属性创建过渡效果的语法如下：

.style {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

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

transition: all 1s ease 0s;

在使用简写的方式的时候，第一个和时间相关的值会被应用给 transition-duration，而第二个则会被应用到 transition-delay上。

过渡调速函数一般是预置好的贝塞尔曲线：

这里写图片描述

2. CSS 2D变形

过渡是从一种状态平滑转换到另一种状态，而变形则定义了元素将会变成什么样子。

可用的 CSS3 变形有两种： 2D 和 3D。2D 变形的实现更广泛，浏览器支持更好，写起来也更简单。CSS3 的 2D 变形模块允许我们使用下列变形：

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

我们以以下的元素为示例：

这里写图片描述

<div class="outer">
    <div class="scale">scale(1.4)</div>
    <div class="translate">translate(-20px, -20px)</div>
    <div class="rotate">rotate(30deg)</div>
</div>

.outer {
    margin: 200px;
}
.outer div {
    display: inline-block;
    padding: 20px 10px;
    margin: 5px;
    background-color: #ccc;
}

2.1 scale 缩放元素

为第一个元素添加缩放样式：

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

当鼠标悬停在该元素上时，元素放大到原来的 1.4 倍。

这里写图片描述

2.2 translate 偏移元素

为第二个元素添加：

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

将元素从原来的位置上偏移一定距离，第一个值是 X 轴上的偏移量，第二个值是 Y 轴上的偏移量，正值让元素向右或向下偏移，负值让元素向左或向右偏移。

当鼠标悬停时，元素向左偏移 20px，向上偏移 20px。

这里写图片描述

2.3 rotate 旋转

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

当鼠标悬停时，元素旋转30度。

这里写图片描述

一点编程

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【响应式Web设计】读书笔记 - CSS（四） - 11

【简介】CSS3 过渡、CSS3 变形
复制链接

扫一扫

专栏目录

【响应式Web设计】读书笔记 - CSS（四） - 11

1. CSS3 过渡

1.1 过渡的相关属性

2. CSS 2D变形

2.1 scale 缩放元素

2.2 translate 偏移元素

2.3 rotate 旋转

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