2024年09月16日
点击右上方红色按钮关注“web秀”，让你真正秀起来
html
正在加载中<dot>...</dot>
css
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\\A..\\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
2024年09月16日
作者：YJ
转发链接：https://mp.weixin.qq.com/s/_JFheujWvvB6ffsVQgLMOA
周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。
2024年09月16日
点击右上方红色按钮关注“web秀”，让你真正秀起来
以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？
好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一丁点吧。
2024年09月16日
实例
h1, h2, 和 h3元素设置文本的对齐方式：
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
属性定义及使用说明
text-align属性指定元素文本的水平对齐方式。
| 默认值： |
|---|
2024年09月16日
CSS3 Animations
1 @keyframes属性
@keyframes 动画名称{关键帧持续时间% {css样式;}}
@keyframes myanimation
{
0% {top:0px;background-color:#0000cc;}
50% {top:100px;background-color;#339900;}
100% {top:0px;background-color:#330000;}
}2024年09月16日
实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：
滚动的文字
适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：
1、左右弹来弹去的跑马灯
弹来弹去跑马灯! 实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。
2024年09月16日
最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！
2024年09月16日
前言：在CSS3中，动画效果有俩种方式：
第一种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
transition