# 一、元素动态化
# 1、变换(transform)
常见的,我们可以使用 translate 移动元素(比如:调整图片位置):
translate 和 absolute 的区别
translate 是相对于元素自身的位置进行移动,而 absolute 是相对于父元素的位置进行移动。
div { /* 方式1: */ position: absolute; top: -60px; /* 方式2: */ transform: translateY(-60px); }
Copied!
/* 一、默认补零 */ /* 45deg */ transform: translate(…px); /* 这里的值不用加引号*/ /* 轴方向 */ transform: translateX(…px); transform: translateY(…px); /* 二、使用坐标 */ transform: translate(-50%, -50%);
Copied!
其他变换函数
更多可以查看:transform (opens new window)
- 缩放
/* 45deg */ transform: scale(n); /* n表示放大的倍数 */ /* 轴方向 */ transform: scaleX(n); transform: scaleY(n);
Copied!
- 旋转
/* 绕原点 */ transform: rotate(…deg); /* 绕轴 */ transform: rotateX(…deg); transform: rotateY(…deg);
Copied!


除此之外,transform 属性是可以传入多个值的:
transform: translateY(-10px) rotate(-10deg) scale(1.2);
Copied!
# 2、过渡(transition)
transition 可以实现状态切换(显示隐藏),通常应用不同的伪元素之间切换(比如::hover
等)
使用解读
https://codepen.io/lencamo/pen/JjarywK
/* 指定属性 持续时间 速度曲线 开始时间 */ transition: all 1s ease 1s;
Copied!
- 动态改变属性值
通过触发伪类来执行动画
.nav-item { transition: background-color 0.3s ease, color 0.3s ease; } .nav-item:hover { /* 动画 */ background-color: #ff0000; color: #ffffff; }
Copied!
- 动态展示其他元素
通过动态的添加 .show、显示.content 来执行动画
.modal { display: none; transition: opacity 0.3s ease, transform 0.3s ease; } .modal.show { display: block; /* 动画 */ opacity: 1; transform: translateY(-24px); }
Copied!
.content { display: none; transition: opacity 0.3s ease, transform 0.3s ease; } .title:hover + .content { display: block; /* 动画 */ opacity: 1; transform: translateY(-24px); }
Copied!
# ① 过渡属性
支持过渡的 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;
Copied!
- 定义
@keyframes 动画名 { /* 方式一 */ /* 0% {样式属性:属性值;} …… 100% {样式属性:属性值;} */ /* 方式二 */ /* from { background-color: red; } to { background-color: yellow; } */ }
Copied!
- 使用
div { animation: 动画名 1s ease-in-out infinite; /* animation: 动画名 1s steps(1, start) infinite; */ }
Copied!
拓展
可以尝试自己实现以下三十种网页导航动画效果 (opens new window)
# 4、伪类
:hover
:用户将光标(鼠标指针)悬停在元素上时触发,相关伪类还有(:link、:visited 或 :active)
使用示例
<div class="box" style="font-size:16px;">字体变换</div> <style> .box:hover { font-size: 22px; } </style>
Copied!
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>
Copied!
: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>
Copied!
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>
Copied!
# 二、 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; /* 猜猜去掉有什么效果? */ }
Copied!
# 2、shadow 阴影
# ① 盒子阴影
盒子阴影box-shadow (opens new window)比较常见,通常使用如下:
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
Copied!
如果我们需要在线示例,可以使用在线网站Box-shadov.dev (opens new window);如果我们需要多层阴影,可以借助在线工具neumorphism (opens new window)进行调试。
# ② 文字阴影
文字阴影的使用可以让文本元素看起来更加突出和有立体感
/* 略 */
Copied!
# 3、gradient 渐变
关于渐变,个人感觉没有必要深研,使用的时候使用在线工具grabient (opens new window)即可。
- 线性渐变
/* 默认(从上到下) */ background-image: linear-gradient(#ff577f, #c6c9ff); /* 等效于 */ background-image: linear-gradient(180deg, #0093e9 0%, #80d0c7 100%);
Copied!
- 径向渐变
/*椭圆形渐变*/ background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce); /*圆形渐变*/ background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
Copied!
# 三、其他
# 1、white-space
常见的换行符有:
<br>
、\n
、\r\n
、\r
等,空格有: 
、
等
文字换行 | 空格 | 换行符 | |
---|---|---|---|
normal(默认值) | 换行 | 合并成一个 | 不支持 |
nowrap✨ | 不换行(仅单行,会超出) | 合并成一个 | 不支持 |
pre | 换行(行为单位,会超出) | 保留全部空格 | 支持 |
pre-wrap🚩 | 换行 | 保留全部空格 | 支持 |
pre-line | 换行 | 合并成一个 | 支持 |
- 长文本空格保留问题
div.msg { white-space: pre-wrap; }
Copied!
- 内容省略应用
/* 单行文本溢出 */ .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; }
Copied!
# 2、filter-function
- grayscale() (opens new window) : 对图片进行灰度转换,它是 <filter-function>
的子属性
- blur() (opens new window):将高斯模糊应用于输出图片
/* 黑白悼念主题 */ html { filter: grayscale(1); } /* 模糊处理 */ img { filter: blur(4px); }
Copied!
# 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; }
Copied!
# 4、iframe 使用
<iframe src="https://note-taking.cn/"></iframe>
Copied!
iframe { border: none; outline: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
Copied!