树桐
树桐

【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）

【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）_第1张图片
本期带大家制作百度浏览器官网（目前官网已经注销）中奔跑的北极熊的动画效果。

动画原理

奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起，形成一张背景图片，然后设置一个盒子，将背景图片放入，通过设置

animation-timing-function: steps();

盒子不动，让背景图片以片段为单位移动，当速度达到足够快时，就感觉北极熊正在奔跑。
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）_第2张图片

背景图片

首先准备一张背景图片，当作北极熊奔跑的背景，不设置背景图片也可以，但要设置背景颜色，方便观看北极熊奔跑动画。本案例用的背景图片是雪山背景图片。
雪山背景图片
背景图片1
北极熊奔跑的片段拼接图
bear

代码实现

1、搭建HTML结构

box为整体的大盒子，里面的img用于存放雪山背景图片，bear盒子用于展示北极熊奔跑动画。

<body>
    <div class="box">
        <img src="image/bg1.png" alt="" class="bg1">
        <div class="bear">div>
    div>
body>

设置背景盒子box，设置position: relative;相对定位是方便对bear盒子以及雪山背景图片进行定位。设置overflow: hidden;可以让超出盒子的图片隐藏起来。

2、CSS3对盒子进行修饰

.box {
            position: relative;
            overflow: hidden;
            width: 1300px;
            height: 600px;
            margin: 0 auto;
            background-color: #3b3d4b;
        }

将雪山背景图片放到box盒子的底部位置，因为原雪山背景图较大，因此我们需要对雪山背景图的高度进行修改，高度与宽度只需修改一个，另一个参数会等比例变化。

.bg1 {
            position: absolute;
            bottom: 0;
            height: 249px;
        }

将bear盒子放置于box盒子的中部偏下区域，并将北极熊图片当作bear的背景图片插入。
因为北极熊图片为1600x100像素，一共有八个北极熊奔跑片段，因此我们的盒子应该设置为200x100像素，这样盒子每次只会展示一个北极熊片段。

.bear {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 100px;
            background: url(image/bear.png) no-repeat;
            /* animation: run .6s steps(8) infinite; */
        }

3、设置动画

初始位置为第一个北极熊片段，最后位置为最后一个北极熊片段，北因此整个过程北极熊背景y轴没有移动，只有x轴移动了1600像素的距离。
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）_第3张图片

@keyframes run {
            0% {}

            100% {
                background-position: -1600px 0;
            }
        }

4、引用动画

定义动画之后，需要在bear盒子中引用动画，因为北极熊片段一共为8个，因此将steps设置成8

animation: run .6s steps(8) infinite;

这样我们就完成了在雪地里奔跑的北极熊的动画效果。

5、完整代码





    
    
    
    奔跑的北极熊
    



    
"box">
        "image/bg1.png" alt="" class="bg1">
        
"bear">

