纯の前端练习
20200118: 刷到第 50 号效果，想想原来自己大部分用 js 写，判断各种边界情况，感觉好弱鸡。 突然对 css 有种领悟：css 的美是自然雕琢的美，不像 js 那样需要人工抹粉涂口红！
20200104: 刷到 999 成神，刷到 9999 超神. (有生之年系列?)
20190429: 补到今天又点感觉，简单特效，看了效果就能写~
get 新的 css-tricks
.option-input {
-webkit-appearance: none;
-o-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
right: 0;
bottom: 0;
left: 0;
height: 40px;
width: 40px;
transition: all 0.15s ease-out 0s;
background: deepskyblue;
border: none;
color: white;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
option-input:hover {
background-color: white;
}
.option-input:checked::before {
height: 40px;
width: 40px;
position: absolute;
content: '✓';
display: inline-block;
font-size: 30.5559px;
text-align: center;
line-height: 40px;
}
真是感慨 css-tricks 的精髓所在！ 原来卡片叠飞的效果这样搞啊！
<div class="imgBx">
<img src="./1.jpeg" alt="1" />
<img src="./1.jpeg" alt="1" />
<img src="./1.jpeg" alt="1" />
</div>.container .imgBx:hover img:nth-child(3) {
transform: translate(100px, -100px);
}
.container .imgBx:hover img:nth-child(2) {
transform: translate(50px, -50px);
opacity: 0.5;
}
.container .imgBx:hover img:nth-child(1) {
transform: translate(0px, 0px);
opacity: 0.1;
}
此动画很能体现 css 的 tricks 精髓所在！
- css 倒映
-webkit-box-reflect: below 1px linear-gradient(transparent, #003) - css 滤镜调色
filter: hue-rotate(115deg); - 按钮左上和右下原来是两个小方块！
- 该动画精髓在延迟
transition-delay
- 🎉 实现原理：
- 一个大容器定下宽和高
- 一个光标 div 在大容器下根据 index 算 transformY 移动即可
text-rendering: optimizeLegibility;浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。 (Chrome 上没效果)
get 到 css 书写规整新技能
原理是张背景图 😂
效果一般点
- 🎉 实现原理：
- 首先 “border-radius: 0 0 50% 50%“ 画半个圆的
- 再将 “border-radius: 0 0 50% 50%/0 0 100% 100%;” 圆的垂直方向也设，成一个椭圆。
- ”border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;“
- 🎉 实现原理：
- 多个 "box-shadow" 的错位 + "border-radius" 实现小点阵效果；
- "background-color: currentColor;" 可以实现每行第一个小圆点带色；
- 使用 "animation-delay: -1s;" 让两个点阵有间隔；
- 🎉 实现原理：
- .face 都设 absolute，“后”覆盖“前”
- 对别对卡片容器.face2 和里面 h2 对 transition
- 改变高度和设置容器字体大小
- 这里使用 em，非常恰当，因为 em 就是根据上级父元素大小来定子元素大小
- ✅ 知识点：
- grid 布局
- 在.container 中设宽度 1200px，然后定义为 grid 布局，设置 grid 布局中每列的样式，最小 350px 的宽度，最大 1fr(均分)，auto-fit 表示一行能装几个装几个 card;
- grid-gap 设置每个轨道之间的间隙，不含最左和最右；
- 使用 margin 让其水平居中
- 对半视差折纸展示
- 在容器内部加个 before 的伪类，然后占位 50%和 10%的透明
- 关于卡片内部布局
- 先设两个展示也都 absolute，因 html 元素先后顺序，天生后面元素覆盖前面元素，则不需要设置 z-index
- grid 布局
- ✅ 知识点：
html { scroll-behavior: smooth; }
- 🎉 实现原理：
- 外层有个 flex 容器放 N 个图片，每个图片设 flex-grow 和 transition
- 让被聚焦时，再次设置 flex-grow 大小，这个大小得根据图片宽度来定
- 图片容器再次 flex，因为内部描述容器需要定位
- 外层容器聚焦时给默认所有图片容器设置透明度较黑
- 指定给具体内层获得聚焦的图片容器设置透明度为零
- ✅ 知识点：
flex-grow最佳实现之一
- 🎉 实现原理：使用帧动画将承载文本的容器宽度(width)一点一点的放大，直到所有文字全部展现。
- ✅ 知识点：
ch数字 0️⃣ 的宽度，好比理解为一个等宽字体的短度，这里使用 ch 精确控制容器宽度(到底要显示几个字母)white-space: nowrap;规定段落中的文本是否换行，因为容器刚开始宽度很小，必须设置 nowarp 不换行，记得超出部分隐藏steps在 css3-animation 中，该属性表示动画分为几段。怎么理解？简单理解显示器刷新频率。
