weixin_44592738
weixin_44592738

HTML+CSS3 旋转齿轮特效

前期准备

position: relative;
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position: absolute;
生成相对定位的元素，相对于其正常位置进行定位。

@keyframes
@keyframes 动画名 （持续时间百分比{css样式属性}）
动画名：必须要有
百分比合法值（必须要有）：
0-100%
from (和0%相同)
to (和100%相同)

animation
将动画属性绑定到相应的html元素上

transform:translateZ(z);
进行3D转换，以z轴为中心进行旋转，括号里写具体旋转的度数

注意： 关于@keyframes,animation,transfrom属性更详细的介绍我在前面已经讲过，地址：https://blog.csdn.net/weixin_44592738/article/details/103222753

思路：

  1. 完成页面静态布局
  2. 确定相应齿轮的旋转方向
  3. 设置瞬时间动画，逆时针动画和水滴动画
  4. 运行代码

代码

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>html5+css3 齿轮滚动动画特效 </title>
	<link rel="stylesheet" href="css/css.css">
</head>
	<body>
		<div class="back">
			<div class="content">
				<div class="img1"></div>
				<div class="img2"></div>
				<div class="img3"></div>
				<div class="img4"></div>
				<div class="img5"></div>
				<div class="img6"></div>
				<div class="img7"></div>
				<div class="img8"></div>
				<div class="img9"></div>
				<div class="img10"></div>
				<div class="img11"></div>
			</div>
		</div>
	</body>
</html>

css:

*{
     
	margin: 0;
	padding: 0;
}
body,html{
     
	height: 100%;
}
/* 设置背景 */
.back{
     
	height: 100%;
	background: url("../images/bg_03.jpg") no-repeat center;
}
/* 对包含所有图片的div进行相对定位 */
.content{
     
	height:787px;
	width: 800px;
	position: relative;
	margin: 0 auto;
}
/* 对所有图片进行绝对定位 */
.content div{
     
	position: absolute;
}
/* 水滴 */
.img1{
     
	height: 50px;
	width: 50px;
	top: 191px;
    left: 391px;
	background: url("../images/icon-1.png") no-repeat center; 
	animation:water 2s ease-in-out infinite;
}

/* 左边第一大 */
.img7{
     
	height: 252px;
    width: 242px;
    top: 87px;
    left: 54px;
	background: url("../images/icon-7.png") no-repeat center;
}
/* 左边第二大 */
.img4{
     
	height: 148px;
    width: 144px;
    top: 203px;
    left: 272px;
	background: url("../images/icon-4.png") no-repeat center;
}
/* 左边最小 */
.img2{
     
	height: 75px;
    width: 73px;
    top: 103px;
    left: 4px;
	background: url("../images/icon-2.png") no-repeat center;
}
/* 左边身体的手 */
.img8{
     
	height: 50px;
    width: 50px;
    top: 286px;
    left: 268px;
	background: url("../images/icon-8.png") no-repeat center;
}
/* 右边第一大 */
.img6{
     
	height: 214px;
    width: 194px;
    top: 96px;
    left: 455px;
	background: url("../images/icon-6.png") no-repeat center;
}
/* 右边第二大 */
.img3{
     
	height: 116px;
    width: 121px;
    top: 54px;
    left: 600px;
	background: url("../images/icon-3.png") no-repeat center;
}
/* 右边最小 */
.img5{
     
	height: 117px;
    width: 112px;
    top: 245px;
    left: 403px;
	background: url("../images/icon-5.png") no-repeat center;
}
/* 右边男手 */
.img9{
     
	height: 50px;
    width: 50px;
    top: 310px;
    left: 513px;
	background: url("../images/icon-9.png") no-repeat center;
}
/* 右边女手 */
.img10{
     
	height: 50px;
    width: 50px;
    top: 242px;
    left: 619px;
	background: url("../images/icon-10.png") no-repeat center;
}
/* 人物背景 */
.img11{
     
	height: 709px;
    width: 788px;
    bottom: -2px;
	background: url("../images/img.png") no-repeat center;

}
/* img2,img4,img6 顺时针 */
.img2,.img4,.img6{
     
	animation:rotate1 8s ease-in-out infinite;
}
/* img3,img5,img7 逆时针 */
.img3,.img5,.img7{
     
	animation:rotate2 8s ease-in-out infinite;
}


/* 动画 顺时针 以Z轴为中心*/
@keyframes rotate1{
     
	0%{
     
		transform:rotateZ(0deg);
	}
	100%{
     
		transform:rotateZ(360deg);
	}
}

/* 动画 逆时针 以Z轴为中心*/
@keyframes rotate2{
     
	0%{
     
		transform:rotateZ(0deg);
	}
	100%{
     
		transform:rotateZ(-360deg);
	}
}

