hikktn
hikktn

【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画

【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画_第1张图片

第 0 步：项目结构

lighting-text/
    ├─ index.html
    └─ style.css
  1. index.html：包含列表
      ，其中每个
    • 放一个字母或符号。
    • style.css：设置背景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。

第 1 步：编写 HTML 结构

在 index.html 中，核心就是一个无序列表

    ，每个
  • 对应一个字母/符号：

    DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Milena Carecho">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animationtitle>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
head>
<body>
    <ul>
        <li>Dli>
        <li>Eli>
        <li>Sli>
        <li>Ali>
        <li>Fli>
        <li>Ili>
        <li>Oli>
        <li>♡li>
        <li>Cli>
        <li>Sli>
        <li>Sli>
    ul>
body>
html>

    代码要点

    • 每个
    • 都是一个字母/符号组成的序列，比如 “D E S A F I O ♡ C S S”。
    • 标签引用了 Google Fonts 的 Lato 字体（可选）。
    • 其余信息如 charset, viewport 等是常规页面设定。

    第 2 步：全局样式与列表布局

    在 style.css 里，先写一些基础样式让页面内容居中，并设定背景色：

    body {
    height: 100vh;             /* 占满视窗高度 */
    display: flex;             /* 启用 Flex 布局 */
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中 */
    font-family: 'Lato', sans-serif; /* 指定字体 */
    background-color: #272727; /* 深色背景 */
}

/* 
       去掉默认的列表样式，使用 flex 排列字母 */
ul {
    margin: 0;
    padding: 0;
    display: flex;
}

    解释

    1. height: 100vh：让 body 占满整个浏览器高度。
    2. display: flex; align-items: center; justify-content: center;：让
        （以及文字）在页面居中。
      • background-color: #272727;：设置深灰色背景，使闪光效果更明显。
      • ul { display: flex; }：让列表项横向排列。

    第 3 步：文字的基础外观

    再来看看

  • 的初始样式与动画：

    ul li {
    list-style: none;   /* 去掉列表项符号 */
    color: #484848;     /* 默认字体颜色（深灰） */
    font-size: 88px;    /* 加大字号 */
    letter-spacing: 15px; /* 增加字母间距，让效果更突出 */
    animation: lighting 1.4s linear infinite; 
    /* 使用名为 lighting 的动画，时长1.4秒，线性播放并无限循环 */
}

    解释

    1. color: #484848;：文字默认是深灰色，没有任何发光。
    2. font-size: 88px; letter-spacing: 15px;：让文字足够大并彼此间留有空隙，便于显示闪光。
    3. animation: lighting 1.4s linear infinite;：
      • 调用名为 lighting 的关键帧，
      • 持续时间：1.4秒，
      • linear：匀速过渡，
      • infinite：重复播放。

    我们还没定义 @keyframes lighting，接下来就要完成它。

    第 4 步：定义关键帧 lighting

    这是本示例最核心的动画部分：

    @keyframes lighting {
    0% {
        color: #484848;
        text-shadow: none;
    }
    90% {
        color: #484848;
        text-shadow: none;
    }
    100% {
        color: #fff900; /* 亮黄色 */
        text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
    }
}
    动画阶段分析
    1. 0% 到 90%
      • 文字颜色保持 #484848，即深灰色；
      • text-shadow: none;，无阴影。
      • 这意味着动画的前 90% 时间，文字不会闪光。
    2. 100%
      • 文字切换成亮黄色 #fff900；
      • text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;，添加多重阴影：
        • 一个较短的发光 0 0 7px #fff900；
        • 一个更大、更远的发光 0 0 50px #ff6c00。
      • 整体看起来像是突然闪亮了一下。
    3. 因为整个动画是 1.4s 线性循环，当到达 100% 时，瞬间回到初始状态 (0%) 再次开始，如此无限重复。
    4. 结果：每个字母在 1.4 秒的周期里，有 0.14 秒（10%）的时间会闪光。

    第 5 步：让每个字母“依次”闪光

    仅仅写上述动画，每个

  • 会同时闪光。但示例中，每个字母的闪光是依次出现、互相错开的，这是通过 animation-delay 来控制。请看以下代码：

    ul li:nth-child(1) { animation-delay: 0s;    }