你可能感兴趣的:(CSS3动画,css3,html5)

  • html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上 猫研所 html5websocket手机
    对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI
  • 【大咖力荐 新手必备】软件开发入门，这300篇文章就够了！ 高校俱乐部 软件开发新手必备数据编码IP
    小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
  • HTML5球体下落粒子爆炸特效 酷爱码 htmlhtml5前端html
    HTML5球体下落粒子爆炸特效，源码由HTML+CSS+JS组成，双击html文件可以本地运行效果，也可以上传到服务器里面下载地址HTML5球体下落粒子爆炸特效
  • 页面垂直居中实现方法（HTML/CSS） TdMaster csshtml前端
    在网页设计中，垂直居中是一个常见的需求。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。方法一：使用Flexbox布局Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。下面是一个使用Flexbox布局实现页面垂直居中的示例代码：body,html{height:100%;margin:0;display:flex;align-
  • CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例 小豆包3D世界 css3前端javascript
    CSS3DRenderer,CSS3DObject,OrthographicCameraAPI结合使用案例three.jscss3d-orthographicbody{background-color:#f0f0f0;}a{color:#f00;}#info{color:#000000;}three.jscss3d-orthographic{"imports":{"three":"../build
  • 网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子 weixin_39905500
    1Flex布局首先聊聊Flex布局，Flex布局又称“弹性布局”，任何容器都可以指定为Flex布局，设置Flex布局会使得子元素的float、clear、vertical-align失效1.1Flex属性1.1.1flex-direction：决定项目的排列方向，默认自左向右水平排列.box{flex-direction:row|row-reverse|column|column-reverse;
  • 对网站开发感兴趣？想要看顶级大佬是怎么做的？ CCSBRIDGE html5
    前言有的人喜欢造轮子，有的人讨厌重复造轮子。萝卜白菜，各有所好。我收集了一些一看就觉得很厉害的项目公主/王子请享用https://github.com/h5bp/html5-boilerplate简介：HTML5Boilerplate是一个专业的前端模板，用于构建快速、强大且适应性强的Web应用程序或网站。该项目是十多年迭代开发和社区知识的产物。它没有强加特定的开发理念或框架，因此您可以按照自己想
  • 腾讯文档嵌入html5,基于腾讯TBS 实现应用内打开并浏览Office文件 炎火鱼 腾讯文档嵌入html5
    配置：下载sdk,并导入jar文件和so文件导入jar文件.png导入so文件.pngandroid{...defaultConfig{...//这里比较坑，当时用极光推送把64位的ndk库也加上了，x5内核初始化一直失败//这里要去掉所有64位库，x5内核才能加载成功ndk{abiFilters"a
  • 3 HTML5 svg 官清岁月
    SVG:ScalableVectorGraphics;//可缩放矢量图形->svg图像放大情况下图形质量不会损失(失真)；-->应用场景：图表、动画、矢量图(点/线/面,形成的基本图形)、常用于制作图标icon1、canvas与svg的区别：(1).canvas是由像素点构成的，其依赖分辨率，其放大后会"失真"；其通过js来绘制2D图形，常用来制作游戏、图表(运行速度快)；(2).svg是由图形(
  • 【Rust】——Vector集合 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    个人专栏：算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客Java基础：Java基础_IT闫的博客-CSDN博客c语言：c语言_IT闫的博客-CSDN博客MySQL：数据结构_IT闫的博客-CSDN博客数据结构：数据结构_IT闫的博客-CSDN博客C++：C++_IT闫的博客-CSDN博客C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客基于HTML5的网页设计
  • HTML5+CSS3小实例：3D分层图像悬停效果 艾恩小灰灰
    实例：3D分层图像悬停效果技术栈：HTML+CSS效果：源码：【html】3D分层图像悬停效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局居中*/display:flex;justify-content:center;align-items:center;overflow:hidden;/*渐变背景*/
  • HTML—基本介绍 Black—slience html前端
    HTML是一种超文本标记语言(HyperTextMarkupLanguage)，用于创建网页的标记语言超文本：是指页面内可以包含图片、链接、声音、视频等内容标记：HTML富含大量的标签供程序员使用，通过标记符号来规定指定内容的样式浏览器最终根据不同的HTML标签，解析成日常中所看到的网页HTML文件基本格式(HTML5版本)网页标题标签体闭合标签(封闭的区间)②自闭合标签，没有修饰的内容-->加粗
  • html5在不同浏览器兼容,HTML5浏览器兼容性解决方案 weixin_39732991 html5在不同浏览器兼容
    HTML5浏览器兼容性解决方案HTML5新增语义标签，以及如何兼容老版本浏览器。前言HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体。例如：video标签和audio及canvas标记。而HTML5在取消了过时的显示效果标记和等同时，也引入了一些新的语义标签，例如：更多的语义标签请参考一、语义标签兼容性1.解决思路主流浏览器都兼容HTML5的新标签。
  • IntelliJ IDEA 的安装、配置与使用 坏孩子充电自习室 开发经验大数据
    一、IntelliJIDEA介绍–EclipseIBM1.JetBrains公司介绍IDEA(https://www.jetbrains.com/idea/)是JetBrains公司的产品，公司旗下还有其它产品，比如：WebStorm：用于开发JavaScript、HTML5、CSS3等前端技术；PyCharm：用于开发pythonPhpStorm：用于开发PHPRubyMine：用于开发
  • css3-水波浪球起伏效果 正在修炼web的小芮 css3css3
    body样式css样式*{margin:0;padding:0;list-style:none;}html,body{width:100%;height:100%;}body{display:grid;justify-content:center;align-content:center;background-color:#fff;}.circle{width:150px;height:150px
  • css3夜晚星空 苦逼的猿宝 html+csscss3前端css
    css3动画*{margin:0;padding:0;}.container{width:100vw;height:100vh;background-color:#000;}.moon{width:100px;height:100px;border-radius:50%;background-color:#F5FFFA;box-shadow:0060px#F5FFFA;position:absol
  • 植树节html5游戏,植树节活动 weixin_30193269 植树节html5游戏
    活动概述活动时间:3月10日至3月13日(以实际版本内活动日期为准)活动介绍:一年一度的植树节活动开始了，小伙伴们拿起小铲子，小水桶，今天勤劳来种树，明天不用吸雾霾！快来邀请你的小伙伴一同参与活动吧，开开心心植树节，还有神秘小礼物哦。不用谢谢我，我叫红领巾。活动NPC:应天府(093,128)红领巾活动一：播种希望活动时间:3月10日至3月13日(以实际版本内活动日期为准)活动说明:每一颗小树苗的
  • 什么是flash什么是html5？ html5
    如今，HTML5可谓如众星捧月一般，受到许多业内巨头的青睐。且不说谷歌、苹果等业内巨头把它描绘为互联网体验的未来，即便是以不服从标准著称的微软，也向它频频示好，决心在InternetExplorer9中加入对HTML5的大量支持。然而，HTML5的路途真的将一帆风顺么？本文将列举了一些在HTML5发展和普及过程中需要解决的问题。什么是HTML5？根据维基百科上的解释，HTML5的前身是WebApp
  • css单位中px、em、rem的区别 慢羊羊头上没草 css前端css3
    1、px像素（Pixel）。px是相对于显示器屏幕的分辨率来的，是一个虚拟的长度大单位，是计算机系统的数字化图像的长度单位2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸为被人为的设置，则相对于浏览器的默认字体尺寸，他会继承父级元素的字体大小因此并不是一个固定值3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HT
  • 关于HTML5表单验证的方法教程 猿小白klp htmlaxioshtml5前端html后端学习
    简介HTML5表单验证是一种在客户端对用户输入进行验证的方法，可以有效地减少对于服务器端验证的依赖。通过使用HTML5表单验证，可以为用户提供实时的错误提示和更好的用户体验。本教程将介绍如何在HTML5中使用各种验证属性和技术来实现表单验证。基本表单结构首先，我们来创建一个基本的表单结构，包括输入字段和提交按钮。以下是一个简单的例子：姓名：邮箱：密码：在上面的代码中，我们创建了一个包含姓名、邮箱和
  • qt textbrowser html5,QT textBrowser 使用 Enzo 恩佐 qttextbrowserhtml5
    sharedUserIdandroid:sharedUserIdsharedUserId的作用是让两个应用程序共享一个userid,我们都知道linux进程给每一个应用程序分配了一个独立的userid,所以如果两个或多...MATLAB代码加密生成.p文件代码就下面一句话:pcodeyourfile.m生成的yourfile.p就是你的加密文件,别人是看不到代码的,调用和m文件调用一
  • CSS3新特性和CSS3动画 css3
    CSS3的新特性1.选择器：（1）属性选择器：[属性名][属性名=属性值][属性名^=属性值][属性名$=属性值][属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如:hover、:active、:visited。（3）伪元素选择器：选择特定部分的元素，例如::before、::after。（4）多重选择器：使用逗号分隔来同时选择多个元素，例如element1,element2。2
  • VSCode设置左侧资源管理器字体大小
    1.进入安装目录MicrosoftVSCode\resources\app\out\vs\workbench2.打开文件workbench.desktop.main.css3.搜索.monaco-workbench.part>.content4.修改font-size的值，默认是13px，我改为15px5.保存，重启VSCodeps：想调整行间距，但是不知道怎么改
  • 面试前端性能优化八股文十问十答第二期 程序员小白条 面试八股文系列面试前端性能优化八股文面试必备职场和发展项目实战
    面试前端性能优化八股文十问十答第二期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）如何优化动画？优化动画可以通过以下几个方面进行：使用CSS动画：利用CSS3提供的transition和animation属性来实现动画效果，因为CSS动画是由浏览器来执行的，通常比JavaScript动画性能更高。使用硬件加速：通过CS
  • css+动画优化,css3动画性能优化--针对移动端卡顿问题 影子的覆盖 css+动画优化
    一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为.png或者.jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在canvas上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。2.cs
  • 移动端 H5 实现拍照功能的几种方法 忧郁的蛋~ 前端技术htmljavascript前端
    下面是实现移动端H5拍照功能的几种方法：1、使用：通过HTML5规范中的调用系统摄像头，并选择拍摄的照片。但这种方式可能会导致页面刷新。实现移动端H5拍照功能的代码：在HTML中创建一个：2，在JavaScript中为该元素绑定change事件，并读取选择的图片文件：varinput=document.querySelector("input[type=file]");input.addEvent
  • websocket 实现原理和技术方案 静水流深，沧海一粟 浏览器APIwebsocket网络协议网络node前端javascript
    websocketWebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，用以取代轮询与长连接，使客户端浏览器具备像C/S框架下桌面系统的即使通讯能力websocket协议是建立在tcp协议之上的，建立连接需要三次握手。websocket协议的连接过程：客户端连接服务器（TCP/IP），三次握手，建立了连接通道客户端发送一个http格式的消息（特殊格式），服务器也响应一
  • React和Vue 中的 router 实现原理如何 xxq_0217 vue面试题react.jsvue.js前端前端框架
    React和Vue中的路由器（Router）实现原理类似，都是基于监听URL变化，然后根据不同的URL加载相应的组件或页面。下面是它们的一般实现原理：ReactRouter实现原理：HistoryAPI：ReactRouter使用HTML5HistoryAPI（pushState()和replaceState()方法）来操作浏览器的历史记录，从而实现无刷新页面的路由切换。监听URL变化：React
  • web CSS3伪类选择器 :nth-child() worldzhy CSS
    :nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：:nth-child(length);/*参数是具体数字*/:nth-child(n);/*参数是n,n从0开始计算*/:nth-child(n*length)/*n的倍数选择，n从0开始算*/:nth-child(n+length);/*选择大于length后面的元素*/:nth-child(-n+lengt
  • ionic3打包APP thisDong
    ionicionic是一个强大的HTML5应用程序开发框架(HTML5HybridMobileAppFramework)。可以帮助您使用Web技术，比如HTML、CSS和Javascript构建接近原生体验的移动应用程序。ionic主要关注外观和体验，以及和你的应用程序的UI交互，特别适合用于基于Hybird模式的HTML5移动应用程序开发。ionic是一个轻量的手机UI库，具有速度快，界面现代化
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他