/* 动画 水滴效果 */
@keyframes water{
     
	0%{
     
		/*变透明*/
		opacity: 0;
	}
	100%{
     
		/*向下移动*/
		top:600px;
	}
}

运行效果

HTML+CSS3 旋转齿轮特效_第1张图片

总结

  1. 在编写代码中因transform写成了transfrom,导致程序运行出错
  2. 在设置背景时，一定要设置相应的宽和高，否则内容显示不出来
  3. img标签和background-image的区别是：img是标签,代表文档内容，background-image是属性，代表样式设计。

你可能感兴趣的:(css3高级开发,css3,html,旋转特效,2D,齿轮)

  • 求解一次最佳平方逼近多项式 F_D_Z 数理数值分析一次最佳平方逼近多项式
    例设f(x)=1+x2f(x)=\sqrt{1+x^2}f(x)=1+x2，求[0,1][0,1][0,1]上的一个一次最佳平方逼近多项式。解：d0=∫011+x2dx=12ln⁡(1+2)+22≈1.147d_0=\int_{0}^{1}\sqrt{1+x^2}dx=\frac{1}{2}\ln(1+\sqrt{2})+\frac{\sqrt{2}}{2}\approx1.147d0=∫011+
  • matsim开发教程 若木胡 大数据信息可视化
    以下是基于MATSim的二次开发教程指南，结合交通仿真框架的核心功能和开发实践，提供从环境搭建到高级开发的完整路径：一、MATSim简介MATSim（Multi-AgentTransportSimulation）是一个基于Java的开源交通仿真框架，专注于大规模多智能体（Agent）交通行为模拟，支持动态需求建模、路径规划优化、政策评估等应用场景。二、开发环境搭建1.基础依赖JavaJDK11+：
  • EmbodiedSAM：在线实时3D实例分割,利用视觉基础模型实现高效场景理解 数据猎手小k 3D实例分割在线实时感知视觉基础模型（VFM）应用
    2025-02-12，由清华大学和南洋理工大学的研究团队开发一种名为EmbodiedSAM（ESAM）的在线3D实例分割框架。该框架利用2D视觉基础模型辅助实时3D场景理解，解决了高质量3D数据稀缺的难题，为机器人导航、操作等任务提供了高效、准确的视觉感知能力。一、研究背景随着机器人技术和人工智能的发展，机器人在复杂环境中执行任务（如导航、操作和交互）的能力越来越依赖于对三维（3D）场景的实时、准
  • 初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力 伶俜Monster Threejswebgl前端3dthreejscannon.js
    简介Cannon.js是一个基于JavaScript的物理引擎，它可以在浏览器中模拟物理效果。它支持碰撞检测、刚体动力学、约束等物理效果，可以用于创建逼真的物理场景和交互。参考文档官方示例原理Cannon.js使用了欧拉角来表示物体的旋转，而不是四元数。这使得它在处理旋转时更加直观和易于理解。Cannon.js还支持多种碰撞检测算法，包括离散碰撞检测和连续碰撞检测。Cannon.js还支持多种约束
  • 【Autosar】MCAL - 从零开始【干货分享】 蓝白小手套 【Autosar】MCAL-从零开始【干货分享】汽车单片机学习
    文章目录MCAL-汇总1.概述2.环境2.1开发环境搭建2.2工程创建2.3参考手册3.驱动（缓慢更新）3.1Microcontroller3.1.1MCU3.1.2WDG3.1.3GPT3.2Memory3.2.1FLS3.2.2I2C3.3Communication3.3.1SPI3.3.2LIN3.3.3CAN3.4I/O3.4.1PORT3.4.2DIO3.4.3ADC3.4.4PWM3.
  • 设备树学习（二十三、番外篇-中断子系统之softirq） 奔跑的小刺猬 设备树设备树原理和实现
    既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
  • 【Apache Storm】 茉菇 apachestorm大数据
    一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布
  • 游戏开发引擎对比：Godot、Unity、Unreal与cocos2d的优劣分析 scoone 游戏引擎godotunity
    在游戏开发的世界中，选择合适的游戏引擎是项目成功的关键之一。本文将对比四种流行的游戏开发引擎：Godot、Unity、UnrealEngine和cocos2d，分析各自的优缺点，帮助开发者做出明智的选择。Godot：优点：开源且免费，无商业授权费用。轻量级，适合中小型游戏开发。使用GDScript脚本语言，易于上手。跨平台支持良好。缺点：社区相对较小，资源不如Unity丰富。在3D游戏开发方面不如
  • 数据增强：扩充数据集提升模型泛化能力 AI天才研究院 计算AI大模型企业级应用开发实战ChatGPT计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    1.背景介绍1.1.数据增强的重要性在机器学习领域，模型的泛化能力至关重要。一个泛化能力强的模型能够在未见数据上表现良好，而过拟合的模型则会在训练数据上表现出色，但在新数据上表现糟糕。数据增强是一种有效提升模型泛化能力的技术，它通过对现有数据进行各种变换，人为地扩充数据集，从而增加训练数据的数量和多样性。1.2.数据增强的应用场景数据增强广泛应用于各种机器学习任务中，包括：图像识别:对图像进行旋转
  • Pandas完全指南：数据处理与分析从入门到实战 xiaoyu❅ pythonpythonpandas开发语言
    目录引言一、Pandas环境配置与核心概念1.1安装Pandas1.2导入惯例1.3核心数据结构二、数据结构详解2.1Series创建与操作2.2DataFrame创建三、数据查看与基本操作3.1数据预览3.2索引与选择3.3数据排序四、数据清洗实战4.1处理缺失值4.2处理重复值4.3数据类型转换4.4字符串处理五、数据处理进阶5.1数据筛选5.2列操作5.3应用函数六、数据分组与聚合6.1基础
  • vue3+springboot电影院售票选座管理系统 qq_3166678367 springboot后端java
    目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • H3C Network命令详解 weixin_30471561
    转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
  • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
    CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
  • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
    什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
  • css知识点总结 吃橘子的Crow csshtml前端
    1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
  • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
  • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
  • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
    【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
  • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
    一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
  • Storm实战常见问题及解决方案 Lzy失控的 storm-分布式流式计算bigdata-大数据
    原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用 金枝玉叶9 程序员知识储备1程序员知识储备2程序员知识储备3rust开发语言后端
    《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可
  • 能否在编辑器中一键导入Word文档？ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • css3选择器详解 丸子猪的dady css3前端csshtml
    CSS3选择器我们之前学过CSS的选择器，比如：div标签选择器.box类名选择器#boxid选择器divp后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*:通配符div+p:选中div后面相邻的第一个pdiv~p:选中的div后面所有的p属性选择器属性选择器的标志性符号是[]。匹配含义：^：开头$：结尾*：包含格式：E[title]选中页面的E元素，并且E存
  • css动画详解 丸子猪的dady css前端html
    过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。transition包括以下属性：transition-property:all;如果希望所有的属性都发生过渡，就使用all。transition-property:width，意思是只让盒子的宽度在变化时进行过渡transiti
  • HTMl详解 丸子猪的dady html前端
    拖拽目标元素的事件监听：（应用于目标元素）ondragenter当拖拽元素进入时调用ondragover当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）ondrop当在目标元素上松开鼠标时调用ondragleave当鼠标离开目标元素时调用.box{width:200px;height:200px;background-color:green;}//绑定拖拽事件
  • 斩获 44K 星！让 DeepSeek 控制你的浏览器，绝了 开源项目精选 人工智能
    Browser-Use的开源框架，是一个能让电脑自动操作网页的智能工具。能处理动态加载的内容（比如广告弹窗、实时更新的图表），遇到网页元素位置变化还会自己调整策略，减少人工干预。Stars数46046Forks数4735主要特点强大的浏览器自动化功能：BrowserUse将先进的AI能力与强大的浏览器自动化技术相结合，为AI智能体实现流畅无缝的网页交互体验。视觉感知与HTML结构提取：将视觉理解能
  • 红黑树详解？红黑树设计的背景？ F_windy java
    红黑树详解1.红黑树的基本概念红黑树（Red-BlackTree）是一种自平衡的二叉搜索树（BST），通过节点颜色（红或黑）和一组规则来保持近似平衡，确保插入、删除、查找等操作的时间复杂度为O(logn)。它的核心思想是通过颜色标记和旋转操作，减少树的高度差异，从而提升性能。2.红黑树的五大规则红黑树必须满足以下规则：颜色规则：每个节点非红即黑。根节点规则：根节点必须是黑色。叶子节点规则：所有叶子
  • 字符串模板（单文件组件、JSX） By爱分享 vue.jsjavascript前端
    首先需要了解基本释义：字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。此外，字符串模板不会在页面初始化时参与页面的渲染，而是会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名总的来说，推荐遵循W3C中的自定义组件名(字母全小写且必须包含一个连字符)，这会帮助你避免和当前以及未来的HTML元素相
  • vue-常用指令 | 常用指令的修饰符 Cshaosun web前端#VUEvue.js前端javascript
    目录什么是vue指令v-cloakv-textv-htmlv-prev-show/v-ifv-else/v-else-ifv-onv-bindv-forv-model常用指令的修饰符v-model指令修饰符事件修饰符按键修饰符什么是vue指令指令就是带有v-前缀的特殊属性，不同的属性对应不同的功能。分类汇总内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他