海轰Pro
海轰Pro

「HTML+CSS」--自定义加载动画【047】

效果展示

在这里插入图片描述

Demo代码

HTML




    
    
    
    
    Document

CSS

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
}

span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: white;
  left: -100px;
  /* background-color: red; */
  animation: loading 4s linear infinite;
}

@keyframes loading {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

原理详解

步骤1

使用span标签，设置为

  • 宽度、高度均为20px
  • 圆角化
  • 背景色为红色
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  background-color: red;

效果图如下

在这里插入图片描述

步骤2

将小球左移100px

left: -100px;

效果图如下

在这里插入图片描述

步骤3

为span添加动画

使用box-shadow阴影充当白色小球

白色小球有四个

关键有9帧

第一帧

  • 四个白色小球（也就是span的阴影）均位于span初始位置，即红色小球所处的位置

  • 颜色均为rgba(255, 255, 255, 0)（白色，但是透明级别为0，视觉上看不见）

box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果图如下

在这里插入图片描述

第二帧

  • 小球1移动至红色小球右侧100px处，颜色变为rgba(255, 255, 255, 1)（纯白）
  • 其余小球位置不变
box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果图如下

在这里插入图片描述

第三帧

  • 小球1再向右移动20px（即一个小球的直径长度）

  • 小球2从初识位置移动至红色小球右侧100px处（即第二帧小球1所处的位置）

  • 小球1、2颜色均为rgba(255, 255, 255, 1)（纯白）

  • 其余小球不变

 box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果图如下

在这里插入图片描述

第四帧

  • 小球1再向右移动20px（即一个小球的直径长度）

  • 小球2再向右移动20px

  • 小球3从初识位置移动至红色小球右侧100px处（即第三帧小球2所处的位置）

  • 小球1、2、3颜色均为rgba(255, 255, 255, 1)（纯白）

 box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);

效果图如下

在这里插入图片描述

第五帧

  • 小球1再向右移动20px（即一个小球的直径长度）

  • 小球2再向右移动20px

  • 小球3再向右移动20px

  • 小球4从初识位置移动至红色小球右侧100px处（即第四帧小球3所处的位置）

  • 小球1、2、3、4颜色均为rgba(255, 255, 255, 1)（纯白）

box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);

效果图如下

在这里插入图片描述

第六帧

  • 小球1再直接移动至距离红色小球右侧200px（形成对称）
在这里插入图片描述
  • 颜色变为rgba(255, 255, 255, 0)（白色，但是透明级别为0，视觉上就看不见了）
  • 小球2、3、4再向右侧移动20px（一个小球的直径）
 box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);

效果图如下

在这里插入图片描述

第七帧

  • 小球1停留在第六帧的位置（红色小球右侧200px处）

  • 小球2移动至小球1的位置，颜色变为rgba(255, 255, 255, 0)（

  • 小球3、4向右移动20px

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);

效果图如下

在这里插入图片描述

第八帧

  • 小球1、2停留在红色小球右侧200px处

  • 小球3移动至小球1、2的位置，颜色变为rgba(255, 255, 255, 0)

  • 小球4向右移动20px

  box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);

效果图如下

在这里插入图片描述

第九帧

  • 小球4最后也移动至红色小球右侧200px处，颜色变为透明
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);

效果图如下


在这里插入图片描述

各帧之间使用linear速度曲线平稳过渡

综上，动画代码为

 animation: loading 4s linear infinite;

