web前端之小功能聚集、简单交互效果

MENU

  • 纯CSS实现可编辑文字霓虹灯闪烁效果
  • css之实现流水文字、闪烁、荧光、炫酷
  • web前端之文本擦除效果与下划线结合
  • css之下划线动画


纯CSS实现可编辑文字霓虹灯闪烁效果

效果图

edit_flicker_neonLamp1


edit_flicker_neonLamp2


html

<h1 contenteditable="true">Hello World</h1>

style

* {margin: 0;padding: 0;box-sizing: border-box;font-family: arial;
}body {display: flex;align-items: center;justify-content: center;min-height: 100vh;background-color: #07252d;
}h1 {position: relative;letter-spacing: 15px;text-transform: uppercase;text-align: center;color: #0e3742;line-height: 0.7;outline: none;-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);animation: animate 5s linear infinite;
}@keyframes animate {0%,20%,30%,50%,60%,80%,90%,100% {color: #0e3742;}20%,30%,50%,60%,80%,90%,100% {color: #ffffff;text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4, 0 0 80px #03bcf4;}
}

css之实现流水文字、闪烁、荧光、炫酷

效果图

flowingText1


flowingText2


html

<div class="twinkle_text"><p>web前端开发工程师</p>
</div>

style

body {background-color: #333;
}.twinkle_text {background-image: -webkit-linear-gradient(left, #ff0000, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, #ffff00 100%);-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s linear infinite;font-size: 37px;
}@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}
}

web前端之文本擦除效果与下划线结合

效果图

eraseUnderlineCombine1


eraseUnderlineCombine2


html

<p class="box"><span>突来的消息 那个人是你 这么多年 你杳无音讯 没钱难买通天路 你往前走不要回头 我的春风何时来 带我走向大海 能够握紧的就别放了 能够拥抱的就别拉扯 我知道 吹过的牛逼 也会随青春一笑了之 就老去吧 孤独别醒来你渴望的离开 只是无处停摆 多想一觉醒来 有件开心的事发生 清醒的人最荒唐 你纵身跃入酒杯 梦从此溺亡 功名利禄忽下忽上 虚无的像云在飘荡</span>
</p>

JavaScript

function init() {let textEl = document.querySelector(".box span"),str = textEl.textContent,i = 0;textEl.textContent = '';function initRAF() {if (i >= str.length) return false;textEl.textContent += str[i];requestAnimationFrame(initRAF);i++;}initRAF();
}init();

style

.box {color: #333333;line-height: 2;
}.box span {background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;background-size: 0 2px;transition: background-size 1s;cursor: pointer;
}.box span:hover {background-position: left bottom;background-size: 100% 2px;
}

css之下划线动画

html

<p class="box"><span>上班很累 总不能不上吧 挣钱很苦 总不能不赚吧 年纪大了 少一点任性 你可以不做你不喜欢的事 但你要做应该做的事 巷子里的猫很自由 但却没有归宿 围墙里的狗有归宿 却终身都得低头 人生这道选择题 怎么选都会有遗憾人间非净土各有各的苦 每个人都不容易 无论你当下正在经历什么 都要调整心态 继续前行 记住你的心态是最好的风水</span>
</p>

style

