# 一、元素动态化
# 1、变换（transform）
常见的，我们可以使用 translate 移动元素（比如：调整图片位置）：
translate 和 absolute 的区别
translate 是相对于元素自身的位置进行移动，而 absolute 是相对于父元素的位置进行移动。
div {
/* 方式1: */
position: absolute;
top: -60px;
/* 方式2: */
transform: translateY(-60px);
}
/* 一、默认补零 */
/* 45deg */
transform: translate(…px); /* 这里的值不用加引号*/
/* 轴方向 */
transform: translateX(…px);
transform: translateY(…px);
/* 二、使用坐标 */
transform: translate(-50%, -50%);
其他变换函数
更多可以查看：transform (opens new window)
- 缩放
/* 45deg */
transform: scale(n); /* n表示放大的倍数 */
/* 轴方向 */
transform: scaleX(n);
transform: scaleY(n);
- 旋转
/* 绕原点 */
transform: rotate(…deg);
/* 绕轴 */
transform: rotateX(…deg);
transform: rotateY(…deg);
除此之外，transform 属性是可以传入多个值的：
transform: translateY(-10px) rotate(-10deg) scale(1.2);
# 2、过渡（transition）
transition 可以实现状态切换（显示隐藏），通常应用不同的伪元素之间切换（比如：:hover等）
使用解读
https://codepen.io/lencamo/pen/JjarywK
/* 指定属性 持续时间 速度曲线 开始时间 */
transition: all 1s ease 1s;
- 动态改变属性值
通过触发伪类来执行动画
.nav-item {
transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-item:hover {
/* 动画 */
background-color: #ff0000;
color: #ffffff;
}
- 动态展示其他元素
通过动态的添加 .show、显示.content 来执行动画
.modal {
display: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal.show {
display: block;
/* 动画 */
opacity: 1;
transform: translateY(-24px);
}
.content {
display: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.title:hover + .content {
display: block;
/* 动画 */
opacity: 1;
transform: translateY(-24px);
}
# ① 过渡属性
支持过渡的 css 属性：
| 分类 | 属性 |
|---|---|
| 颜色相关 | color、background-color、border-color、opacity 等 |
| 尺寸相关 | width、height、margin、padding 等 |
| 边框相关 | border-width、border-radius、box-shadow 等 |
| 位置相关 | top、right、bottom、left 等 |
# ② 时间函数
时间函数主要是用来控制过渡效果的速度曲线：
| 属性值 | 说明 | 使用 |
|---|---|---|
| ease | 相当于 cubic-bezier(0.25,0.1,0.25,1) | 慢速开始，然后变快 |
# 3、动画（animation）
在 animation 中，除了可以使用 cubic-bezier 还可以使用 step-start
| 属性值 | 说明 | 使用 |
|---|---|---|
| ease | 相当于 cubic-bezier(0.25,0.1,0.25,1) | 慢速开始，然后变快 |
| step-start | 相当于 steps(1, start) |
使用解读
https://codepen.io/lencamo/pen/JjarpqL
/* 指定属性 持续时间 速度曲线 开始时间 */
animation: 动画名 0s ease;
- 定义
@keyframes 动画名 {
/* 方式一 */
/* 0% {样式属性：属性值;}
……
100% {样式属性：属性值;} */
/* 方式二 */
/* from {
background-color: red;
}
to {
background-color: yellow;
} */
}
- 使用
div {
animation: 动画名 1s ease-in-out infinite;
/* animation: 动画名 1s steps(1, start) infinite; */
}
拓展
可以尝试自己实现以下三十种网页导航动画效果 (opens new window)
# 4、伪类
:hover：用户将光标（鼠标指针）悬停在元素上时触发，相关伪类还有（:link、:visited 或 :active）
使用示例
<div class="box" style="font-size:16px;">字体变换</div>
<style>
.box:hover {
font-size: 22px;
}
</style>
js 实现
<div class="box" style="font-size:16px;">字体变换</div>
<script>
var elm = document.querySelector('.box')
// console.log(elm)
elm.onmouseenter = function () {
elm.style.fontSize = '22px'
}
elm.onmouseleave = function () {
elm.style.fontSize = '16px'
}
</script>
:checked：任何处于选中状态的 checkbox 和 radio 元素 或 select 选择框等处于选中状态时触发
使用示例
<input type="checkbox" id="sing" class="menu-btn" />
<label class="text" for="sing">唱跳</label>
<style>
input[type='checkbox']:checked.menu-btn + .text {
background-color: green;
}
</style>
js 实现
<input type="checkbox" id="sing" class="menu-btn" />
<label class="text" for="sing">唱跳</label>
<style>
.checked {
background-color: green;
}
</style>
<script>
let elm = document.querySelector('input[type="checkbox"].menu-btn')
// console.log(elm)
elm.onchange = function (e) {
// console.log(this === e.target)
if (this.checked) {
this.nextElementSibling.classList.add('checked')
} else {
this.nextElementSibling.classList.remove('checked')
}
}
</script>
# 二、 css 效果应用
# 1、三角形图标
.triangle-one {
width: 0px;
height: 0px;
border: 50px solid transparent;
/* border-right-color: skyblue; */
border-color: orangered skyblue gold yellowgreen; /* 完整效果 */
}
/* =================== */
/* 推荐😂 */
.triangle-two {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-top: 35px solid skyblue; /* 调整高低胖瘦 */
border-right: 50px solid transparent; /* 猜猜去掉有什么效果？ */
}
# 2、shadow 阴影
# ① 盒子阴影
盒子阴影box-shadow (opens new window)比较常见，通常使用如下：
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
如果我们需要在线示例，可以使用在线网站Box-shadov.dev (opens new window)；如果我们需要多层阴影，可以借助在线工具neumorphism (opens new window)进行调试。
# ② 文字阴影
文字阴影的使用可以让文本元素看起来更加突出和有立体感
/* 略 */
# 3、gradient 渐变
关于渐变，个人感觉没有必要深研，使用的时候使用在线工具grabient (opens new window)即可。
- 线性渐变
/* 默认（从上到下） */
background-image: linear-gradient(#ff577f, #c6c9ff);
/* 等效于 */
background-image: linear-gradient(180deg, #0093e9 0%, #80d0c7 100%);
- 径向渐变
/*椭圆形渐变*/
background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
/*圆形渐变*/
background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
# 三、其他
# 1、white-space
常见的换行符有：
<br>、\n、\r\n、\r等，空格有： 、 等
| 文字换行 | 空格 | 换行符 | |
|---|---|---|---|
| normal（默认值） | 换行 | 合并成一个 | 不支持 |
| nowrap✨ | 不换行（仅单行，会超出） | 合并成一个 | 不支持 |
| pre | 换行（行为单位，会超出） | 保留全部空格 | 支持 |
| pre-wrap🚩 | 换行 | 保留全部空格 | 支持 |
| pre-line | 换行 | 合并成一个 | 支持 |
- 长文本空格保留问题
div.msg {
white-space: pre-wrap;
}
- 内容省略应用
/* 单行文本溢出 */
.box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文本溢出 */
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
# 2、filter-function
- grayscale() (opens new window) : 对图片进行灰度转换，它是 <filter-function> 的子属性
- blur() (opens new window)：将高斯模糊应用于输出图片
/* 黑白悼念主题 */
html {
filter: grayscale(1);
}
/* 模糊处理 */
img {
filter: blur(4px);
}
# 3、滚动条样式
关于滚动条的样式修改，这是一个细节性问题，通过修改滚动条可以让网站提升一个档次。
以 element ui 官网为例：网页一 (opens new window) 和 网页二 (opens new window) 就有明显的区别。常见应用如：各大网站看视频时的选集滚动条。
::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
# 4、iframe 使用
<iframe src="https://note-taking.cn/"></iframe>
iframe {
border: none;
outline: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}