bomess
bomess

CSS3:简易的循环弹跳动画

题外话

keyframes的小练习…相信对刚掌握了keyframes理论知识的有些帮助;
百看不如一练,动手吧~~

注意: 建议用chrome或者chromium内核的浏览器进行浏览器,Firefox也行

基础理论

  1. keyframes是CSS3才引进的 .. 使用方法是前面@keyframes Demo , Demo是自定义动画名字
  2. 仅支持百分比为进度条和form-to!!!!两者可以混用
  3. animation有八个参数,可以分开写,可以综合写(一般一起写);
    • animation-name 规定 @keyframes 动画的名称。
    • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    • animation-timing-function 规定动画的速度曲线。默认是 “ease”。
    • animation-delay 规定动画何时开始。默认是 0。
    • animation-iteration-count 规定动画被播放的次数。默认是 1。
    • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
    • animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
    • animation-fill-mode 规定对象动画时间之外的状态。
  4. 综合写法: animation : name 1s linear 1s inifinite alternate running both;

效果图

CSS3:简易的循环弹跳动画_第1张图片

Live Demo

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>keyframes</title>
        <style> .demo { width: 200px; height: 200px; text-align: center; line-height: 200px; background-color: #fe043c; position: relative; left: 50%; margin-left: -100px; -webkit-animation: Demo 6s ease-in-out infinite alternate running forwards; animation: Demo 6s ease-in-out infinite alternate running forwards; } .demo1 { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: #fe043c; position: absolute; left: 30%; margin-left: -100px; -webkit-animation: Demo1 6s ease-in-out infinite alternate running forwards; animation: Demo1 6s ease-in-out infinite alternate running forwards; } @-webkit-keyframes Demo { 20% { background-color: #f68c1b; top: 50px; border-radius: 20%; } 40% { background-color: #31b32c; top: 100px; border-radius: 40%; -webkit-transform: rotate(90deg) scale(1.4); transform: rotate(90deg) scale(1.4); } 60% { background-color: #1b8df6; top: 200px; border-radius: 60%; -webkit-transform: scale(.4) translateX(300); transform: scale(.4) translateX(300); } 80% { background-color: #ba38d5; top: 300px; border-radius: 80%; -webkit-transform: rotate(-90deg) scale(1.4); transform: rotate(-90deg) scale(1.4); } 100% { background-color: #2bbada; top: 400px; border-radius: 100%; } } @keyframes Demo { 20% { background-color: #f68c1b; top: 50px; border-radius: 20%; } 40% { background-color: #31b32c; top: 100px; border-radius: 40%; -webkit-transform: rotate(90deg) scale(1.4); transform: rotate(90deg) scale(1.4); } 60% { background-color: #1b8df6; top: 200px; border-radius: 60%; -webkit-transform: scale(.4) translateX(300); transform: scale(.4) translateX(300); } 80% { background-color: #ba38d5; top: 300px; border-radius: 80%; -webkit-transform: rotate(-90deg) scale(1.4); transform: rotate(-90deg) scale(1.4); } 100% { background-color: #2bbada; top: 400px; border-radius: 100%; } } @-webkit-keyframes Demo1 { form { background-color: #df5891; -webkit-transform: translateX(50px); transform: translateX(150px); border-radius: 25%; top: 100px; } 50% { -webkit-transform: scale(2); transform: scale(2); -webkit-transform: translateX(350px); transform: translateX(150px); background-color: #642eb1; border-radius: 35%; top: 200px; } 75% { -webkit-transform: scale(2); transform: scale(2.5); -webkit-transform: translateX(150px); transform: translateX(150px); background-color: #642eb1; border-radius: 55%; top: 400px; } to { background-color: #05823b; -webkit-transform: translateX(250px); transform: translateX(250px); border-radius: 75%; top: 600px; } } @keyframes Demo1 { form { background-color: #df5891; -webkit-transform: translateX(50px); transform: translateX(150px); border-radius: 25%; top: 100px; } 50% { -webkit-transform: scale(2); transform: scale(2); -webkit-transform: translateX(350px); transform: translateX(150px); background-color: #642eb1; border-radius: 35%; top: 200px; } 75% { -webkit-transform: scale(2); transform: scale(2.5); -webkit-transform: translateX(150px); transform: translateX(150px); background-color: #642eb1; border-radius: 55%; top: 400px; } to { background-color: #05823b; -webkit-transform: translateX(250px); transform: translateX(250px); border-radius: 75%; top: 600px; } } </style>
    </head>
    <body>
        <div class="demo">简易动画效果</div>
        <div class="demo1">啦啦德玛西亚</div>
    </body>
</html>

你可能感兴趣的:(动画,chrome,css3,animation,firefox)

  • 【Three.js】JS 3D library（一个月进化史） Tiffany_Ho 前端Three.js
    #春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.
  • Selenium 对页面元素的操作动作及其语法 静静在思考 #Seleniumselenium测试工具
    Selenium提供了丰富的操作动作，用于模拟用户在浏览器中的各种交互行为。以下为你详细介绍常见操作动作及其语法，并结合百度网站为例给出Python代码示例。1.打开网页语法：使用driver.get(url)方法，其中driver是浏览器驱动实例，url是要打开的网页地址。示例代码：fromseleniumimportwebdriverdriver=webdriver.Chrome()drive
  • qt实现文字跑马灯效果 凌武贰玖 #QPainterQtqt开发语言
    实现跑马灯的方式多种多少样，可以通过定时器，或者animation等来实现。本文通过定时器，将第一个文字，移动到最后一个这种方式来实现，还有其他方式哈。直接上源码h文件#ifndefTEXTTICKER_H#defineTEXTTICKER_H#include#include/*跑马灯标签文字*/classTextTicker:publicQLabel{Q_OBJECTpublic:TextTic
  • Android系统启动出现的 “安卓正在启动...” 界面的问题 漫步的傻瓜 Android系统启动时间优化androidjava开发语言
    目录1.分析代码流程2.优化办法，同时优化这部分启动耗时3.其他的修改方式如下（供参考）：3.1.Launcher或者主界面添加如下属性，替代FallbackHome启动3.2.让开机动画延迟3s结束，规避该问题3.3.修改FallbackHome出现的“安卓正在启动...”界面目前安卓很多产品，开机没有解锁界面。开机过程中会出现“安卓正在启动...”界面的问题。原因是FallbackHome机制
  • 如何在MacOS上查看edge/chrome的扩展源码 冬阳春晖 tipsmacosedge前端
    步骤进入管理扩展页面点击详细信息复制对应id在命令行键入open~/Library/ApplicationSupport/MicrosoftEdge/Default/Extensions/${你刚刚复制的id}即可打开访达中对应的更目录注意由于原生命令行无法直接处理空格,所以需要加转义符\,即：open~/Library/Application\Support/Microsoft\Edge/Def
  • Android应用开发实践：百度推聊应用源码解析 安检
    本文还有配套的精品资源，点击获取简介：本资源包含百度公司某款聊天应用的Android源代码，供学习者深入理解和掌握Android应用开发流程及核心组件。内容涵盖项目结构、Activity与Fragment、Intent机制、Service、BroadcastReceiver等关键知识点，并强调尊重版权和合法使用。开发者将通过解析源码，学习如何实现异步处理、数据持久化、权限管理、UI动画和推送服务，
  • python的selenium库模拟输入和点击 mangge08 selenium测试工具
    使用python打开已经登录的谷歌浏览器，模拟录入文本提交数据。1、执行命令行，系统会打开浏览器，手工登录"C:\ProgramFiles\Google\Chrome\Application\chrome.exe"--remote-debugging-port=9223--user-data-dir="C:\tmp"2、下载谷歌驱动，先看谷歌版本，再谷歌地址栏输入：chrome://setting
  • 表格首列，首行固定，并且能随意滚动 一麻袋小猫 笔记css3
    css3新增了粘性定位，利用粘性定位即可做到，但要注意的是：如果想要粘性定位相对于父元素定位，需要给其增加relative定位。逻辑是：滚动盒子滚动的是页面，滚动盒子内部放一个大盒子（1），此盒子宽度为内容的总宽度，在盒子内部给想要固定的盒子增加粘性定位，让其top值||left值为0，这里的0是相对于盒子1的。
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • html 字体图标不显示不出来了,h5页面字体图标显示不正常 微基因WeGene html字体图标不显示不出来了
    问题描述开发的是微信公众号的纯静态H5页面，测试发现在iOS上面首次打开会出现字体图标无法显示的问题，并且切换到其它页面，字体图标也是一样无法显示：只能使用微信的右上角内的刷新选项，所有页面的图标就可正常显示，浏览其它页也正常：P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示，在android也是正常显示。相关代码HTML:CSS:@charset"UTF-8";@fo
  • 什么是重绘？什么是回流？如何减少回流？ Ashy- 前端面试题前端笔记css3
    重绘是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。例如修改元素的背景色、字体颜色等回流是指元素布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程例如元素的宽度高度位置改变如何减少回流？适用css动画代替JavaScript动画css动画利用GPU加速，在性能方面通常比JavaScript动画更高效。使用css的transform和opaci
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • CSS动画与变形 玲玲酱 #CSS3前端html5css3
    CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任
  • CSS3动画属性：转换(transition) 前端独秀 前端css3transition
    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • 前端高级面试题 阿芯爱编程 面试前端
    以下是一些高级前端面试题及答案：一、性能优化如何对大型前端项目进行性能剖析（profiling）？答案：使用ChromeDevTools中的Performance面板。可以记录页面加载和交互过程中的各种性能指标，如脚本执行时间、渲染时间、重绘和回流次数等。利用Lighthouse工具，它可以对网页进行全面的性能评估，包括加载性能、可访问性、最佳实践等方面，并给出优化建议。在代码中手动插入性能测量点
  • Node.js使用教程 m0_74824112 面试学习路线阿里巴巴node.jsvim编辑器
    Node.js使用教程Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它让JavaScript运行在服务器端。以下是一个简单的Node.js使用教程：一、Node.js开发环境和编译1.1安装Node.js访问Node.js官网下载并安装适合您操作系统的Node.js版本。1.2创建一个Node.js项目在您的工作目录中，创建一个新的文件夹作为项目目录，例如命名为my_
  • 如何在微信小程序中使用 Lottie 动画 木觞清 微信小程序小程序
    Lottie是一种非常流行的动画格式，它是通过JSON文件描述动画，允许你在网页和移动应用中嵌入复杂的动画效果。通过Lottie动画，开发者可以非常方便地实现高质量的动画效果，而不需要手动编写大量的图形代码。微信小程序也支持使用Lottie动画，本文将详细介绍如何在微信小程序中集成和使用Lottie动画。1.安装和配置Lottie库在微信小程序中，想要使用Lottie动画，首先需要引入Lottie
  • Manus Xsens Metagloves专用动捕手套 宋13810279720 数据手套机器人人工智能人机交互云计算
    ManusXsensMetagloves新一代手指捕捉XsensMetagloves经过专门开发，可与XsensMVN软件无缝协作。只需点击一下，即可将精确的量子手指跟踪添加到Xsens设置中。手指追踪的全新黄金标准我们的新跟踪系统为Xsens套装提供了富有表现力的手指数据。使用我们精确的量子追踪技术捕捉每一个细节动作。手指捕捉从此不再有任何限制。帮助用户再制作动画时节省宝贵的时间，同时不会失去动
  • Open3D C++系列教程 （七）继承窗口类 吉拉尔 Open3D-GUIc++开发语言guiopen3d
    Open3DC++系列教程（七）继承窗口类前置：Open3DC++系列教程（一）环境搭建Open3DC++系列教程（二）第一个GUI窗口Open3DC++系列教程（三）关于程序异常退出的探讨Open3DC++系列教程（四）动画Tick事件Open3DC++系列教程（五）创建菜单栏Open3DC++系列教程（六）菜单栏-文件拾取在之前的几节中介绍了直接在main中使用gui::Window和gui:
  • flutter 专题 五十三 Flutter 底部向上动画弹出菜单 leluckys Flutter面试与实战flutter前端javascript
    在移动应用开发中，我们经常会遇到弹出菜单的开发需求，对于下拉菜单可以参考Flutter自定义下拉菜单，而如果是向上的弹出菜单或者更加负责的扇形菜单，则需要开发者进行自定义开发。上面是自定义向上弹出菜单的示例，如果要实现上面的效果，需要开发者对动画（AnimationController、Animation）和Flow组件能够很熟练的进行使用。，为了方便大家快速的进行开发，现在我们将它封装城一个组件
  • pptx文档提取信息 DreamBoy_W.W.Y 知识图谱python
    目录一、前言二、python-pptx提取核心代码三、LibreOffice转换pdf再提取的核心代码一、前言pptx文档提取解析常用的库。如果只需要解析.pptx的文本、表格、图片，推荐使用python-pptx（开源，轻量级）。如果需要高性能、支持.ppt、动画、格式转换，推荐Aspose.Slides（收费）。如果需要PPTX转PDF或者HTML，适用于Linux服务器，推荐LibreOff
  • 分享一个用于免费取名chrome插件 blogcs chrome前端
    这是一个帮助父母为宝宝取名的Chrome扩展程序，基于八字命理为宝宝打造独特且富有寓意的名字。功能特点：-支持输入宝宝姓氏。-可选择宝宝性别（男宝宝/女宝宝）。-可选择名字长度（二字名/三字名）。-支持输入出生日期和时辰。-提供多种期望寓意选择。-支持自定义期望寓意。-完全简体中文界面。安装方式：**从Chrome网上应用店安装**：1.Chrome網上應用店頁面。2.点击“添加至Chrome”按
  • 分享一个使用的音频裁剪chrome扩展-Ringtone Maker blogcs 音视频chrome前端
    一、插件简介铃声制作器是一个简单易用的Chrome扩展，专门用于制作手机铃声。它支持裁剪音频文件的特定片段，并将其下载为WAV格式，方便我们在手机上使用。无论是想从一段长音频中截取精彩部分作为铃声，还是对现有的音频进行个性化剪辑，这个插件都能轻松满足你的需求二、安装方法安装这个插件非常方便，有两种方式可供选择：1.从Chrome网上应用店安装访问Chrome网上应用店页面。点击“添加到Chrome
  • 使用ThreeJS实现的宇宙大爆炸3D粒子特效思路，原理和关键代码解析 软件工程师文艺 前端3djavascript前端
    目录1，引言2，技术实现2.1，初始化环境2.2，粒子生成与属性设置2.3，粒子运动与模拟宇宙膨胀2.4，后处理效果3，动画与用户交互4，优化与性能5，结论1，引言在本文中，我们将深入探讨如何利用Three.js库实现一个复杂且视觉冲击力强的宇宙大爆炸3D特效。这个效果不仅模拟了粒子的爆炸、扩散，还模拟了宇宙早期的温度变化和光学现象。实现的效果：ThreeJS实现粒子特效2，技术实现2.1，初始化
  • 玫瑰花瓣粒子效果实现原理解析 软件工程师文艺 javascript3d前端
    本文将详细介绍如何利用Three.js实现一个基于玫瑰花瓣形状的粒子动画效果，并对代码中的关键部分做详细解析。文章内容条理清晰、语言平实，适合各位前端开发爱好者学习参考。如果你觉得内容对你有帮助，记得关注、点赞，并在知识星球中下载完整源码。特效视频效果展示：1.项目概述本项目利用Three.js构建了一个动态粒子效果，其中每个粒子模拟一片玫瑰花瓣。花瓣粒子从画面上方缓缓飘落，同时具有随机的摆动与旋
  • 如何使用Three.js制作3D月球与星空效果 软件工程师文艺 前端javascript3dhtml
    目录1.基本设置2.创建星空效果3.创建月球模型4.添加中文3D文字5.光照与相机配置6.动画与控制7.响应式布局8.结语在本文中，我们将一起学习如何利用Three.js实现一个3D月球与星空的效果，并添加一些有趣的元素，比如中文3D文字和互动功能。Three.js是一个强大的JavaScript库，它简化了WebGL的使用，使得在网页上进行3D图形渲染变得更加容易。我们将逐步分析代码，帮助大家理
  • python3 + selenium webdriver自动化测试启动不同浏览器 cs_mengxi seleniumWeb自动化selenium测试工具
    seleniumwebdriver自动化测试启动不同浏览器seleniumwebdriver介绍SeleniumWebDriver进行自动化测试的一般流程浏览器驱动下载浏览器驱动的安装chrome、edge、Firefox、Opera、Safari、phantomjs应用HeadlessChrome、HeadlessFirefox应用seleniumwebdriver介绍SeleniumWebDr
  • Python 实现 2025 专属烟花效果粒子 Clevermea python开发语言pygame算法逻辑回归推荐算法
    引言“爆竹声中一岁除”，听到这句话，想必大家都不陌生吧。在城市中看到那拖着彩星的烟花飞向天空，在空中绽放出来，那一刻是多么美好。那么，话说回来，你是否想过用代码的力量，在虚拟世界中重现这绚烂的烟花场景呢？借助Python强大的绘图和动画库，我们完全可以实现这一有趣的创意，为2025年增添一份独特的科技感与浪漫氛围。准备工作在开始编码之前，我们需要安装一些必要的Python库。这里我们会用到pyga
  • 火狐浏览器webdriver配置 爱吃红薯拔丝的小鹿 爬虫
    要使用Selenium和Firefox浏览器，你需要配置Firefox浏览器和GeckoDriver。以下是配置的步骤：下载Firefox浏览器：确保你已经下载并安装了最新版本的Firefox浏览器。你可以从Mozilla官方网站下载Firefox：https://www.mozilla.org/firefox/下载GeckoDriver：根据你的Firefox浏览器版本下载对应的GeckoDri
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他