/*动画实现*/
@keyframes loading {
/*第一帧*/
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第二帧*/
  12% {
    box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第三帧*/
  25% {
    box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第四帧*/
  36% {
    box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第五帧*/
  50% {
    box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
  }
  /*第六帧*/
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
  }
  /*第七帧*/
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
  }
  /*第八帧*/
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
  }
  /*第九帧*/
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

效果图如下

在这里插入图片描述

步骤4

注释掉span的背景色（取消红色）

效果图如下

在这里插入图片描述

你可能感兴趣的:(「HTML+CSS」--自定义加载动画【047】)

  • Android逆向抓包技巧-不走系统代理 象野VH Android逆向基础爬虫
    前言不走代理，即NoProxy抓包问题，这种情况是在使用代理之后抓包工具并未捕获到数据，而且无论是开启还是关闭抓包工具，都不影响App正常的数据加载。因为Android系统设置的代理并不是强制对所有App生效，App可以在网络请求类库中通过自定义代理设置，选择是否要走系统代理。举例：在安卓开发中，OkHttp发送请求时，设置Proxy.NO_PROXY，让手机不走系统代理，此时基于系统代理抓不到包
  • C# 基础巩固 详解 匿名方法、lambda表达式和Action关键字 毫无遗憾的帅哥 基础巩固c#开发语言.netcore
    匿名方法C#匿名方法定义‌C#中的匿名方法是没有名称的方法，‌它在声明和初始化时就被使用。‌通常与委托（‌delegate）‌一起使用，‌以便将代码块作为参数传递给其他方法。‌匿名方法可以转换为System.Action和System.Func等类型，同时指定自定义的参数列表。匿名方法通常表现为使用delegate运算符和Lambda表达式‌。定义方式‌：‌使用delegate关键字声明委托类型。
  • 第二十四章 rust中的运算符重载 余识- Rust从入门到精通rust开发语言后端
    注意本系列文章已升级、转移至我的自建站点中，本章原文为：rust中的运算符重载目录注意一、前言二、基本使用三、常用运算符四、通用约束一、前言C/C++中有运算符重载这一概念，它的目的是让即使含不相干的内容也能通过我们自定义的方法进行运算符操作运算。比如字符串本身是不能相加的，但由于C++中的String重载了运算符+，所以我们就可以将两个字符串进行相加、但实际的含义其实是拼接。而rust中同样存在
  • 如何使用JPA自定义更新的sql语句实现对数据表的修改？——SpringDataJpa实现自定义（更新）update语句 海海不掉头发 笔记allsqlitesqlintellijideajapjpa
    文章目录前言一、DAO层/Mapper层二、Service业务处理层三、Controller控制层总结前言有的时候我们在后台管理系统中只需要修改一列的数据时，JPA的操作死对所有字段进行修改，这样就不太方便，而且SpringDataJpa的框架没有线程的更新方法，只能调用save()方法实行保存修改的数据。如果不想把其中一列的数据修改的话，那么JPA就会自动把这一列不想修改的数据默认null，并且
  • LeetCode LCR147.最小栈 A.A呐 Leetcode牛客题型leetcode算法c++
    LeetCodeLCR147.最小栈思路：建立两个栈，一个栈正常入栈出栈，一个栈只用于出入最小数，当push值小于minst栈顶才入栈，当pop值等于minst栈顶才出栈。代码：classMinStack{public:MinStack(){//自定义类型编译器会去调用相关构造}voidpush(intx){_st.push(x);if(_minst.empty()||x_st;stack_min
  • 推荐使用：Models——简化WordPress自定义类型的高效工具 郦祺嫒Amiable
    推荐使用：Models——简化WordPress自定义类型的高效工具modelsWordPressplugintocreatecustomposttypesandtaxonomiesusingJSON,YAMLorPHPfiles项目地址:https://gitcode.com/gh_mirrors/models7/models在追求灵活和定制化的Web开发道路上，WordPress凭借其强大的社
  • Node.js Express 框架 wjs2024 开发语言
    Node.jsExpress框架介绍Express是一个快速、开放、极简的Node.jsWeb框架。它为构建Web应用程序和服务提供了一个强大的工具集，使得开发过程更加高效和便捷。Express的设计哲学是提供一个最小的API，让开发者可以轻松地构建自定义的Web应用程序。它被广泛用于构建API和Web服务，并且是许多流行的Node.jsWeb框架的基础。特点1.易于上手Express框架的设计非
  • 接口异常重新执行实现方案 遇事不决AI解决 javascriptvue.js
    在开发中，很多小伙伴可能会遇到不少的情况，那就是请求服务器的时候，因为网络问题或者其他别的导致请求失败，如何处理。举一个最简单的业务场景就是：当项目中部署了性能监控，当监控的请求数量达到自定义的阈值时，要求发送数据给后端，如果此时存在发送失败，如何实现重发？实现方案借用第三方库实现自定义retry1.借用第三方库实现1.使用retry库安装npminstallretry||yarnaddretry
  • Mybatis 是如何进行分页的？分页插件的原理是什么？ 骆梦晴 mybatismysqljava
    1）Mybatis使用RowBounds对象进行分页，也可以直接编写sql实现分页，也可以使用Mybatis的分页插件。2）分页插件的原理：实现Mybatis提供的接口，实现自定义插件，在插件的拦截方法内拦截待执行的sql，然后重写sql
  • freemarker模板学习笔记 tryCbest freemarkerjavaspringboot
    文章目录freemarker常用指令if-elseif-else指令switch,case,default,break指令list,else,items,sep,break指令指令语法指令指令指令指令include指令基础知识带*的pathimport指令assign指令自定义指令参数嵌套内容宏和循环变量freemarker内置函数字符串内置函数数字内置函数哈希表内置函数序列内置函数循环变量内置函
  • Java封装大华SDK，实现门禁一体机的常用功能 香蕉i java物联网
    Java封装大华SDK，实现门禁人脸一体机的常用功能大华sdk的相关资料在网上很少，刚接触比较难上手，这里将本人近期的研究成果进行分享。从大华官网下载相应环境下的sdk：自定义开发的工具类，这里主要实现的功能有：//1、远程开门//openDoor();//2、开门记录//findAccessRecords();//3、指定数量查询人员信息//findUserInfos();//4、通过ID查询人
  • MyBatis如何实现分页 思静语 #Mybatismybatis
    文章目录MyBatis分页方式对比使用数据库厂商提供的分页查询语句通过自定义SQL实现分页逻辑1.使用RowBounds实现分页2.使用PageHelper实现分页数组分页使用MyBatis-Plus进行分页MyBatis物理分页和逻辑分页MyBatis手写一个拦截器分页在MyBatis中实现分页通常有两种方式：使用数据库厂商提供的分页查询语句（如MySQL的LIMIT）或者通过自定义SQL来实现
  • ElementUI Cascader 级联选择器实现点击文本选中 阿程_88 #ElementUIelementui
    一、遇到的问题使用官方案例级联选择器时，只有点击前面小圆点才能选中，点击文本无法选中。二、需求级联选择器各层级都能选中，并且点击文本也能选中三、相关代码//级联选择器自定义浮层类名，实现前面单选框隐藏，点击文本即可选中功能.popper-custom{.el-cascader-panel{.el-cascader-menu{.el-radio{height:100%;width:150px;opa
  • vue el-date-picker-or 自定义显示格式 java皮皮虫 vue.js
    translateDate就是方法输入你想要的返回格式就行
  • vue项目架构 影子信息 前端javascript
    搭建项目框架,封装模块1.网络模块封装axios二次封装请求拦截器token是什么响应拦截器http协议2.动态权限菜单axios二次封装函数递归动态添加路由addRoutes刷新界面，菜单丢失问题，持久化存储技术实现点击菜单，不能找到路由组件问题,3.按钮资源权限根据登录用户角色获取能操作的资源列表，保存store自定义权限指令,封装有无操作该资源的权限v-permission=“[‘EditU
  • 自定义类型：联合和枚举 Ajiang2824735304 c++算法开发语言
    1.联合体联合体跟结构体一样，由一个或多个成员构成，这些成员类型可以不同。但是编译器只为最大的成员分配足够的空间。特点是所有成员共用同一块空间。所以也称共用体。1.1定义unionUn{charc;inta;};跟结构体一样，需要有分号。1.2空间大小计算联合体的大小至少是最大成员的大小。当最大成员大小不是最大对齐数的整数倍时，就要对齐到最大对齐数的整数倍。例如：#includeunionUn1{
  • Hadoop之mapreduce -- WrodCount案例以及各种概念 lzhlizihang hadoopmapreduce大数据
    文章目录一、MapReduce的优缺点二、MapReduce案例--WordCount1、导包2、Mapper方法3、Partitioner方法（自定义分区器）4、reducer方法5、driver（main方法）6、Writable（手机流量统计案例的实体类）三、关于片和块1、什么是片，什么是块？2、mapreduce启动多少个MapTask任务？四、MapReduce的原理五、Shuffle过
  • jmeter持续时间循环控制器_jmeter 循环控制器使用 weixin_39610759 jmeter持续时间循环控制器
    案例一：一、认识循环控制器如下图：新增一个循环控制器循环控制器的设置界面：循环次数：永远和自定义次数，这个应该比较好理解。二、使用循环控制器其实大家对Jmeter的熟悉的话，应该会想到，线程组这个设置界面也是有一个循环次数的设置，那么到底他们两个有什么关联呢。我理解为父子关系。下面举个例子，首先在线程组中设置循环次数3，循环控制器中设置循环测试2，其他默认，添加一个计时器，方便查看结果，如下：执行
  • fastapi（65）- 路由函数指定了 response_model，在返回自定义 JSONResponse 时， 不会限制它返回的数据结构... 小菠萝测试笔记 数据库javapythonmysqlspring
    前置知识JSONResponse：https://www.cnblogs.com/poloyy/p/15364445.htmlresponse_model：https://www.cnblogs.com/poloyy/p/15317585.html背景在写辣鸡平台，然后有统一的自定义JSONResponse，所以全部路径函数都是返回自定义JSONResponse的，比如@router.post("
  • wordpress做后台的资讯类小程序源码 北漂的老猿 好代码wordpress
    WordPress博客系统资讯资源变现下载小程序源码。这个就比较牛逼了，直接用wordpress做后台因为由于微信的新规从2022-11月9号后新上线的小程序将不能获取用户头像和名字了所以微信放需要适配全新的,支持让用户自定义头像和昵称了不然统一返回默认头像和显示(微信用户)另外还有一些新增和优化的地方就不多做介绍了大家自行的去研究探索吧!代码下载
  • 【Uniapp】前端面试题 菜鸟una 前端八股文面试题前端uni-appjavascript
    Uniapp部分文章目录Uniapp部分1.Uniapp的页面生命周期和Vue的生命周期有何区别？1）Vue的生命周期2）Uniapp的页面生命周期3）区别2.Uniapp的rpx转换px的公式？3.Uniapp的tabbar自定义，怎么实现突起home标？1）配置自定义tabBar2）创建自定义tabBar组件3）突出显示“home”标4.Uniapp的tabbar自定义，怎么实现隐藏原生tab
  • HTML 进阶: Web Components 原生组件技术 超悠閒 HTML&CSS前端htmljavascriptwebcomponents组件化
    HTML进阶:WebComponents原生组件技术文章目录HTML进阶:WebComponents原生组件技术WebComponents概念&技术核心1.CustomElements自定义标签1.1注册WebComponent1.2生命周期钩子2.ShadowDOM3.Template模版&Slot插槽3.1Template模版的作用3.2Slot插槽的作用小结其他资源参考连接完整代码示例Web
  • python常用库学习-Matplotlib使用 问道飞鱼 Python相关内容python学习matplotlib
    文章目录安装Matplotlib导入库基本示例1.绘制简单的线图2.散点图3.柱状图4.直方图5.子图更多高级功能1.自定义样式2.文本和注释3.保存图形示例：使用Matplotlib绘制多个图表示例1:绘制多个线图示例2:绘制散点图和直方图参考文献Matplotlib是Python中一个非常流行的绘图库，它提供了大量的图形绘制功能，可以创建各种静态、动态和交互式的图表。下面是一些使用Matplo
  • 【鸿蒙HarmonyOS开发笔记】使用@Preview装饰器预览组件 Luxine. 鸿蒙HarmonyOS开发笔记前端分享笔记华为harmonyos
    概述ArkTS应用/服务支持组件预览，要求compileSdkVersion为8或以上。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。@Preview的使用参考如下示例@Preview({title:'FoodImage'})@ComponentstructFoodImageDisp
  • 【前端小技巧】不同组件中如何实现点击空白关闭自定义的弹窗 Luxine. 前端分享前端
    直接上代码吧处理函数closest的参数是弹窗的类名consthandleClickOutside=(event:MouseEvent)=>{consttarget=event.targetasHTMLElement;if(!target.closest('.popUpClassName')){//控制弹窗显示隐藏的变量ispopup.value=false;}};绑定到document上docu
  • Spring Ioc 容器介绍 圣心 springrpcjava
    本章介绍Spring的控制反转（IoC）容器。SpringIoC容器和Bean简介容器概述Bean概述依赖Bean范围自定义Bean的性质Bean定义继承容器扩展点基于注释的容器配置类路径扫描和托管组件使用JSR330标准注释基于Java的容器配置环境抽象注册LoadTimeWeaverApplicationContext的其他功能BeanFactoryAPI该接口表示SpringIoC容器，并负
  • Aspose.PDF功能演示：在程序中合并 JPG 文件 慧都小妮子 pdfgithubaspose
    Aspose.PDF是一款高级PDF处理API，可以在跨平台应用程序中轻松生成，修改，转换，呈现，保护和打印文档。无需使用AdobeAcrobat。此外，API提供压缩选项，表创建和处理，图形和图像功能，广泛的超链接功能，图章和水印任务，扩展的安全控件和自定义字体处理。接下来我们将为您介绍如何借助这款工具在程序中合并JPG文件。AsposeAPI支持流行文件格式处理，并允许将各类文档导出或转换为固
  • Java 实现自定义注解 kkkkatoq java实现自定义注解java开发语言
    一、@interface关键字我们想定义一个自己的注解需要使用@interface关键字来定义。如定义一个叫MyAnnotation的注解：public@interfaceMyAnnotation{}二、元注解光加上@interface关键字还不够，我们还需要了解5大元注解@Retention@Target@Documented@Inherited（JDK8引入）@Repeatable（JDK8引
  • 分数限制下，选好专业还是选好学校？ 禁默 人工智能
    1.专业解析探讨不同专业的优势和未来挑战（课程学习、就业等维度）。结合个人专业选择的经验和思考过程，自定义实际场景并给出不同场景下的“专业VS学校”选择方案。当探讨不同专业的优势和未来挑战时，需要根据具体的专业领域和市场需求进行评估。以下是一些常见专业领域的例子，以及它们可能面临的挑战和优势注意:专业分析只是分析了一部分，还有很多优秀的专业，大家可以上网查询，比小编介绍的更加详细！！！1.1工程类
  • Spring Cloud OpenFeign 自定义结果解码器 飞空之羽 springcloud由浅入深spring
    我们在定义微服务接口的时候，通常会使用一个Result类进行封装，将提示信息，返回对象和状态码等内容封装到一起返回给调用方，例如如下的格式：publicclassResult{/***响应码，200为成功*/privateIntegercode;/***失败时的具体失败信息*/privateStringmessage;/***失败信息是否为用户提示，如果是的话框架不会主动拦截该错误*/privat
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他