分享 8个超炫酷的纯 CSS3 动画源码
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯 CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画,有几个非常经典,比如大象走路的那个,如果你对CSS3感兴趣,赶紧来看看 吧。 **1、纯CSS3实现大象走路动画** 之前我们分享过一款纯[CSS3人物行走动画](ht...
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯 CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画,有几个非常经典,比如大象走路的那个,如果你对CSS3感兴趣,赶紧来看看 吧。 **1、纯CSS3实现大象走路动画** 之前我们分享过一款纯[CSS3人物行走动画](ht...
<p>对于未对中国大陆优化的博客站点而言,图片懒加载几乎是必备的功能,它能够有效提高页面的首屏速度。静态站点的懒加载方案有很多,但都必然会带来布局偏移的问题,影响页面的 <a href="https://web.dev/cls/">CLS 分数</a> 。</p> <p>本文将基于浏览器原生懒加载和...
<blockquote> <p>前几天给 XSS 平台加了手机端自适应,但是导航按钮和导航页背景色一直存在问题,今天终于将它给完美解决,第一次遇到这种问题,所以写篇文章记录一下,顺便帮下遇到同样问题的童鞋。</p> </blockquote> <h2>解决方法</h2> <p>其实主要就是一个 ...
<h2>效果展示 {#效果展示}</h2> <h3>清除浮动前 {#清除浮动前}</h3> <p><a href="/img/posts/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A81.png"><img src="/img/posts/%E6...
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%801.png"><img src="/img/posts/%E4%B...
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%801.png"><img src="/img/posts/%E4%B...
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD1.png"><img src=&quo...
一直以来,习惯在 flex 布局中使用 `gap` 这个属性设置间距,一直以来也都是在最新的 Chrome 上调试,所以从来没有想在 flex gap 在其他浏览器上存在兼容性问题。最近看了一下文档才反应过来,`gap` 原来只是 grid 布局的属性,虽然近些年来[主流浏览器都已经支持了](https://caniuse.com/flexbox-gap),但是一些使用人数不少...
<br />  无论是`rgb()`颜色函数,还是`hsl()`颜色函数,现在还支持一...
一、移动端公共样式 {#menu_index_1} ------------------------- /* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 ...