HTML+CSS小实例
每日小例子
打算跟着https://space.bilibili.com/13604667/，每天一个小实例，提升自己的CSS和HTML技术
这块就打算是某些小组件的实例，比如我看到的一个搜索栏的实例，就是某一类的实现。
这块的代码我放到HTML · 晓凹凸曼/learn/HTML
按钮
涟漪特效按钮
时间：2022-06-08
关键使用js加上一个span，获取e.offset然后复制给top和left就行了。涟漪的效果使用动画来完成，同时使用长宽变大和透明度降低来弄出涟漪的效果。
3D分层悬停效果
时间：2022-05-23
这些闪光按钮都大同小异，非常的类似，而且颜色依旧使用var(--c)这种形式来体现，而且不止可以应用于一处，而是可以应用于多处，反而倒是用scss的话，写起来比较复杂和麻烦，而且是生成的完全固定死的，并不是像css这样子动态计算的，所以一个是体积大，一个是需要计算资源，到底哪个合适，我也不知道了。
毛玻璃炫光按钮
时间：2022-05-21
这个有点融合了之前闪光玻璃的特效和毛玻璃的特效，当然我还是写不出来，还是有、小复杂的。
流光按钮
时间：2022-05-15
这块学到的知识点还真实闻所未闻的，对于伪元素这块。
1、首先伪元素，比如::before，就是在当前选中的元素前面创建一个元素，但是这个元素是没有div实体的，之前我还没开始练习的时候， 翻看网站的时候，总是能找到::before，我每次查完也都忘了，然后在这次的实例联系中，发现up主经常用，其实我感觉最主要的用处省去写div，而且位置产生的地方和原本的元素是同一个地方，比如再加一个不同样式的外边框，就可以用这种，还不用处理位置关系。但伪元素不是和原元素平级的兄弟元素，而是子元素。
2、于是在实现z-index的时候，发现展示的时候和实际想要的效果有出入，虽然最终效果都一样，只是过程不对，这篇CSS 伪元素:before&:after 与z-index 的那点事 – Fatesinger做出来答疑。解释如下：
- 同一个层叠上下文里面, 层叠顺序从后向前依次是: 背景和边框、负z-index、块级盒、浮动盒、行内盒、z-index:0、正z-index.
- 伪元素相当于子元素，也就是包含在元素内的，二者不在同一个层叠上下文中。
如果想实现层叠效果，需要元素和对应的伪元素在同一层叠上下文中，所以不能让元素创建层叠上下文。以下情况会创建层叠上下文
- 即便是
position不为static的元素, 如果没有指定一个非auto值的z-index, 该元素就不会建立一个层叠上下文。- 元素的
transform值不是none。
一句话解释，伪元素是子元素，和原本的元素不在同一层叠上下文。所以解决方案只要原本的元素不要设置z-index属性，那么原本的元素就不会建立一个层叠上下文了。
闪光玻璃
时间：2022-05-15
filter: blur(200px);，表示高斯模糊，模糊整个元素的，后代也继承。
backdrop-filter: blur(5px); 将这个元素覆盖住的元素下方进行模糊（不模糊本体，只模糊被挡住的元素部分）
悬停发光
时间：2022-05-16
1、倒影设置，不过这个api不是所有浏览器都支持，所以为了广泛适配，不应该用这个属性。
-webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
2、还有transition这个属性，虽然之前用过几次，就在这里提好了
transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
对后面的top那块作出解释，即这种用法transition: property duration timing-function delay;属性是top，需要0.3s才能完成，转速曲线用的是easy-in-out(符合显示现实规律)，最后一个0.3s表示transition开始的时间，就是是0.3s后开始执行top动画，并且执行过程的时间耗费0.3s。前面相同。
3、css的变量写法？用--i定义变量，然后用var(--i)调用，这里的用法就是，给每个按钮都给个属性，代表是第几个，在html的li中用style写--i:1、--i:1这种写法，然后在li元素中，写如下的代码
filter: hue-rotate(calc(var(--i) * 60deg));
相当于每个li的都传入一个变量i，然后这个变量都是之前在html中写好的，第一个就是1，所以他的滤镜角度就是60，第二个就是2，在纯css中可能这就是比较好的解法，但是我用的scss啊，我觉的html中就不要出现style这个元素。
用scss写的话，我就用下面这种写法，其实css也可以用nth-child来实现，但是要重复好几遍嘛，用这个下面的循环就可以解决了。
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
filter: hue-rotate(calc($i * 60deg));
}
}
云朵特性
时间：2022-05-19
这块其实没有学到什么新的东西，都是之前的组合。
导航栏
侧边导航栏2
时间：2022-06-13
这个侧边导航栏味道是在了，但是感觉还是差点意思，没那么灵动。就是ul套了两次，精髓就是里面的那个ul，使用了绝对定位，并且加上背景颜色，那么第一个就会显示在最上面了再用溢出隐藏和宽度为0把这个东西给隐藏了，然后hover的时候设置宽度就行了。
隐藏式侧边栏菜单
时间：2022-06-02
还行，头一次用到position: fixed;绝对定位
菜单悬停毛玻璃
时间：2022-05-19
无
侧边导航栏
时间：2022-05-18
忘了，也没啥好说的。
弹性导航栏
时间：2022-05-15
这个用到的一个就是函数曲线——贝塞尔曲线，能够实现更加Q弹和灵活的动画效果
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
全屏导航栏菜单
时间：2022-05-16
clip-path，可以裁剪，常用裁剪成圆形：clip-path: circle(100%);，下面这种还是实时计算的。
clip-path: circle(25px at calc(100% - 45px) 45px);
伸缩式导航栏
时间：2022-05-15
white-space: nowrap;禁止换行
pointer-events: none;元素不对指针事件作出反应，有多个元素重叠的时候，可以对有些不需要响应的元素使用这种属性。
悬停展示文字
时间：2022-05-16
没啥说的，说个box-sizing吧，设置成这个属性，就是将内边框和内容算作width。
box-sizing: border-box;
旋转菜单
时间：2022-05-16
背景变透明。
background: transparent;
设置旋转的中心
transform-origin: 50% 50%;
加载
动感环形加载动画
时间：2022-07-04
这个简单，就用了一个div，然后用两个伪元素，通过left、right、top、bottom来限制图形的大小，而不是通过width和height，这点学到了。
心形转圈加载动画
时间：2022-06-11
就是一个爱心疯狂转圈，用上贝塞尔曲线，然后每块的动画都有点差异就行了。
环形加载动画
时间：2022-06-09
这个真的挺难的，需要各种变换，反正我搞不来。
initial就是css用户的默认值，虽然我不知道这个默认值是什么东西。
炫彩流光圆环加载
时间：2022-05-26
这个比较简单，没啥说的，就很基本的操作，我估计我也能写出来。
转动变色加载
时间：2022-05-21
总的来说，也是使用keyframes来完成动效。
roteta(1turn)：表示转一圈
border-color: currentColor transparent;这里有个currentColor关键字，是css中自带的，代表当前元素被应用上的color颜色值，如果当前元素没有的css里指定一个color，那它的颜色会从父元素继承过来。所以需要在父元素那里定义color元素，子元素这块就能够使用父元素指定的颜色，不用每个子元素都定义一遍颜色，当然我觉的用scss的变量也可以实现。
爱心加载特效
时间：2022-05-16
keyframes属性，就是做动画，这个名字就是关键帧，设置不同过程中的动画效果。
调用的时候需要用animation，然后第一个参数是keyframes的函数名称。
animation: beating 1s infinite;
菱形加载动画
时间：2022-05-17
展示方式为表格，当然具体参数我也不知道，只是照着抄了。
display: grid;
grid-template-columns: repeat(3, 1fr); //制作3列的网格容器
grid-gap: 10px; //行列之间的间距都为10px
counter-reset属性创建或重置一个或多个计数器。
counter-reset: number;
然后counter-increment就是自动增长数字吧。
counter-increment: number;
content: counter(number);
三角三色加载
时间：2022-05-16
无
沙漏加载动画
时间：2022-05-17
这个动画确实比较多，可以研究一下。
手风琴式动画
时间：2022-05-17
设置阴影，inset就是内部阴影
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px 15px 20px #fff, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05);
水球加载
时间：2022-05-17
无
液态转圈加载
时间：2022-05-18
这里有个svg滤镜，但是我不知道这个怎么弄，也不知道啥意思。
<svg>
<!-- <filter>标签是用来定义SVG滤镜，通过id进行调用使用 -->
<filter id="gooey">
<!-- <feGaussianBlur>元素是用于创建模糊滤镜 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
<!-- <feColorMatrix>是过滤中的一种类型，使用矩阵来影响颜色的每个通道(基于RGBA)，可以将其想象成Photoshop中的通道编辑一样 -->
<feColorMatrix values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 -10
"></feColorMatrix>
</filter>
<!-- 到这里自定义滤镜就写好了，接下来我们对它进行调用 -->
</svg>
然后在css中引用filter: url(#gooey);。
粘性小球
时间：2022-05-16
这个有点天秀的感觉，很牛逼。这两个配合到一起，有点粘性小球的感觉。
filter：blur会造成元素模糊，filter：contrast设置对比度,能实现元素更亮|淡
方式一：元素设置filter:blur模糊,元素父级设置contrast时,会实现模糊元素相交产生水滴交融且相交部分变清晰的效果
方式二：元素本身设置filter:contrast,对伪元素设置filter:blur模糊,会使得元素和伪元素产生交融。
搜索栏
全屏搜索栏
时间：2022-05-15
垂直居中的一个办法吧，就是设置line-height和height相同，就会垂直居中了。
文字的缩进text-indent: 8px;（亏我傻傻的都用padding）
一般搜索栏
时间：2022-05-20
父节点使用:focus-within，就能监测子节点中的焦点
文字
幽灵文字效果
时间：2022-06-08
啊，这，这个真的是最简单的一个例子了，我绝对能够写出来
动感金属质感闪光文字
时间：2022-06-07
这个效果还挺难的，又学到一个新的东西 `mix-blend-mode，这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。用PS的那个蒙版是不是好理解一点，反正就是加上一层
这里用到了三个值，difference差别，multiply乘法类似PS的正片叠放，color-dodge颜色减淡，反正这几个组合，再加上filter: brightness(300%);这个滤镜，让颜色发亮，就能够实现金属质感的效果
波浪文字效果
时间：2022-05-26
这个我一眼丁真，我也能看出来，就是用上animation和对每个子元素应用不用的animation-delay。
字体滚动发光
时间：2022-05-21
这个很快，实现起来也确实比较简单，最重要的难点是那种刺眼的赛博朋克的光污染效果，需要用text-shadow套好几层
text-shadow:
0 0 10px #32ff7e,
0 0 20px #32ff7e,
0 0 30px #32ff7e,
0 0 40px #32ff7e,
0 0 100px #32ff7e,
0 0 200px #32ff7e,
0 0 300px #32ff7e,
0 0 400px #32ff7e;
聚光灯效果
时间：2022-05-20
background-clip: text; 以文字的范围来裁剪背景图片
文字裂开
时间：2022-05-17
裁剪矩形的下半部分
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
aniplex
时间：2022-05-27
这个案例基本上就是动画，动画非常多，也很难写，但做出来的效果确实牛逼，需要拆分成好几个小动画。
先:hover伪类，再::before伪元素，也就是p:hover::before这样子写
定义透视距离
perspective: 300;
-webkit-perspective: 300;
图片
全屏滚动贴合效果
时间：2022-06-30
这里主要用到一个滚动条的属性，强制滚动和滚动到页面顶部
在父元素里面设置scroll-snap-type: y mandatory;在y轴强制滚动。
在子元素里面设置scroll-snap-align: start;，表示强制滚动当前元素到窗口顶部。
垂直卡片滑动动画
时间：2022-06-13
这个效果挺好的，练习一个简单的卡片式布局也比较合适，显示的效果也还不错，没想到只要每个卡片用一个animation就行了，然后通过delay来实现接连的效果，这我是没想到的。和轮播图的实现方法不一样，估计用轮播图那种方法写起来比较麻烦，这种还是比较合适的。
3D分层图像的悬停效果
时间：2022-06-06
这个比较简单，没什么好讲的
3D立方体旋转相册
时间：2022-06-04
开启3D透视效果
transform-style: preserve-3d;
这个3D立方体就是transform各种XYZ轴，并且rotate各种XYZ轴，拼出六面体，就是这么的朴实无华
响应式卡片悬停
时间：2022-05-26
稍微复杂的一个响应式卡片悬停，主要是内外边距的设置，比较的麻烦，但是其中的visibility: hidden;和opacity:0一起设置的理由我没想到，这两个和display:none最大的区别就是还是占据空间的，但是这两个差不多，应该只需要设置一个就行了。
抽屉式相册
时间：2022-05-25
设置图片保持原尺寸，然后裁剪掉。
object-fit: cover;
object-position: 50% 100%;
3D旋转木马相册
时间：2022-05-18
接触的第一个3D透视的案例。
transform-style: preserve-3d;让其子元素位于3D空间中
静态轮播图
时间：2022-05-18
静态轮播图的关键就是，父元素使用overflow:hidden来控制溢出，并且宽度是固定死的。然后子元素ul的宽度是图片数量*父元素的宽度，相当于胶片平铺一样。li元素使用absolute定位，选中时ul的margin-left: -多少px，这样子元素就会被移出去，相当于相机胶卷照了一次。
label和input可以联动的，input指定id，label指定for，两个相同的名称，就能够联动，就能把input给隐藏了，只控制label就行了。
label[for^='indicator1'] 用法，^=选中开头为XXX的元素。
自动轮播图
时间：2022-05-18
这个是我自己尝试的，一直自动轮播的关键就是设置keyframes动画。并且最后一张图得是第一张图的复制图。也就是图片是 1.jpg 2.jpg 3.jpg 1.jpg 这样子排布，然后动画就是照常进行，当运行到100%的时候，他其实是最后一张图片（也同时是第一张图片的复制），然后因为是无限运行的，他会立马跳转到第一张图，一瞬间的事情，但是在肉眼里看起来好像是没有变化一样。也就是从复制图突变到原图，相当于没有变化。
带缩略图的焦点图切换
时间：2022-05-19
这个比静态轮播图要难一点，关键就是hover的时候，切换大图的url。
网易云轮播图
时间：2022-05-20
这个非常的重要了，算是集大成者了，真正的轮播图就是长这样子的，首先说一下需要实现的功能。
- 鼠标不在图片上面时，能够自动轮播，自动切换图片
- 可以使用左右箭头切换图片，或者点击圆点切换图片，此时不会自动轮播，相当于变成了手动切图。
一开始我想了一下，能不能通过纯css实现，后来发现不能，因为@keyframes不能够从指定位置开始，那么就不能够实现点击切换图之后从当前图自动轮播的功能，所以必须要借助js的力量。
学到的点：
1、object-fit: cover;保持原有尺寸比例，裁剪长边。还有好多属性，可以换来换去。
2、屏幕长度超过多少后，改变css属性
@media screen and (max-width: 1620px) {
.swipe .btn {
&.left {
left: 20px;
}
&.right {
right: 20px;
}
}
}
3、display: inline-block;既在一行内，又可以设置宽度和高度
4、js做的工作非常多，总的就是有几个函数模块，包括手动选择，自动选择（css样式丰富，有动画），播放（Interval定时自动选择），暂停（清除定时器），绑定（给元素绑定事件）
在自动选择里面，用上一个定时器，主要是为了延迟切入一张新的图像的动画。定时器的是必须的，因为此处有两个动作，一个是图片变淡，一个是换图（这里的换图是换dom元素的src，而不是css中的background-image）并且透明度变正常。
自己做了三处优化：
1、在延迟执行里面，加入background-image的动画，经过查阅才发现换个url也是可以产生动画的，css自带。swipe_bg.style.transition = 'background-image linear 0.5s';当然加上去是否好看了另说。
2、事件绑定优化
他原来是这样子的，这样子不好，应该绑定到父元素上面
/* 这种是每个小圆点都绑定事件，这样子就要绑定6个事件*/
for (const key in swipe_select.children) {
if (swipe_select.children.hasOwnProperty(key)) {
const element = swipe_select.children[key];
element.addEventListener('click', (e) => {
e.preventDefault();
// 跳转到当前指示点中data-index所指定的图片
select(e.target.dataset.index);
});
}
}
挪到父元素上面监听，而不是每个子元素都用，降低性能负载
swipe_select.addEventListener('click', (e) => {
e.preventDefault();
if (e.currentTarget != e.target) select(e.target.dataset.index);
});
3、还有个鼠标事件，我没看懂他的，觉得麻烦了，直接使用mouseenter和mouseleave就行了。
登录界面
背景动态变化的登录界面
时间：2022-06-10
这个还是挺好看的，虽然技术上倒是没什么新的，但作为小清新的界面没问题。
猫头鹰不偷看登录界面
时间：2022-06-06
这个确实还有点小难，不过也还好，主要是transform动来动去。还有这个class连着写的，不怎么用。也就是需要满足这几个class都存在的，才可以使用，缺一不可。
其他
简单太阳系
时间：2022-07-04
比较simple的一个例子，div是三个嵌套的，这样子才会有带动的效果，主要靠position:absolute来定位，动画效果用rotateZ来实现持续的运动。
点赞动画效果
时间：2022-06-30
svg的一个例子，外面的线条和里面的样式都可以单独设置。里面的path元素，可以设置fill填充颜色，然后stroke可以设置线条，比如设置成虚线等
滚轮视差响应效果
时间：2022-06-07
背景裁剪成文字样式，并且文字变得透明显示背景，是这个最关键的
// 根据文字范围进行裁剪
background-clip: text;
// 将文字透明镂空
-webkit-text-fill-color: transparent;
然后通过伪元素，弄一张一模一样的背景覆盖，两者就会融为一体了
然后通过js监听scroll，如果大于0，那么就把文字的背景的background-position进行变动就行了
背景不停渐变效果
时间：2022-05-25
原来的有点问题，不能朝着一个方向进行，所以我改良了一下，background那段又重复了一波半，然后在动画那一块再修改一下，看起来是无缝衔接一般
background: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c4c, #8e44ad, #e74c4c, #2980b9, #27ae60, #2c3e50, #27ae60, #2980b9);
手机充电特效2
时间：2022-05-24
这次的充电特效牛逼一点，看起来就比较正常，主要是用上了filter: contrast(15);和blur来达到一个粘性特效，在那个动画的基础上，我稍微改良了一下，不至于让那个动画效果消失的太离谱，主要是加上一个透明度过渡。
雷达扫描特效
时间：2022-05-21
重复的径向渐变 repeating-radial-gradient(transparent 0, transparent 30px, darkcyan 30px, darkcyan 32px),
手机充电特效
时间：2022-05-21
这个和之前的云朵特性差不多，都是通过圆角矩形的旋转上升来模拟波浪，当然这个矩形的圆角设置和动画的设置是关键，目前还不知道有什么诀窍，反正四个圆角要不相等，然后螺旋上升，两个圆角矩阵错开运动，就会有多层波浪的特效。
日月交替效果
时间：2022-05-21
这个感觉非常的不错，但是只做到了元素底部的模糊，更高阶的应该是倒影加模糊，或者更加高阶倒影+水波映射。
