图片展示
简单说就是个双向无限滚动的广告展示框。上面一排从左往右滑，下面一排从右往左滑，鼠标放上去就停，点一下就能跳转。放在WordPress的小工具里，当广告位用正好。
效果大概长这样：
-
毛玻璃背景，现在挺流行的那种
-
图片默认是灰的，鼠标一放上去变彩色还放大
-
边缘有渐变遮罩，不会突然截断
-
手机上看自动缩小，不会崩
代码结构其实不复杂
整个东西分三块：外壳、滚动层、广告项。
外壳就是个大盒子，控制圆角、背景、边框这些外观。滚动层里面放两组一模一样的广告，一组看得见，一组复制出来藏在后面。CSS动画让两组一起往左移（或者往右），第一组刚走完，第二组正好接上，肉眼看不出来接缝，就形成无限循环了。
反向那行加个
ad-marquee--reverse 类，动画方向反过来，搞定。几个实用的小细节
悬停暂停这个我觉得必须有。不然用户想点广告，结果图片一直在跑，根本点不准。加个
:hover 让动画暂停，体验好很多。还有灰度滤镜，默认把图片变灰，悬停恢复彩色。这招是从大厂学的，页面不会显得太花哨，但交互感很强。
图片高度我锁死在40px，宽度自适应。这样不管上传什么尺寸的图片，都不会把布局撑坏。
怎么用在WordPress上？
-
后台 → 外观 → 小工具
-
拖个”自定义HTML”到侧边栏
-
代码贴进去，完事
改广告的话，找下面这段：
HTML
<span class=“token tag”><span class=“token punctuation”><</span>a<span class=“token attr-name”>href</span><span class=“token attr-value”><span class=“token punctuation attr-equals”>=</span><span class=“token punctuation”>“</span>你的链接<span class=”token punctuation“>”</span></span> <span class=“token attr-name”>class</span><span class=“token attr-value”><span class=“token punctuation attr-equals”>=</span><span class=“token punctuation”>“</span>ad-item<span class=”token punctuation“>”</span></span> <span class=“token attr-name”>target</span><span class=“token attr-value”><span class=“token punctuation attr-equals”>=</span><span class=“token punctuation”>“</span>_blank<span class=”token punctuation“>”</span></span><span class=“token punctuation”>></span></span>
<span class=“token tag”><span class=“token punctuation”><</span>img<span class=“token attr-name”>src</span><span class=“token attr-value”><span class=“token punctuation attr-equals”>=</span><span class=“token punctuation”>“</span>你的图片地址<span class=”token punctuation“>”</span></span> <span class=“token attr-name”>alt</span><span class=“token attr-value”><span class=“token punctuation attr-equals”>=</span><span class=“token punctuation”>“</span>描述<span class=”token punctuation“>”</span></span><span class=“token punctuation”>></span></span>
<span class=“token tag”><span class=“token punctuation”></</span>a<span class=“token punctuation”>></span></span>
想加几个就复制几个，但记住两组内容必须完全一样，不然循环的时候会跳。
调速度找这里
CSS里搜
animation: ad-scroll 25s，那个25就是秒数。想跑快点改成15，想慢点改成40。最后
这代码没依赖任何插件，纯CSS+HTML，加载速度还行。测试了Chrome、Safari、Edge都没问题，IE就算了。
完整代码和说明都写在里面了，注释标得挺清楚，以后改起来不费劲。
需要就拿去用，有问题自己调调，反正代码是死的，人是活的。
部署
© 版权声明 All Rights Reserved
THE END
联系站长
暂无评论内容