ul li:nth-child(2) { animation-delay: 0.1s; }
ul li:nth-child(3) { animation-delay: 0.2s; }
ul li:nth-child(4) { animation-delay: 0.3s; }
ul li:nth-child(5) { animation-delay: 0.4s; }
ul li:nth-child(6) { animation-delay: 0.5s; }
ul li:nth-child(7) { animation-delay: 0.6s; }
ul li:nth-child(8) { animation-delay: 0.7s; }
ul li:nth-child(9) { animation-delay: 0.8s; }
ul li:nth-child(10){ animation-delay: 0.9s; }
ul li:nth-child(11){ animation-delay: 1s;   }

    工作原理

    • 第一个字母（D）从 0s 开始动画，第二个字母（E）从 0.1s 后开始动画，第三个字母（S）从 0.2s 开始……
    • 所以每个字母的闪光时间错开了 0.1s，形成一种流动的闪光效果，而不是整排文字一起闪。
    • 当动画周期结束时（1.4秒），它们又会再次从各自延迟开始新一轮闪动，于是循环不断。

    你可以根据需求修改延迟，比如 0.08s、0.15s 等，或者在 .li:nth-child(N) 里改成想要的数值来调整节奏。

    6. 运行效果与可选调整

    现在，打开 index.html 预览，你会看到：

    1. 深灰色背景中，一排大号文字“D E S A F I O ♡ C S S”。
    2. 每个字母默认处于暗灰色，当到达各自的动画末端（100%）时，会瞬间切换为亮黄色并带有橙色的强烈光晕。
    3. 整个序列依次闪光，一波接一波，显得酷炫又有节奏感。

    可选改动：

    • 闪光时长：把 lighting 1.4s linear infinite; 里的 1.4s 改成更大或更小，如 2s（闪光慢一点）或 1s（更快）。
    • 发光颜色：
      • color: #fff900; 可以改成别的亮色，比如 #00ff00 或 #ffffff；
      • text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00; 也可以改成你喜欢的组合。比如把 #ff6c00 换成 #00ffff，就会有蓝绿色的外光。
    • 默认颜色：#484848 可改成黑色或更浅灰，看个人审美。
    • 字母个数与延迟：可以增加或减少
    • ，并对应增加 nth-child(N) 规则；动画延迟也可微调。
    • 闪光占比：在 @keyframes lighting 中，0% 和 90% 同样保持暗色，而 100% 才亮起——意味着只有最后的 10% 时间在闪光。你可以把 90% 改成 80%、70% 等，让闪光时段更长。

    总结

    通过这一步步的解析，你已经掌握了：

    1. Flex 布局：将文字排成一行并居中显示；
    2. 关键帧动画 + 延时：让每个字母按照不同的节奏进行闪亮；
    3. text-shadow 多重阴影：实现多层次的发光效果；
    4. nth-child：精准控制每个
    5. 的动画延迟，让文字依次闪动。

    不需要任何 JavaScript，就能制作出一个漂移有序、富有节奏感的文字闪光动画。希望本教程能让你理解 CSS 动画的乐趣与强大，并在实际项目中加以灵活运用。祝你学习与创作愉快！