.box {color: #333333;line-height: 2;
}.box span {background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;background-size: 0 2px;transition: background-size 1s;cursor: pointer;
}.box span:hover {background-position: left bottom;background-size: 100% 2px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/765301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C/C++在线参考手册的使用技巧

cppreference.com是一个在线的C/C参考手册&#xff0c;是C/C学习者最常用的网站。 网址&#xff1a;cppreference.com 1&#xff0e;搜索 不知道为什么这个网站总是不能正常搜索&#xff0c;实在是太不方便了。 有两个退而求其次的方法&#xff1a; (1)通过搜索引擎指定域名…

无服务器推理在大语言模型中的未来

服务器无服务器推理的未来&#xff1a;大型语言模型 摘要 随着大型语言模型(LLM)如GPT-4和PaLM的进步&#xff0c;自然语言任务的能力得到了显著提升。LLM被广泛应用于聊天机器人、搜索引擎和编程助手等场景。然而&#xff0c;由于LLM对GPU和内存的巨大需求&#xff0c;其在规…

C++常用的区块代码

很多人在刷题时都遇到过不会的情况 这篇文章希望可以帮到你&#xff01; 1.输入n将这个数倒着输出来&#xff1a; while(n!0){tn%10;printf("%d",t);nn/10; }只要会这条代码&#xff0c;很多题目都可以直接秒杀。 如&#xff1a; 输入一个整数n,算出它各个位数的乘积…

【RPC研究】socket 函数调用

突然想深入学习一下RPC调用&#xff0c;研究一下发现这个东西相关联的东西还是比较多的&#xff0c;而且也算补齐一下别的知识。 接下来会写一下相关的知识&#xff0c;但没有什么参考资料基本都是博客看的&#xff0c;或者自己本科学的知识融合&#xff0c;并没有翻啥书&…

[Repo Git] manifests的写法

​manifests​​是个啥 在Repo​中manifests​描述了Repo客户端的结构&#xff0c;也就是可以从manifests​中知道各个模块的代码应该从代码管理仓库当中哪个位置去获取。 ​manifests​的基本结构是一个Git存储库&#xff0c;在顶层目录中持有一个default.xml​文件。 由于m…

程序员想要搞钱不迷茫,这篇文章你可得码好啦!!!

年已经过完了&#xff0c;现在大家都已经返工返校了吧&#xff01;咱又要投入到新一年的战斗了&#xff01;春色恼人不等闲&#xff0c;相信咱都有一个实实在在的愿望和期许&#xff1a;身体健康&#xff0c;财源广进&#xff01;新的一年我们还得继续努力&#xff0c;多多搞钱…

利用IP地址查防止电子招投标串标行为

随着信息技术的快速发展&#xff0c;电子招投标已成为政府和企业采购的主要方式。然而&#xff0c;电子招投标中的串标问题也愈发突出&#xff0c;给公平竞争和资源分配带来了隐患。为了防止串标行为&#xff0c;利用IP地址查已成为一种有效手段。 IP地址查询&#xff1a;IP数…

002_avoid_for_loop_in_Matlab避免使用for循环

避免使用for循环 在程序设计思想中&#xff0c;循环是一个很有力的工具。在循环中&#xff0c;计算机很轻松地重复执行相同的操作。循环是汇编之上的编程中最重要的概念之一。Matlab的循环有两个语言构造&#xff0c;一个是for循环&#xff0c;另一个是while循环。在Matlab中&…

Python实战:全局变量与局部变量

一、引言 在Python编程中&#xff0c;全局变量和局部变量是两种常见的变量类型&#xff0c;它们在代码的执行过程中扮演着重要的角色。理解全局变量和局部变量的概念、作用域和生命周期对于编写清晰、可维护的代码至关重要。本文将详细介绍Python中的全局变量与局部变量&#…

【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境

这篇文章,主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。 目录 一、搭建项目环境 1.1、前提条件 1.2、开始搭建 1.3、下载依赖

罗德与施瓦茨联合广和通全面验证RedCap模组FG132系列先进性能

近日&#xff0c;罗德与施瓦茨联合广和通完成Redcap(Reduce Capability)功能和性能验证。本次测试使用R&SCMX500 OBT(One Box Tester)无线通信测试仪&#xff0c;主要验证广和通RedCap模组FG132系列射频性能以及IP层吞吐量&#xff0c;包括RedCap上下行吞吐量和射频指标如矢…

【计算机网络篇】数据链路层(2)封装成帧和透明传输

文章目录 &#x1f95a;封装成帧和透明传输&#x1f388;封装成帧&#x1f388;透明传输&#x1f5d2;️面向字节的物理链路使用字节填充的方法实现透明传输。&#x1f5d2;️面向比特的物理链路使用比特填充的方法实现透明传输。 &#x1f6f8;练习 &#x1f95a;封装成帧和透…

css的transform详解

CSS的transform属性是一个功能强大的工具&#xff0c;允许你对HTML元素应用2D或3D转换效果&#xff0c;包括旋转、缩放、倾斜和移动等。以下是对transform属性中各种函数和参数的详细介绍&#xff1a; 2D转换函数&#xff1a; translate()&#xff1a;该函数用于移动元素。它接…

洛谷P8218 【深进1.例1】求区间和 【前缀和】【一阶差分】【二阶差分】

文章目录 前缀和前缀和例题题意 差分差分例题及code↓模版例题输入样例&#xff1a;输出样例&#xff1a; code↓ 前缀和 前缀和定义&#xff1a; 前缀和数组的第 i i i 位即为原数组 1 1 1 ~ i i i 位的和 原数组&#xff1a; 1 2 3 4 5 前缀和数组&#xff1…

BGP聚合:

BGP聚合&#xff1a; 1、功能&#xff1a; 1.1 可以指向BGP邻居发送聚合后的路由条目&#xff0c;从而减少路由表项&#xff08;优化&#xff09;&#xff1b; 1.2 如果明细路由产生震荡&#xff0c;那么聚合后的路由不受影响。 1.3 简化路由表项&#xff0c;达到节省设备资源…

Linux systemd详解

1、概念 1.1 systemd systemd 是一个用于管理 Linux 系统启动过程和系统服务的系统和服务管理器。它被设计为取代传统的 System V init 系统&#xff0c;提供了更快的启动时间、并行启动服务、更好的日志记录和更强大的管理功能。 1.2 unit Unit 是 systemd 中所有配置文件…

springboot接口跨域问题解决

1、实现WebMvcConfigurer接口package com.common.config;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigur…

基于ssm校园美食交流系统论文

目 录 摘 要 1 前 言 3 第1章 概述 4 1.1 研究背景 4 1.2 研究目的 4 1.3 研究内容 4 第二章 开发技术介绍 5 2.1Java技术 6 2.2 Mysql数据库 6 2.3 B/S结构 7 2.4 SSM框架 8 第三章 系统分析 9 3.1 可行性分析 9 3.1.1 技术可行性 9 3.1.2 经济可行性 10 3.1.3 操作可行性 10…

字符函数与字符串函数

目录 一.字符分类函数 二.字符转化函数 三.strlen函数 函数的介绍 strlen函数的模拟实现 1.计算器法 2.递归 三.指针-指针的方式 四.strcpy函数 函数介绍 strcmp的模拟实现 五.strcat函数 函数介绍 strcat的模拟实现 六.strcmp函数 函数介绍 返回值 strcm…

做项目的一些感悟

一、交接&#xff1a; 1.不交接好千万不要松口让对方走。 2.资料、文档、注释、账号密码、项目关联信息、项目源代码、交接人联系电话、等信息必须齐全完整。 3.如果项目有问题或者交接人与公司有纠纷&#xff0c;这个项目尽量不要接。 4.不要随意修改交接代码&#xff0c;…