教程网站：前端每日实战
用纯CSS制作一个按钮文字滑动特效
- ::before
- translateY
- data-*
- content
- nth-child
用纯CSS制作一个矩形旋转loader
- @keyframes
- animation-duration
- rotateY
- ntn-child
- z-index
- ::before
- ::after
添加z-index主要是为了营造3D效果
用纯CSS创作一个容器厚边条纹特效
- linear-gradient
- box-shadow
- @keyframes
- background-size
- background-position
- loremipsum
用纯CSS制作一个金属光泽3D按钮特效
- linear-gradient
- variables
- calc
- perspective
- text-shadow
- box-shadow
使用CSS创作一个立体滑动toggle交互控件
- linear-gradient()
- box-shadow
- calc()
- ::before
- jquery toggleClass
使用CSS创作一个闪闪发光的钻石
- variables
- border-width
- border-color
- grid-template-column
- rotate()
使用CSS制作一个3D文字跑马灯特效
使用CSS制作一个充电loader特效
使用CSS制作一个按钮被瞄准的交互特效
使用CSS制作一个同心旋转loader特效
使用CSS制作一个荧光脉冲loader特效
使用CSS制作一个文字断开交互特效
使用纯CSS制作一个冒着热气的咖啡杯特效
- border-bottom-left-radius
- border-bottom-left-radius
- box-shadow
- calc()
- translateY()
- filter
- animation-delay
使用CSS制作一个侧立图书效果
纯CSS制作条形图，不使用任何图形库
- linear-gradient()
- translateY()
- background-image
- background-repeat
- background-position
- background-size
纯CSS制作一个渐变色动画边框特效
纯CSS制作炫酷的同心矩阵旋转动画
- border-color
- calc()
- rotate()
- animation-delay
- box-sizing
- 一些专家甚至建议所有的Web开发者将所有的元素的box-sizing都设置为border-box
纯CSS制作404文字变形为NON文字的特效
纯CSS制作一种有削铁如泥感觉的菜单导航特效
纯CSS为母亲节创作一颗像素风格的爱心
纯CSS创作文本滑动特效的UI界面
纯CSS创作出美丽的彩虹条纹文字
纯CSS创作一个菜单反色填充特效
纯CSS创作出平滑的层叠海浪特效
使用三个正方形，border设置为43%，旋转360度，每个的旋转速度不一致，即可实现。
不使用transition和animation也能做网页动画
- perspective: 三维透视
- transform:
如何把握好transition和animation的时序，创作描边按钮特效
transition: 过渡，可以与 transform 搭配使用
nav ul li:hover::before {
transition:
visibility 0s,
width linear var(--t1x),
height linear var(--t1x) var(--t1x);
}创作一个均衡器loader动画
.clip{
clip-path: inset(10% 0 0 0);
}inset中的值就如同padding的值一样，属于内部切割。
CSS绘制一个充满动感的Vue logo
.outer, .middle, .inner {
position: absolute;
border-style: solid;
/*border-color: var(--c);*/
border-color: transparent;
border-top-width: var(--h);
border-top-color: var(--c);
border-left-width: calc(var(--w) / 2);
/*border-left-color: transparent;*/
border-right-width: calc(var(--w) / 2);
/*border-bottom-color: transparent;*/
/*border-bottom-width: var(--h);*/
}根据MDN上的演示效果及实际运行效果，可以通过设置border的宽度创建三角形
纯CSS创作一个菱形 loader 动画
grid是一个CSS简写属性,可以用来设置显式网格属性和隐式网格属性.
.loader {
width: 10em;
height: 10em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
}grid-grap里面item之间的间距.
grip-template定义网格的行和列,如果定义包含多个重复值,则使用 repeat() 来简化定义.
fr 单元允许使用等分网格容器剩余的可用空间来设置 网格轨道(Grid Track) 的大小.剩余可用空间是
除去所有非灵活网格项之后计算得到的.在下面这个例子中,可用空间减去50px后,再给 fr 单元的值3等分.
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}纯CSS创作一盘蚊香
语句
.coil span:nth-child(odd) {
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.coil span:nth-child(even) {
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/*把一般框线放置到上方*/
.coil span:nth-child(odd) {
align-self: flex-end;
}解释
.example {
border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
}.example {
border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
}解释 align-self 为什么会变成框线在位置上方。
可能是因为使用了 position:absolute 属性.
.coil span {
position: absolute;
width: calc((var(--n) * 2 - 1) * 1em);
height: calc((var(--n) - 0.5) * 1em);
border: 1em solid darkgreen;
}纯CSS创作一个永动的牛顿摆
/*最后，让最右侧的摆线晃动*/
.loader span:last-child {
animation: moving-up 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) infinite alternate;
animation-delay: 0.75s;
--direction: -1;
}
cubic-bezier()是CSS的一个定时函数，它定义了一条立方贝塞尔函数(cubic Bezier curve), 就是像钢笔画调曲线，这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数(easing functions)。
一条立方贝塞尔曲线需要四个点来定义，P0 、P1 、P2 和 P3。P0 和 P3 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。 P0 是 (0, 0)，表示初始时间和初始状态。P3 是 (1, 1) ，表示终止时间和终止状态。
语法
cubic-bezier(x1, y1, x2, y2)
CSS还支持一个定时函数:steps()阶梯函数
| 图片 | 图片 |
|---|---|
.png) |
.png) |
| steps(2,start) | steps(4,end) |
纯CSS创作一个雷达扫描动画
linear-gradient()是线性渐变，repeating-radial-gradient()是重复径向渐变
/*在背景上画出4个同心圆*/
.radar {
background:
repeating-radial-gradient(
transparent 0,
transparent 0.95em,
darkgreen 0.95em,
darkgreen 1em),
linear-gradient(black, black);
}纯CSS创作一副国际象棋
纯CSS创作一块乐高积木
纯CSS创作一个蒸锅
改变 display:flex 的排列方式,默认为 row
纯 CSS 创作一个单元素点阵loader
利用 box-shadow 实现点阵
/*用 box-shadow 画出两组点阵*/
.loader::before,
.loader::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
background-color: currentColor;
box-shadow:
0 0, 2em 0, 4em 0, 6em 0,
0 2em, 2em 2em, 4em 2em, 6em 2em,
0 4em, 2em 4em, 4em 4em, 6em 4em,
0 6em, 2em 6em, 4em 6em, 6em 6em;
border-radius: 50%;
}通过定义 box-shadow 的位置实现，通过逗号分割，可以创建多个背景。
HSL 色彩模式
好的，算法太复杂，有机会再看
纯CSS创作windows启动界面
这个vertical-align属性主要是定义行内元素 (inline) 或单元格元素 (table-cell) 的垂直对齐方式