你可能感兴趣的:(开源宝藏,开源,css,前端)

  • 工具学习_CVE Binary Tool
    1.工具概述CVEBinaryTool是一个免费的开源工具，可帮助您使用国家漏洞数据库（NVD）常见漏洞和暴露（CVE）列表中的数据以及Redhat、开源漏洞数据库（OSV）、Gitlab咨询数据库（GAD）和Curl中的已知漏洞数据来查找软件中的已知脆弱性。该工具有两种主要操作模式：二进制扫描程序：可帮助您确定哪些包可能已作为软件的一部分包含在内。该程序包括360检查器，扫描程序主要适用于常见的
  • CentOS系统新手指导手册 chanalbert centoslinux运维
    一、CentOS系统概述1.1CentOS的诞生与核心价值起源：CentOS（CommunityENTerpriseOperatingSystem）是基于RedHatEnterpriseLinux（RHEL）的开源发行版，由社区维护，提供与RHEL完全兼容的免费企业级Linux系统。特点：稳定性：通过长期支持（LTS）版本（如CentOS7/8）保证系统稳定性。企业级特性：适配服务器、云计算、虚拟
  • JavaScript零基础入门速通（完整） 小黄编程快乐屋 javascripthtml5
    JavaScript（简称JS）是现代网页开发中不可或缺的编程语言之一。它为网页增加了动态交互性，是一种前端编程语言，用于处理网页上的各种用户行为，如按钮点击、表单提交、页面加载等。它的强大不仅体现在浏览器端，也可以通过Node.js在服务器端运行。本文将详细介绍JavaScript的基础知识，帮助你从零开始掌握这门语言。1.JavaScript简介JavaScript最早由Netscape公司的
  • 喜讯！Apache SeaTunnel 荣获上海开源创新菁英荟优秀开源项目奖 SeaTunnel SeaTunnel开源数据同步大数据etl
    近日，在2025上海开源创新菁英荟上，ApacheSeaTunnel凭借信创生态适配与智能化技术突破，荣获「优秀开源项目奖」。这个由中国团队孵化的开源项目，已成为全球数据集成领域的标杆。信创生态：支持20+国产数据库的无缝对接SeaTunnel深度适配华为OpenGauss、阿里OceanBase等20+主流国产数据库，支持CDC（变更数据捕获）与高性能加载。在证券行业信创转型中，SeaTunne
  • css实现优惠券效果 全
    效果如下：样式一：样式一左半圆效果左右半圆效果左内圆四角收缩六角收缩凹边中排圆点两边凹陷.coupon1{width:240px;height:100px;margin-top:15px;background-color:#f56c6c;-webkit-mask:radial-gradient(circleatleftcenter,transparent20px,red20px);}.coupon
  • Chart.js 安装使用教程 小奇JAVA面试 安装使用教程javascript开发语言ecmascript
    一、Chart.js简介Chart.js是一个简单而灵活的JavaScript图表库，支持8种常用图表类型（折线图、柱状图、饼图等），基于HTML5Canvas渲染。它轻量易用，适合快速构建响应式图表，广泛应用于仪表盘、可视化后台、统计图展示等场景。二、Chart.js安装方式2.1使用CDN引入（推荐快速使用）2.2使用npm安装（适合前端工程项目）npminstallchart.js--sav
  • 一份来自前端开发工程师的规范简历 追影的React开发者 前端javascriptphotoshop
    个人资料姓名：嘻嘻性别：女电话：12132323613邮箱：[email protected]现居地：上海市工作年限：3年求职意向期望职位：前端开发工程师期望薪资：面议工作性质：全职到岗时间：离职,一周内入职专业技能精通DIV+CSS页面布局，重构,掌握JavaScript，熟悉w3c标准，了解HTML语义化有一定的了解。熟练运用浏览器兼容技术，熟练进行前端性能优化设计。熟练掌握HTML5技术
  • 深入理解React的虚拟DOM与性能优化 天天进步2015 前端开发react.js性能优化javascript
    React作为现代前端开发的主流框架，其高效的渲染能力和良好的开发体验离不开虚拟DOM（VirtualDOM）的设计理念。本文将带你深入理解React的虚拟DOM原理，并结合实际案例，探讨如何进行性能优化。一、什么是虚拟DOM？虚拟DOM（VirtualDOM，简称VDOM）是React引入的一种轻量级JavaScript对象，用于描述真实DOM的结构。它本质上是DOM的一个抽象表示，React通
  • UniApp完美对接RuoYi框架开发企业级应用 速易达网络 uni-app
    UniApp完美对接RuoYi框架的完整方案及可开发系统类型，结合企业级实践与开源项目经验整理而成，涵盖技术对接、系统设计及实战案例。一、UniApp与RuoYi对接全流程1.后端配置（RuoYi-Vue/RuoYi-Cloud）跨域支持在网关层添加跨域配置类，允许UniApp请求：@ConfigurationpublicclassCorsConfig{@BeanpublicWebFilterco
  • AJAX 安装使用教程 小奇JAVA面试 安装使用教程ajax前端javascript
    一、AJAX简介AJAX（AsynchronousJavaScriptandXML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页内容的技术。它不是一种新语言，而是使用现有的标准组合：JavaScript+XMLHttpRequest（或Fetch）+HTML+CSS。二、AJAX是否需要安装？不需要单独安装！AJAX是浏览器原生支持的技术，主流浏览器均内置XMLHttp
  • 网络安全必备！全面解读Payloads All The Things项目 人工智能我来了 IT技术web安全安全
    探索「PayloadsAllTheThings」：提升Web应用程序安全的开源利器在信息安全领域，Web应用程序的安全性一直是一个备受关注的话题。而在这诸多安全工具中，一个叫做「PayloadsAllTheThings」的项目正迅速吸引着众多安全研究者和开发者的目光。今天，我们将深入探讨这个项目，看看它如何帮助您提升Web应用的安全水平。项目介绍「PayloadsAllTheThings」是一个开
  • 轻松扩展Synology硬盘兼容性，只需一个脚本！
    SynologyNAS是一种流行的网络存储设备，其能够通过插入硬盘驱动器来增加存储空间。然而，Synology通常提供与其设备兼容的驱动器列表，这可能会限制用户选择的硬盘类型。幸运的是，开源项目SynologyHDDdb通过提供一种方法来扩展这些兼容性限制，让用户能够使用他们喜欢的任何HDD、SSD或NVMe驱动器，从而拓展了用户的选择范围。项目简介SynologyHDDdb是一个脚本项目，旨在让
  • Spring Boot 集成 GeoTools 详解 hdsoft_huge SpringBoot教程springboot后端java
    目录一、概述二、集成优势三、集成步骤四、使用场景五、案例：周边设施查询系统六、注意事项七、总结一、概述什么是SpringBoot？SpringBoot是由Pivotal团队开发的基于Spring框架的快速开发工具，它通过自动配置、起步依赖等特性简化了Java应用的搭建和开发过程，使开发者能够专注于业务逻辑而非配置细节。什么是GeoTools？GeoTools是一个开源的Java地理信息处理工具包，
  • URL时间戳参数深度解析：缓存破坏与前端优化的前世今生 是2的10次方啊 开发踩坑日记计算机知识科普原理分析缓存前端
    URL时间戳参数深度解析：缓存破坏与前端优化的前世今生在日常的Web开发中，你是否注意到很多接口URL后面都会带有一个时间戳参数？比如xxx/getMsg?_=1751413509056。这个看似简单的参数背后，却隐藏着前端缓存策略、性能优化等重要技术原理。今天，让我们跟随小李和小王的对话，深入探讨这个参数的前世今生。小李的困惑：神秘的URL参数小李：小王，我最近在工作中发现一个奇怪的现象，很多接
  • 打造 AI 产品的前端架构：响应式、流式、智能交互三合一
    关键点AI产品前端挑战：AI产品前端需要处理流式响应、上下文管理、多模型切换和复杂的用户交互，同时保证高性能和响应式体验。流式响应：通过Server-SentEvents（SSE）或WebSocket实现实时数据流，提升用户感知的响应速度。多模型切换：支持动态切换AI模型（如GPT-4、Grok），并优化上下文缓存和token预估。会话持久化：通过本地存储或后端数据库保存用户会话，支持编辑和恢复功
  • Spring Boot + Screw 一键生成数据库设计文档 小马不敲代码 实战springboot数据库后端
    01前言在企业级开发过程中，编写数据库表结构文档一直是个让人头疼的问题。许多企业要么没有这份文档，要么就是靠手动编写，后续维护起来非常麻烦，常常因为忘记更新给后续工作带来诸多不便。而Screw的出现，为这一问题提供了高效的解决方案。02、Screw简介Screw是一款能够快速生成数据库文档的开源工具，支持多种数据库，包括MySQL、MariaDB、TiDB、Oracle、SqlServer、Pos
  • 深入探索 Vanna：让数据库交互更智能 从零开始学习人工智能 数据库交互
    深入探索Vanna：让数据库交互更智能在数字化时代，与数据库进行高效交互是许多开发者、数据分析师和企业面临的挑战。传统的SQL查询编写不仅需要对数据库结构有深入的了解，还需要花费大量的时间和精力来调试和优化。Vanna，一个基于Python的开源工具，通过结合检索增强（RetrievalAugmentation）和大型语言模型（LLM），为这一问题提供了一个创新的解决方案。本文将深入探讨Vanna
  • React 学习（一） COLDEHY react.js学习前端
    1.b/s架构是浏览器的形式，就是通过网页的方式访问2.是构建用户界面的javascript库，react是用来替代dom的，原本使用ajax结合dom实现页面局部刷新的方式需要频繁的操作dom不方便，所以我们可以使用前端框架来解决，不再直接操作dom，而是操作react，react去操作dom3.react特点虚拟dom，不用原生dom，原生dom存在兼容性问题，可能这个浏览器能用下一个就不能用
  • 跟着AI学习C#之项目实战-电商平台 Day7 蓝胖子不会敲代码 C#学习c#开发语言
    Day7：部署准备与优化✅今日目标：添加静态资源（CSS、JS、图片）优化页面样式与交互体验添加分页功能（商品、订单列表）配置生产环境设置（appsettings.Production.json）准备发布部署（dotnetpublish）功能概览类型内容静态资源wwwroot/css,wwwroot/js,wwwroot/images页面样式优化使用Bootstrap+自定义CSS增强用户体验分页
  • 写代码写到 60 岁：我是如何重新定义技术人生的 十步杀一人_千里不留行 程序人生
    我44岁，写了10年Java，现在在新西兰职场从头来过。曾经我也焦虑：“是不是到了这个年龄就该转管理？”但现在我清楚地知道，我依然热爱写代码，而且我可以一直写下去，只要我用对了方法、站稳了定位。我不想当CTO，我只想踏实交付系统这几年，我不断在Java、C#、React、.NET、前端、后端、移动端、AI等各种技术栈之间“穿梭”，有些是项目需要，有些是自学试验。有人问我：你到底擅长哪个领域？我的回
  • 【高频考点精讲】React Hooks使用指南：useEffect的依赖数组你真的用对了吗？ 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    ReactHooks使用指南：useEffect的依赖数组你真的用对了吗？‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们来聊聊ReactHooks中那个让人又爱又恨的useEffect，特别是它的依赖数组——这个看似简单实则暗藏玄机的部分。依赖数组是什么鬼？useEffect的第二个参数是个数组，R
  • 雪球股票信息超级爬虫：开源项目指南及新手问题解决方案 柏克栋
    雪球股票信息超级爬虫：开源项目指南及新手问题解决方案XueQiuSuperSpider雪球股票信息超级爬虫项目地址:https://gitcode.com/gh_mirrors/xu/XueQiuSuperSpider雪球股票信息超级爬虫是一个强大的股票数据爬取工具，专门设计用于从雪球网提取丰富的股票市场信息。本项目采用Java语言编写，充分利用了JDK8的函数式编程特性，旨在提供灵活且高效的股市
  • 巨头开源的背后，是价格战还是价值战？ CSDN资讯 开源
    当巨头们纷纷开源自家模型，他们背后的博弈是什么？放眼全球，谷歌在发布其王牌模型Gemini2.5Pro时，选择开源其衍生的轻量级模型Gemma，Meta的LLaMA虽名为开源，却始终带着商业限制的“镣铐”……他们小心谨慎地通过开源开放吸引全球开发者的关注，同时却牢牢掌控核心能力与商业变现路径。回到国内，从阿里通义千问全尺寸开源到DeepSeek的一鸣惊人，再到前几天百度开源其主力模型文心4.5。中
  • 那些年错过的React组件单元测试（上） 前端森林 带你探秘前端森林单元测试react.js
    写在前面关于前端单元测试，其实两年前我就已经关注了，但那时候只是简单的知道断言，想着也不是太难的东西，项目中也没有用到，然后就想当然的认为自己就会了。两年后的今天，部门要对以往的项目补加单元测试。真到了开始着手的时候，却懵了我以为的我以为却把自己给坑了，我发现自己对于前端单元测试一无所知。然后我翻阅了大量的文档，发现基于dva的单元测试文档比较少，因此在有了一番实践之后，我梳理了几篇文章，希望对于
  • 探索生成式 AI Agent：12类，40+个AI Agent实例应用场景的宝藏库 和老莫一起学AI 人工智能产品经理职场和发展面试自然语言处理ai大模型
    在人工智能的璀璨星空中，生成式AI智能体（GenAIAgents）无疑是最耀眼的星辰之一，正以前所未有的速度改变着我们与技术互动的方式。今天，我将分享GitHub上一个宝藏级的项目——“NirDiamant/GenAI_Agents”，这里汇聚了从基础到高级的各种GenAI智能体技术教程与实现案例，堪称一座智能体开发的知识宝库。1.适合初学者的智能体简单会话智能体概览通过集成语言模型、提示模板和历
  • VSCode-Copilot的系统提示词 youngqqcn AIvscodecopilotide
    title:VSCode-Copilot系统提示词date:2025-07-0211:05categories:技术tags:AI人工智能LLM大语言模型提示词Microsoft开源了VSCodeCopilotChat,以下是其系统提示词的摘录。https://github.com/microsoft/vscode-copilot-chat/blob/main/src/extension/prom
  • 导购APP的技术架构与用户体验优化 省赚客APP开发者@聚娃科技 架构ux
    导购APP的技术架构与用户体验优化大家好，我是阿可，微赚淘客系统及省赚客APP创始人，是个冬天不穿秋裤，天冷也要风度的程序猿！随着移动互联网的快速发展，导购APP已成为连接用户与商品的桥梁。本文将探讨导购APP的技术架构设计以及如何通过技术手段优化用户体验。技术架构概览导购APP的技术架构通常包括以下几个关键部分：前端展示层：负责用户界面的展示和交互。后端服务层：处理业务逻辑，提供API接口。数据
  • Notepad++开源文本编辑器深入剖析与应用 大苏牙
    本文还有配套的精品资源，点击获取简介：Notepad++是一款小巧而功能强大的开源文本编辑器，广受编程领域用户的欢迎。它提供基础文字编辑功能并集成多种程序员友好的特性，如语法高亮、代码折叠、查找替换、宏录制与回放等。Notepad++还支持多文档界面，能够处理多种编程语言，并具备强大的插件系统，用户可以根据需求进行功能扩展。本文深入探讨Notepad++的开源特性、工作效率提升、编程语言支持等关键
  • 供应链攻击原理和架构 hao_wujing 安全
    大家读完觉得有帮助记得关注和点赞！！！供应链攻击是一种针对软件或硬件产品开发、分发及更新环节的复杂攻击模式，攻击者通过渗透受信任的供应商或第三方依赖，将恶意代码植入合法产品中，最终感染目标用户。其核心在于**利用信任链的传递性**绕过传统防御。以下是其原理与架构的深度解析：---###**一、攻击原理**1.**信任传递的逆向利用**-用户信任供应商（如软件开发商、开源库维护者）→供应商信任其工具
  • 微信小程序入门四：实现table效果 鳄鱼儿 微信小程序小程序入门
    微信小程序中没有table组件，那么怎么实现呢？其实使用多个view组件就可以实现，接下来就直接看代码吧标题1标题2标题3标题4标题5{{item}}{{item}}{{item}}{{item}}{{item}}/*.css*/page{font-size:14px;color:#333;}.table{border:1pxsolid#dadada;border-right:0;border-b
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他