小黄呀呀呀
小黄呀呀呀

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大

1、动画水平移动

思路： 就是简单的图像移动，设置好开始和结束

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: move 10s linear infinite;
            /* amimation: 名字 运行时间 运动轨迹 延迟时间 运行次数 是否逆向播放 结束保持的状态
            animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation-play-state是否会停止 */
        }
        
        div:hover {
            animation-play-state: paused;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大_第1张图片
2、多组动画

思路： 写这个多组动画时要记住：移动和旋转都是按照起点为标准的，无论中间发生什么样的变化，都要按照刚开始的状态来看。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: move 22s linear infinite;
        }
        
        div:hover {
            animation-play-state: paused;
        }
        /* 移动和旋转都是以起点为标准，中间的过程量只是一个过程 */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大_第2张图片
3、地图波纹

思路：
设置一个盒子，定位到名称附近，然后里面显示一个实心点，然后又有3个波纹覆盖在实心点表面，就用到了定位，绝对定位不占据空间，所以父亲盒子里就一个实心点的盒子，然后将3个表面的波纹盒子按照之前的实现盒子水平垂直居中的方式定位在中心处，然后缩放时就朝四周散发。这里的波纹是采用阴影的方式，缩放时采用width<,之所以不用scale是因为，如果用scale的话，就会带着阴影一起缩放。几个波纹盒子之间要设置时间延迟，波纹还要设置透明度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            margin: 50px auto;
            width: 747px;
            height: 617px;
            background: url(media/map.png) no-repeat;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 195px;
            color: #fff;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="plaued"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px #009dfd;
            animation: move 1s linear infinite;
        }
        
        .city div.plaued2 {
            animation-delay: 0.4s;
        }
        
        .city div.plaued3 {
            animation-delay: 0.8s;
        }
        
        @keyframes move {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="plaued1"></div>
            <div class="plaued2"></div>
            <div class="plaued3"></div>
        </div>
    </div>
</body>

</html>

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大_第3张图片
4、打字机效果

思路：打字机是一个一个显示出来，先写几个文字，然后不设置宽度。然后我们采用steps(n)来实现，一次就显示一个文字。记住，动画效果要设置为刚开始是0长度，最后是整个文字的长度。这里面的重点是：先将文字在一行强制显示，然后将框子外面的地方隐藏起来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            background-color: pink;
            animation: move 5s steps(5) infinite;
            white-space: nowrap;
            font-size: 20px;
        }
        
        @keyframes move {
            0% {
                width: 0;
            }
            100% {
                width: 100px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘！</div>
</body>

</html>

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大_第4张图片

5、奔跑的熊大

这里面有2个动画
第一个动画：制造出小熊在奔跑的样子，原图给的是几个熊的照片，我们要将照片设置为背景，然后采用steps(n)，一次显示一个图片，不要用linear或者ease，这样图片只会滑动。最好的方法就是采用步长的方式。动画的效果就是定位的效果。
第二个动画：实现小熊跑到屏幕中间，这里我刚开始用的是移动的效果，可是我看了原图是将小熊一直保持在屏幕中心处，如果我采用移动的效果是无法实现的（因为移动的只能是具体数值，或者百分数，而百分数的话，是以自身的宽度和高度来设置的，所以采用移动时实现不了的）。所以我们采用定位的方式，然后我们left=50%;transform:translateX(-50%);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: bear 1s steps(8) infinite, move 8s linear forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                /* 向左移动 */
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

html5css3项目3：动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大_第5张图片

你可能感兴趣的:(html5css3)

  • 学习推荐！！HTML5+CSS3从入门到精通 艾利克斯冰 学习html5css3
    获取方式：《HTML5CSS3从入门到精通》《HTML5+CSS3从入门到精通目录》第1章Web开发新时代第2章从HTML、XHTML到HTML5第3章创建HTML5文档第4章实战HTML5表单第5章实战HTML5画布第6章HTML5音频与视频第7章Web存储第8章离线应用第9章Workers多线程处理第10章Geolocation地理位置第11章CSS3概述第12章CSS选择器第13章文本、字体
  • （切图笔记）通用的纯css3实现 单选框radio复选框checkbox的美化 附代码 亲测好用 专注做前端 笔记css3前端
    切图笔记记录切图网日常，说到网页的表单美化通常需要用到插件，因为select，radio，checkbox比较特殊，无法通过css直接美化，这些也有比较不错的美化插件可以实现，不过这都是早几年的情况，现在浏览器日益更新升级，对于html5css3标准支持的更好，使得我们现在可以通过css3也可以进行美化，没有插件参与，就可以省事不少，同时也可以让页面代码更加简洁，用到了图片背景，不过是基于data
  • HTML5CSS3从入门到精通day01 飞不起来的飞机耶耶耶 html5css3前端
    1.H5新增标签头部导航栏侧边栏文章区域底部2.H5常用新属性placeholder：占位符提示信息autofocus：自动获取焦点multiple:支持多文件上传autocomplete:当提交过表单内容之后规定某个表单控件的提示内容关闭和打开required:必填项tabindex:指定表单控件获取焦点的顺序用户名：密码：手机号：邮箱：日期：文件：3.input新增type类型email:邮箱
  • h5、c3基础知识整理 菜鸟游游 我的博客htmlcss3apic语言html5
    HTML5HTML5广义的概念:代表着浏览器技术发展的阶段，是html5css3和js（API）一套前端技术的组合。HTML5新定义了一堆语义化标签，更有利于搜索引擎或辅助设备理解HTML页面内容。在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。低版本采用条件注释：表单：表单元素（标签）//数据列表（in
  • 从0开始学习HTML5CSS3(三) xinhongwu
    弹性布局弹性（伸缩）布局：是C3里新出的一种布局方式只是多一种布局的选择特点：1.用了弹性布局后，可以让子元素变成类似行内块元素的东西2.如果父盒子不够放，会自动伸缩子元素的大小3.给谁加display:flex，是代表让谁的子元素用弹性布局使用弹性布局会让子元素在主轴方向依次排列，默认主轴为x轴display:flex;代表让子元素用弹性布局justify-content:设置子元素在主轴方向的
  • 从0开始学习HTML5CSS3(二) xinhongwu
    css3新增内容1伪类选择器特点:都是以:开头,连在一起的写法其实是交集选择器以下这些主要是给a标签用的（hover除外）:hover鼠标悬停:active点击a标签时的样式:link尚未访问的样式:visited访问后的样式1.1xxx-child:first-child：找到第一个子元素:last-child：找到最后一个子元素:nth-child：找到某一个子元素写几就代表找到第几个写n代表
  • html-css文字特效,7款震撼人心的HTML5CSS3文字特效 号三 html-css文字特效
    1、HTML5像素文字爆炸重组动画特效今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效，我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。2、HTML5/CSS33D文字特效文字外翻效果今天我们再来分享一款很酷的HTML5/CSS33D文字特效，该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果，非常不错的一款文
  • HTML5CSS3行内块的巧妙运用（上一页下一页效果） Dowen00 css3html5css
    行内块的巧妙运用*{margin:0;padding:0;}.box{text-align:center;}.boxa{display:inline-block;width:36px;height:36px;background-color:#f7f7f7;border:1pxsolid#ccc;text-align:center;line-height:36px;text-decoration:
  • html5css3自适应开发,基于html5+css3的网页自适应布局设计 人事星球 html5css3自适应开发
    的位置。3.3三列布局也称为双飞翼布局，中间列自适应宽+左右列固定宽;中间列宽度自适应，放置主体内容，所以需要让中间列在浏览器中优先渲染，因此，在中加入如下代码：(1)当子元素处于浮动状态时，设置负margin>=子元素宽度时，子元素会叠盖到兄弟元素之上;因此sidebox-left设置为margin-left：-100%，以让其位置出现在main元素的左边，同理，sidebox-right设置为
  • html5css3新特性面试,前端面试题——HTML5和CSS3 GanHuoSir html5css3新特性面试
    1.列举3个HTML5新标签，3个CSS3新特性。HTML5新标签header,nav,article,footer,section,aside,audio,video,embedCSS3新特性border-radius,box-shadow,border-image,background-image,transition.2.HTML5实现本地临时存储和永久存贮、读取、删除一条key为c，val
  • 无标题文章 cde3ebb68d56
    高云鹏的个人简历ABOUTSKILLSEXPERIENCEPRICINGBLOGCALENDAROTHERALLDEMOShello高云鹏前端开发工程师年龄24城市北京邮箱[email protected]手机15210774923毕业时间2014、3下载简历说一段话技能HTMLJavaScriptJqueryReactVueHTTP作品集HTML5CSS3框架js
  • 2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特效 逆境清醒 前端特效前端html5css3源代码代码画兔子
    2023年春节祝福第二弹送你一只守护兔，让它温暖每一个你！【html5css3】画一只会动的兔子目录一、送你一只守护兔，效果图二、前言三、代码解释及部分特效教程（1）、css3立体字（2）、充电特效（a）、前置知识（b）、主要思路步骤及相关代码（c）、充电特效完整源代码（3）、动态爱心特效（4）、满屏花瓣飘落动画特效四、兔字的谐音祝福词五、完整源代码下载及其他内容见（下）一、送你一只守护兔，效果图
  • html5css3网站设计基础教程答案,HTML5+CSS3网站设计基础教程_动手实践源代码 李子骅 luin
    【实例简介】HTML5+CSS3网站设计基础教程_动手实践源代码chapter01到chapter10【实例截图】【核心代码】HTML5CSS3网站设计基础教程_动手实践源代码└──HTML5+CSS3网站设计基础教程_动手实践源代码├──chapter01│├──images││└──designer.jpg│└──index.html├──chapter02│├──demo.html│├──i
  • 前端找工作?真的不难 看看你会哪些（不定时更新） 阿民不加班 前端面试题Vue方面前端vue.jsjavascript
    黄色背景标记非常重要、必须熟练掌握，面试必问红色文字标记开发过程中用的最多Html5Css3静态页面还原淘宝，京东等大型网站首页。单页面即可Js掌握到事件（例如点击，鼠标、键盘），定时器，Es6新方法（面试必问）Vue2的生命周期，什么阶段做什么事（面试必问）router路由跳转，传参，子路由，路由拦截（面试必问）Vuex的使用，state，mutation，action，getter，modul
  • HTML5CSS3上-动画 转换 新特性 前端面试题部分汇总 onlooker_thinker 笔记前端html5css3动画前端javascript
    HTML5CSS3HTML5CSS3相关面试题HTML5新特性CSS3新特性列举5个以上的H5事件微信小程序与H5的区别H5的浏览器存储有哪些？简述transform，transition，animation的作用使用CSS怎么让Chrome支持小于12px的文字比如10px？（了解）1.0.HTML51.1.语义化标签1.2.多媒体标签1.2.1.audio音频标签1.2.2.video视频标签
  • html5精彩案例 小强好吃
    分享HTML5CSS3实现的精彩案例js图片轮播:VCD包装盒个性幻灯片http://download.csdn.net/download/lmj623565791/7502275纯CSS打造相册效果http://download.csdn.net/download/lmj623565791/7502277HTML5CSS3：无插件拖拽上传图片http://download.csdn.net/do
  • html5 css3 入门教程 ITDragon龙 web前端
    html5css3入门教程课程目录：个人主页：http://www.itit123.cn/更多干货等你来拿html5基础知识第一章语法html5基础知识第二章标签html5基础知识第三章表单html5基础知识第四章其他标签css3基础知识第一章语法css3基础知识第二章控制背景-字体-文本-表格css3基础知识第三章div盒子css3基础知识第四章布局css3基础知识第五章实战训练css3基础知识
  • 关于HTML5 css3 基础知识的总结 锅巴程序员 html5css3
    缘由最近几天在看HTML5css3相关的入门视频，视频是一个外国人quentinwatt在14年录制，总共有51期，每期大概6-9分钟。我大概断断续续看了3天才看完。在很久很以前，本人也认认真真的写过html代码，后来因为每天背英语4级单词，由于脑容量较小，那部分内容被清除了。个人感受HTML5做东西出来非常快。比如，在网页上播放视频、歌曲，只要一个控件就可以搞定：远比我们在androidjava
  • HTML5 CSS3伪类元素文字美化 iteye_17658 境-H5
    HTML5CSS3伪类元素文字美化*{padding:0;margin:0;}span{position:relative;font-size:5rem;color:#0099CC;}span::before{position:absolute;font-size:5rem;color:#333;content:attr(data-text);white-space:nowrap;width:50
  • 前端工具模板 whjin 前端模板工具
    HTML58个新的响应式HTML5CSS3网站模版50+个免费的响应式HTML5网站模版CSS310个由纯CSS实现的动画角色Web开发中20个很有用的CSS库CSS工具、框架、库合集(1-26)CSS工具、框架、库合集(27-54)CSS3实现18种Loading效果8个为图片添加Hover效果的CSS库8个AwesomeCSS过滤库&工具JavaScript15个最棒的JavaScript图形
  • 一些感觉挺有意思的例子 xiaozhen0610 前端
    html5css3圆形百分比加载动画特效https://www.mk2048.com/demo/demo_target_desc_hbc2jbbkaa.htmlhtml5css3loading加载动画，圆形百分比进度条加载动画，加载完成显示健康度检测得分情况。jquery仿手机外卖点餐购物车页面模板https://www.mk2048.com/demo/demo_target_desc_hbcch
  • html5 CSS3 渐变按钮 yycgis
    html5CSS3渐变按钮Cross-browserCSSgradientbuttonsdemobody{background:#e5e5e5;text-align:center;}/*----------------------------*/.button{margin:10px;text-decoration:none;font:bold1.5em'TrebuchetMS',Arial,He
  • 解决方法！：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 熏肉大饼 html5html5域名chrome
    UncaughtSecurityError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata.最近在自学html5CSS3很推荐李刚的这个书，今天在家里测试发现canvas中的getImageData报错Failedtoexecute'getImag
  • HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合 豆约翰 css
    本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域，确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-whole.css.nav{height:30px;background-color:#f4f4f4;}.search-bar{height:134px;background-
  • HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合 [豆约翰]
    本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域，确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-whole.css.nav{height:30px;background-color:#f4f4f4;}.search-bar{height:134px;background-
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 Python进阶者
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊 weixin_33882452
    转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客），对前台感兴趣的能够没事去看看他的博客，非常给力~这篇博客的目的是由于上篇HTML5CSS3专题
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 pengdongcheng Web开发HTMLCSS
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • 一篇文章教会你利用html5和css3实现3D立方体效果图 pengdongcheng Web开发HTMLCSS
    【一、项目背景】随着HTML5CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，
  • HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册 weixin_30535167
    转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客），对前台感兴趣的可以没事去看看他的博客，很给力~这篇博客的目的是因为上篇HTML5CSS3专题诱
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 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
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他