整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天用js做的图片无缝滚动的效果，朋友们都说CSS3也可以实现，话说自己原来学的都是CSS2，主要用来网页静态布局，还真没想过用CSS3的动画属性。于是乎，花了一天时间在w3school上把关于CSS3动画的知识看了一遍，简单做了个图片滚动的效果，有些简陋，却也发现CSS3的功能果然强大，也有一些浏览器兼容性的问题（不过大家现在用的浏览器应该都能支持，别告诉我你还在用XP，那你真是超级怀旧派了，话说XP的确挺好）
这个是用来定义动画规则用的，在其中能够定义任意多样式任意多次数的动画规则，可以用百分比来规定变化发生的时间。比如0%，25%，50%，75%，100%，也可以用关键词“from”和“to”，等同于0%和100%。
0%是动画的开始，100%是动画的结束。一般来说，为了得到浏览器更好地支持，我们要始终定义0%和100%。
举个例子，我们在动画开始的时候，定义一个div元素的背景色为红色，动画到一半的时候，定义背景色为蓝色，动画结束的时候，背景色为黄色，怎么写这个动画规则？
@keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
一般来说，为了更好的适配浏览器，我们还要写几个作用于不同浏览器的规则
1、作用于Firefox浏览器
@-moz-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
2、作用于Safari和Chrome浏览器
@-webkit-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
3、作用于Opera浏览器
@-o-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
1、animation-name:规定动画的名称
2、animation-duration:规定动画完成一个周期的时长
3、animation-timing-function:规定动画的曲线速度
4、animation-delay:规定动画开始的时间
5、animation-iteration-count:规定动画播放的次数
6、animation-direction:规定动画在下个周期是否反向播放
7、animation-play-state:规定动画是否正在运行或暂停
888、animation:简写属性，将上边1—6的属性在一个表达式中体现，可以减少N多工作量。
最重要的一点，动画规则只有捆绑到某个选择器上，动画才生效。意思一看都明白，关键是要多练习实际敲几次代码运行下效果，这里我就不再累赘了。
1、摆上我们用来演示的图片。
<body>
<p>图片无缝滚动</p>
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
</body>
2、加上CSS样式
*{margin:0; padding: 0;}
p{
margin:0 auto;
text-align: center;
font-size:30px;
}
#wrap{
width:610px;
height:130px;
border:1px solid #000;
position: relative;
margin:100px auto;
overflow: hidden;
}
#list{
position: absolute;
left:0;
top:0;
width:200%;
}
#list li{
width:120px;
height:130px;
border:1px solid red;
background: pink;
color:#fff;
text-align: center;
font-size:50px;
float:left;
list-style: none;
}
3、给ul加上动画效果。为了适配不同的浏览器，还要多添加几个animation属性
#list{
position: absolute;
left:0;
top:0;
width:200%;
animation:myfirst 8s linear infinite alternate;
-moz-animation:myfirst 8s linear infinite alternate;
-webkit-animation:myfirst 8s linear infinite alternate;
-o-animation:myfirst 8s linear infinite alternate;
}
好了，大家可以看一看具体效果咯。
用CSS3实现图片滚动确实很轻松，效果也挺不错。还是最开始我说的，前期我们暂不必纠结到底JS方法好还是CSS3方法好，只要能把要求的效果实现了就行，进步缘于一点一滴的实践与锻炼。
谨以此与大家共勉——一个奋斗在web开发路上的小白
动条的边角。
最近我朋友问我，他说他使用CSS自定义的滚动条，当x轴和y轴都出现滚动条的时候，它的右下角有个缺口是白色的缺口，挺难看的。他说他想把这玩意染成绿色的，问我有没有办法。
·我就先去看了一下系统自带的滚动条，把它放开看一下，你会发现系统自带的滚动条右下角的缺口是和盒子的背景的主色是一个色系，都是这种灰色。因为是外层盒子的滚动条，所以它跟随外层盒子的背景色是同样的颜色。
·然后我就去看了一下文档，发现这一个缺口的地方是可以设置的，这个缺口学名叫做边角，也就是滚动条的边角。
·然后我们看第三个案例，你会发现第三个盒子的右下角有一块绿色的部分，这个绿色的部分就是滚动条的边角部分。
·然后看一下是怎么设置的，是通过web kit scuba corner对这个伪元素进行设置背景色，就可以去修改这个边角的颜色。
内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 700+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 HTML 代码片段，只需一行代码即可实现图片懒加载的处理。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
<img src="example.jpg" alt="示例图片" loading="lazy">分享原因
这段代码使用 HTML5 提供的一个非常简单的方法：为图片元素添加 loading="lazy" 属性，实现了图片的懒加载。
通过这种方式，我们可以让浏览器自动处理图片懒加载，无需额外的 js 脚本支持。
这对于不需要考虑兼容性的项目来说，实现图片的懒加载非常高效！
代码解析
1. src="example.jpg"
src属性指定了要显示的图片的文件路径，这里是example.jpg。
2. alt="示例图片"
alt属性提供了图片的替代文本描述。
当图片由于某种原因无法加载时，这个文本会显示出来，同时也有助于屏幕阅读器为视障用户描述图片内容。
3. loading="lazy"
loading属性设置为lazy表示延迟加载图片。
当设置了 loading="lazy" 时，浏览器会延迟加载图片，直到图片即将进入视口（用户即将看到的屏幕区域）。这意味着在页面加载的初始阶段，浏览器不会立即请求和加载这些图片，而是优先加载页面的关键内容，如文本和主要布局。
当用户滚动页面使得图片即将可见时，浏览器才会开始加载图片资源，从而减少了初始页面加载时的网络请求数量和数据量，加快了页面的呈现速度。
大多数现代浏览器都支持 loading="lazy" 属性，但在一些较旧的浏览器中可能不被支持。
对于不支持的浏览器，可以使用 JavaScript 库（如 lazysizes）来实现类似的懒加载效果。
*请认真填写需求信息，我们会在24小时内与您取得联系。
