html来回滚动文字代码(html 文字滚动) 收藏 0

css3中的transform属性应用-向上滚动动画

css3中的transition和transform配合可以做出许多好玩的东西来，下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走，不谢！

这个应用在展示网站模板或者图册显示应用很广泛！

一、先看效果：

二、效果说明：

当鼠标移动到div或者是a链接的时候，图片向上滚动，直到显示完全，当鼠标移开的时候，图片回到最开始的位置。

三、效果分析：

向上滚动肯定应用到css3的属性：transform 和transition；下面我们来看看它的用法：

1. transform

• 曾经在一篇文章（）中说过了scale和transform-origin的应用，今天主要用到的是transform: translate3d这个属性。

• transform: translate3d（x ，y，z）主要作用就是：定义 3D 转化，当然这次我们只是用了Y轴的变化，所以定义Y轴的数值或者百分比就可以。

2、transition：

用法：包含4个属性：transition: property duration timing-function delay;

• property : CSS 属性的名称

• duration 完成过渡总共时间

• timing-function 效果或者曲线

• delay 延迟时间

  在下面的实例中将看到真正用法：

四、实现效果：

1. html结构：

   大概说一下：frame.png就是外面那个苹果电脑的图片；

   Convertible.jpg是我们的网站模板图片，很长；

2. css样式：

5. 最核心的代码，就是最后那一段，看到了-86.8%了吗？这个数字是我测试出来的，根据自己图片的高度，大家的高度不同，则这个值不同。

   transition: transform 6s linear; 意思是说，transform这个属性将用6秒匀速的形式完成过渡；

完成了，是不是很简单，其实，css不难，难就难在一个思路上，如果思路正确，就可以实现好的方案。

最后，谢谢大家观赏，欢迎订阅！

如何给别人网页上增加内容通过Chrome扩展为网页添加快速滚动功能

来看开发网站的介绍，Content Scripts 是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口，实现

1. 读取浏览器访问的网页的详细信息，比如网页的DOM结构、元素属性等。
2. 对网页进行修改，比如添加、删除或修改DOM元素，改变网页的样式等。
3. 将获取到的网页信息传递给它们的父级扩展程序，以便扩展程序可以进一步处理这些信息，实现一些功能。

很明显，我们的需求就需要借助 Content Scripts实现。

WXT直接在entrypoints/content.ts中编写Content Scripts内容，主要关注两点

代码解读

复制代码

export default defineContentScript({ matches: [\'<all_urls>\’], main(ctx) { }, });

• matches: 用来匹配网页地址，让脚本内容在哪些网页上运行。比如匹配Google就是 *://*.google.com/*
• main: 就是真正编写脚本内容的地方

要往页面上添加元素，WXT提供了三种不同的方式:

我们选择采用 Integrated ，并继续使用React来渲染页面

代码解读

复制代码

export default defineContentScript({ matches: [\'<all_urls>\’], main(ctx) { const ui = createIntegratedUi(ctx, { position: \’inline\’, anchor: \’body\’, onMount: (container) => { const root = ReactDOM.createRoot(container); root.render(<Content />); return root; }, onRemove: (root) => { root.unmount(); }, }); ui.mount(); }, });

position支持inline、overlay和modal，看一张图就理解

先思考实现的步骤：

1. 初始化WXT项目：跟之前一样快速初始化一个WXT功能，并选择React，增加Antd依赖。
2. 创建Popup页面：用于控制当前页面是否启用滚动功能，并提供快捷键说明。
3. 监听快捷键：在main函数中增加快捷键监听，实现快捷滚动功能。
4. 完善Content组件：创建一个React组件，用于在页面上显示滚动到顶部和底部的按钮，并处理鼠标悬停和点击事件。

其中关键的代码示例如下：

要监听快捷键，直接在之前的main函数中增加监听

代码解读

复制代码

main(ctx) { ctx.addEventListener(document, \”keydown\”, async (e) => { // key down event if (e.shiftKey) { if (e.key === \”ArrowDown\”) { if (await WxtStorage.get(CONSTANTS.arrowDownStateKey, true)) { UTIL.scrollToBottom(); } } else if (e.key === \”ArrowUp\”) { if (await WxtStorage.get(CONSTANTS.arrowUpStateKey, true)) { UTIL.scrollToTop(); } } } }); … }

接下来完善Content组件

代码解读

复制代码

function Content() { const host = window.location.hostname; const [isTopHover, setTopHover] = useState(false); const [isBottomHover, setBottomHover] = useState(false); const [visible, setVisible] = useState(false); useEffect(() => { const fetchVisible = async () => { const value = await WxtStorage.get(CONSTANTS.hostStatePrefix + host, 1); setVisible(value === undefined ? true : value! === 1); }; fetchVisible(); }, []); const baseStyle = { width: \’30px\’, height: \’30px\’, padding: \’10px\’, margin: \’5px\’, borderRadius: \’10px\’, cursor: \’pointer\’, } const scrollToTopStyle = { …baseStyle, opacity: isTopHover ? 1 : 0.2, backgroundColor: isTopHover ? \’#efefef\’ : \’transparent\’, } const scrollToBottomStyle = { …baseStyle, opacity: isBottomHover ? 1 : 0.2, backgroundColor: isBottomHover ? \’#efefef\’ : \’transparent\’, } return ( <div style={{ position: \’fixed\’, top: \’50%\’, right: \’10px\’, transform: \’translate(0, -50%)\’ }}> <div style={{ visibility: visible ? \’visible\’ : \’hidden\’ }}> <img style={scrollToTopStyle} onClick={UTIL.scrollToTop} onMouseEnter={() => setTopHover(true)} onMouseLeave={() => setTopHover(false)} src={TopImg} alt=\’Go to top\’ /> </div> <div style={{ visibility: visible ? \’visible\’ : \’hidden\’ }}> <img style={scrollToBottomStyle} onClick={UTIL.scrollToBottom} onMouseEnter={() => setBottomHover(true)} onMouseLeave={() => setBottomHover(false)} src={BottomImg} alt=\’Go to bottom\’ /> </div> </div> ); }

完整代码见： github.com/xckevin/chr… 最终效果图如下

原文链接：https://juejin.cn/post/7430475913959325730

html中滚动字体的设置

网页中添加滚动字幕效果

<!DOCTYPE html>

<html>

<head>

<meta charset=\”utf-8\”>

<title>滚动字体的设置</title>

</head>

<body>

<canvas id=\”canvas1\” width=\”600\” height=\”600\” style=\”border:1px solid #000000\”></canvas>

<script type=\”text/javascript\”>

var canvas1 = document.querySelector(\”#canvas1\”) // 1.找到画布对象

var ctx = canvas1.getContext(\”2d\”) // 2.上下文对象（画笔）

ctx.shadowBlur = 10; // 阴影距离

ctx.shadowColor = \”red\” // 阴影颜色

ctx.shadowOffsetX = 30 // 阴影偏移

ctx.shadowOffsetY = 30 // 阴影偏移

ctx.font = \”150px 楷体\”

ctx.fillText(\”你好！\”, 20,150)

ctx.fillText(\”你好！\”, 20,350)

ctx.strokeText(\’你好！\’,23, 153)

ctx.strokeText(\’你好\’,23, 553)

canvas绘制文字

var x = 600

setInterval(function(){

if(x > -350){

//清空画布

ctx.clearRect(0,0,600,600)

ctx.strokeText(\’你好！\’,x, 153)

ctx.fillText(\”你好！\”, x,350)

ctx.font = \”50px 宋体\”

ctx.strokeText(\’每天学习一点点\’,x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com