HTML on 粥粥个人博客

记录一个纯CSS实现滚动驱动动画的效果

Sun, 14 Sep 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：记录一个纯CSS实现滚动驱动动画的效果

先看一下这个简单的案例

代码：

你也可以直接划到下边看效果。

<div class="out-cont">
    <!-- 最外层元素，用于框定元素需要固定的距离 -->
    <div class="inner-cont">
        <!-- 内层元素，用于固定元素的位置 -->
        <div class="animation-item">
            <!-- 播放动画的元素内容 -->
        </div>
    </div>
</div>
<style>
.out-cont {
/* 最外层元素，用于框定元素需要固定的距离，这里表示元素将被固定两个屏幕的高度 */
    width: 100%;
    height: 200vh;
    position: relative;
}
.inner-cont {
/* 内层元素，用于固定元素的位置，使用sticky使元素在范围内固定 */
    width: 100%;
    height: 50vh;
    position: sticky;
    top: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation-item{
/* 播放动画的元素内容，使用animation-timeline实现滚动驱动动画 */
    width: 20%;
    aspect-ratio: 1;
    background-color: #2E74B5;
    animation: move 1s linear forwards;
    animation-timeline: view();
    animation-range: contain;
}
@keyframes move {
    0% {
        transform: rotate(0deg);
        border-radius: 8%;
    }
    50% {
        transform: rotate(360deg);
        border-radius: 50%;
    }
    100% {
        border-radius: 8%;
        transform: rotate(720deg);
    }
}
</style>

效果：

.out-cont

.inner-cont

视口

sticky：粘性布局

对于前端码农来说这个玩意并不陌生，所以就只简单介绍一下：
position:sticky是介于position:relative与position:fixed之间的一种布局方式。当父元素出现在屏幕中时它表现得像fixed，会把自己固定在屏幕上。当父元素出现在屏幕外时它表现得像relative，会按照正常的文档流进行布局，被父容器带走。
关于这个案例是如何使用sticky实现类似元素固定的效果的，上面效果示例右边有一个简单的展示，可以帮助理解。而且这个展示也是纯css的哦。

如何向页面中嵌入UnityWeb3D

Fri, 18 Apr 2025 00:00:00 +0000

文章在个人网站中发布，原文链接：如何向页面中嵌入UnityWeb3D

随着现在设备性能的提升，向网站中插入3D模型已经不是啥稀奇事情了。而且插入3D元素能极高地提高用户体验，再加上一些用户交互就能给人非常惊艳的体验。
目前比较流行的Web3D技术有three.js、还有可视化编辑模型与交互的spline，不过three.js的学习难度和spline的高昂价格已经足够让一部分人望而却步了。
那有没有更经济和简单的技术呢？有的有的，兄弟有的，UnityWeb3D也许就是一个不错的选择。

纯CSS实现循环翻牌效果

Fri, 27 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现循环翻牌效果

先看效果

点击卡片就能切换一张，并且整个实现过程并没有用到js。这个样例中除了两张卡片外其实还有两个透明的input，你点击到的其实是这俩input，而且这俩input会在点击后修改自身的z-index属性，保证你下次点击必定会点击到另外一个。

纯CSS实现评分组件

Wed, 25 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：纯CSS实现评分组件

先看效果

以下是一个纯靠css实现的评分组件，点击星星即可评分，不同的评分将会展示不同的颜色。

如何实现一个宽度随文字变化的输入框

Tue, 24 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：如何实现一个宽度随文字变化的输入框

有些时候我们需要制作宽度随输入的文字变化的输入组件，例如下面这个tag输入框：

为不确定高度的元素添加过渡动画

Tue, 24 Sep 2024 00:00:00 +0000

文章在个人网站中发布，原文链接：为不确定高度的元素添加过渡动画

有时候我们会遇到这种情况，容器内部由元素撑开无法知道其高度，又需要实现平滑过渡。就像这样：