CSS宽度自适应的一些小方案

主要实现方法：利用flex布局父元素添加flex属性并固定宽度，左侧导航栏宽度固定，右侧主题部分设置flex-1父元素添加flex属性并固定宽度，左侧头像和右侧发布按钮宽度固定，中间输入部分设置flex-1

CSS无缝轮播图(逐帧动画版本)

主要思路：先在:root中设置不包括最后一张图的轮播图的个数(最后一张图为第一张图)和每一帧切换的时间,然后通过ul设置逐帧动画效果使得图片切换，但是这仅是图片的切换效果，图片仍然没有移动，这时就需要再通过li设置补间动画使得li标签中的图片在ul一帧切换的时间内产生平移效果。<!DOCTYP

主要学习通过js动态生成按钮控制音乐播放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=&qu

主要思路：用js将标签内的元素拆分并将每一个元素都生成一个个新的span标签设置不同的过渡延迟返回<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible&q

主要思路：让奇数的盒子左移至视窗外，偶数的盒子右移至视窗外，然后window对象添加滚动监听事件，滚动到相应区域，外移的盒子就移动回来<!DOCTYPE html><html lang="en"><head> <meta charset

主要思路：设置一个定时器动态更改背景的高斯模糊效果和进度文字的透明度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible&q

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible&q

主要思路：在一个容器中用display:flex + justify-content:space-between将几个块级元素水平均匀分布并且第一个元素和最后一个元素靠边,然后设置progress进度条和伪元素进度条样式一下且置于块级进度显示元素下方，用js实现点击按钮控制进度条长度变化<!D