CSS3实现页面滚动时填充图标颜色动画效果源码.zip资源-CSDN文库

共3个文件

svg：2个

html：1个

版权申诉

163 浏览量 2022-11-02 23:37:32 上传评论收藏 3KB ZIP 举报

在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的动画效果和交互设计能力。这个“CSS3实现页面滚动时填充图标颜色动画效果源码.zip”压缩包包含了一个实例，它展示了如何利用CSS3技术，在用户滚动页面时，使图标的颜色动态填充，增强用户体验和视觉吸引力。我们要理解CSS3的关键帧动画（@keyframes）是实现这种效果的核心工具。关键帧动画允许我们定义一个动画的起始状态和结束状态，以及中间的任意状态，浏览器会自动计算并平滑地过渡这些状态。在本案例中，我们可以创建一个名为“fill-color-animation”的关键帧动画，设置0%的关键帧为图标初始无色状态，100%的关键帧为图标完全填充颜色的状态。例如： ```css @keyframes fill-color-animation { 0% { fill: transparent; /* 或者 color: transparent，取决于图标的类型 */ } 100% { fill: #your-color; /* 替换为你要的颜色 */ } } ``` 接下来，我们需要将这个动画应用到图标上。CSS3的`animation`属性可以接受多个参数，包括动画名称、持续时间、延迟、次数、方向、填充模式等。在这个例子中，我们可能将动画应用于一个SVG图标或具有背景色的HTML元素，如： ```css .icon { animation: fill-color-animation 0.5s ease-in-out 0s forwards; } ``` 这里，`0.5s`表示动画的持续时间，`ease-in-out`是动画的缓动函数，`0s`是延迟时间，`forwards`意味着当动画结束后，元素将保持在最后一个关键帧的状态。此外，为了实现滚动时的触发效果，我们需要结合JavaScript来检测页面滚动事件。通常，我们可以使用`window.onscroll`事件监听器，然后计算元素相对于视口的位置和可见性。如果元素进入视口，我们就添加一个CSS类来启动动画；如果元素离开视口，就移除该类，停止动画。 ```javascript window.addEventListener('scroll', function() { var icons = document.querySelectorAll('.icon'); icons.forEach(function(icon) { var rect = icon.getBoundingClientRect(); if (rect.top >= 0 && rect.bottom <= window.innerHeight) { icon.classList.add('in-view'); } else { icon.classList.remove('in-view'); } }); }); ``` 在CSS中，我们可以为'in-view'类添加`animation-play-state: running;`，确保只有当元素在视口内时，动画才会播放。 ```css .icon.in-view { animation-play-state: running; } ``` 这个压缩包中的源码示例通过CSS3的关键帧动画和JavaScript的滚动事件监听，实现了在页面滚动时图标颜色填充的动态效果。这样的设计不仅提高了用户的互动体验，还能让网站看起来更生动有趣。开发者可以在此基础上进行定制，调整动画速度、颜色、以及何时启动和停止动画，以适应不同项目的需求。

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现页面滚动时填充图标颜色动画效果源码.zip （3个子文件）

132677886013961328

img

cd-icon-1-large.svg 2KB

cd-pattern-large.svg 623B

index.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 页面滚动时填充图标颜色</title> <style> @import url(http://fonts.googleapis.com/css?family=Signika); *, *:after, *:before { -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { color: white; height: 100%; background: #3e253c; font-size: 16px; font-family: 'Signika', sans-serif; } body:before, body:after { content: ''; position: fixed; width: 89.8%; max-width: 1170px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: auto; height: 50%; z-index: -1; } body:before { top: 0; background-color: #f4bd89; -webkit-transition: all 0.8s; transition: all 0.8s; } body:after { top: 50%; background-color: #71495b; } h1, h2, p { margin-bottom: 20px; } h1 { font-size: 3em; } h2 { font-size: 2.3em; } p { font-size: 1.25em; } header { position: relative; background-color: #3e253c; height: 50%; text-align: center; } .contain li { position: relative; z-index: 2; min-height: 525px; margin-left: 420px; background-color: #3e253c; padding: 6em 2em; } .contain li:before, .contain li:after { content: ''; position: absolute; width: 420px; right: 100%; z-index: 2; } .contain li:before { top: 0; height: 325px; background-repeat: no-repeat; } .contain li:after { top: 325px; bottom: 0; background-image: url(img/cd-pattern-large.svg); } .icon-1:before { background-image: url(img/cd-icon-1-large.svg); } </style> </head> <body> <header> <h1>Icon fill on scroll</h1> </header> <ul class="contain"> <li class="icon-1"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore saepe eaque dolorem officiis. Reiciendis eveniet, nihil, numquam eum unde quibusdam itaque, libero veritatis maiores ex architecto minus, enim pariatur accusantium.</p> </li> <li class="icon-1"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore saepe eaque dolorem officiis. Reiciendis eveniet, nihil, numquam eum unde quibusdam itaque, libero veritatis maiores ex architecto minus, enim pariatur accusantium.</p> </li> </ul> </body> </html>

评论收藏

内容反馈

版权申诉