小天才程序员
小天才程序员

CSS实现旋转魔方

@Latest 2020年3月20日
@Description CSS动画 | CSS旋转魔方

文章导航

    • 1 效果图
    • 2 思路解析
    • 3 源码
    • 4 网站推荐

1 效果图

只是做了简单的旋转魔方，使用 HTML+CSS 就够了！
CSS实现旋转魔方_第1张图片

2 思路解析

  1. 首先要有外层容器，动画加在外层容器上面，就能使内部所有的元素跟着一起动；

  2. 外层容器必须具有一定的宽度和高度，这样才能使其绕着自己的中心点旋转（默认旋转方式）；

  3. 关于内部 div 的变换，其实一开始，所有的内部 div 都和外部容器在同一平面上。所以我们只需要掌握这一点就能够轻松找准6个面的位置。
    下面是我的思路：
    【注】X横轴，指向屏幕右侧；Y纵轴，指向屏幕下方；Z竖轴，指向屏幕内部的轴
    第1面：相对于原来的位置沿着Z轴平移100px
    第2面：第1面的对立面，相对于原来的位置沿着Z轴平移-100px
    第3面：相对于原来的位置沿着Z轴平移100px，同时要沿着X轴旋转90°，从而和原来的平面垂直
    第4面：第3面的对立面，和第3面平行，所以相对于原来的位置沿着Z轴平移-100px，同时要沿着X轴旋转-90°，从而和原来的平面垂直
    第5面：相对于原来的位置沿着Z轴平移100px，同时要沿着Y轴旋转90°，从而和原来的平面垂直
    第6面：第5面的对立面，和第5面平行，所以相对于原来的位置沿着Z轴平移-100px，同时要沿着Y轴旋转90°，从而和原来的平面垂直

  4. 最后让外部容器连同内部 div 沿着中心点旋转。

3 源码

  1. html代码
<body>
    <div class="box">
        <div class="dv1">1div>
        <div class="dv2">2div>
        <div class="dv3">3div>
        <div class="dv4">4div>
        <div class="dv5">5div>
        <div class="dv6">6div>
    div>
body>
  1. css代码
html,
    body {
        height: 100%;
        width: 100%;
        background-color: #FFDEE9;
        background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 33%, #ffffff 60%, #f9f3d1 100%);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    .box {
        width: 200px;
        height: 200px;
        position: relative;
        top: 300px;
        left: 45%;
        transform-style: preserve-3d;
        animation: move 5s linear infinite;
    }
    
    .box:hover {
        animation-play-state: paused;
    }
    
    .box>div {
        position: absolute;
        display: inline-block;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        text-align: center;
        font-size: 100px;
        line-height: 200px;
        color: #333;
        cursor: pointer;
    }
    
    .box>.dv1 {
        background-color: #21D4FD;
        background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        transform: translateZ(100px)
    }
    
    /* 1的对立面 */
    .box>.dv2 {
        background-color: #FFE53B;
        background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
        transform: translateZ(-100px)
    }
    
    .box>.dv3 {
        background-color: #08AEEA;
        background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
        transform: rotateX(90deg) translateZ(100px)
    }
    
    /* 3的对立面 */
    .box>.dv4 {
        background-color: #85FFBD;
        background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
        transform: rotateX(90deg) translateZ(-100px)
    }
    
    .box>.dv5 {
        background-color: #85FFBD;
        background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
        transform: rotateY(90deg) translateZ(100px)
    }
    
    /* 5的对立面 */
    .box>.dv6 {
        background-color: #A9C9FF;
        background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
        transform: rotateY(90deg) translateZ(-100px)
    }
    
   /* Safari and Chrome */
    @-webkit-keyframes move {
        from {
            transform: rotate3d(0, 0, 0, 0);
        }
        to {
            transform: rotate3d(1, 1, 1, 360deg)
        }
    }
    /* FireFox */
    @-moz-keyframes move {
        from {
            transform: rotate3d(0, 0, 0, 0);
        }
        to {
            transform: rotate3d(1, 1, 1, 360deg)
        }
    }
    /* Opera */
    @-o-keyframes move {
        from {
            transform: rotate3d(0, 0, 0, 0);
        }
        to {
            transform: rotate3d(1, 1, 1, 360deg)
        }
    }

4 网站推荐

渐变色网站：https://www.grabient.com/
使用很简单，只需要调配喜欢的颜色，复制CSS代码粘贴到样式文件就可以了！

你可能感兴趣的:(CSS)

  • 项目实战--网页五子棋（游戏大厅）(3) Ting-yu javamavenjava-eeintellij-idea
    我们的游戏大厅界面主要需要包含两个功能，一是显示用户信息，二是匹配游戏按钮1.页面实现hall.html游戏大厅五子棋开始匹配hall.css.container{height:calc(100%-50px);display:flex;justify-content:center;align-items:center;}.container.dialog{height:350px;width:29
  • tailwindcss 官网（一）安装、使用预处理器 ChrisP3616 前端工程师1——汇总前端工程师6——CSS预处理CSS框架react.jsnode.jscsstailwindcss
    tailwindcss官网（一）安装、使用预处理器文章目录tailwindcss官网（一）安装、使用预处理器1.安装集成指南以PostCSS插件的形式安装TailwindCSS通过npm安装Tailwind作为PostCSS插件来添加Tailwind创建您的配置文件包含Tailwind到您的CSS中生成您的CSS不依赖PostCSS使用Tailwind使用自定义CSS文件自定义您的配置为生产而构建
  • HTML+JS+CSS 鼠标上下移动页面（非滚动条） 一念工作室 htmljavascriptcss
    HTML+JS+CSS鼠标上下移动页面（非滚动条）MouseDragScroll-IE11Compatiblebody{height:2000px;/*为了方便测试滚动效果，设置一个较长的页面*//*使用自定义的鼠标指针图片，这里假设图片名为grab.cur*/cursor:url('file:///C:/grab.cur'),default;}/*定义按下鼠标左键时的鼠标指针样式*/body.d
  • 第五章：工程化实践 - 第一节 - Tailwind CSS 与前端框架的集成 qianmoQ TailwindCSS：现代化开发实战指南css前端框架前端
    TailwindCSS可以与各种现代前端框架完美配合。本节将详细介绍如何将TailwindCSS集成到React、Vue和Angular等主流框架中，并介绍相关的最佳实践。React集成基础配置#创建React项目npxcreate-react-appmy-app--templatetypescript#安装TailwindCSSnpminstall-Dtailwindcsspostcssauto
  • 第三章：css知识点总结 java_大队长 css前端
    样式选择器执行级别选择器名称执行级别效果示列使用示列行内样式第一级别我是行内样式我是行内样式ID选择器小于行内样式ID选择器样式ID选择器样式#pid{color:red;}class类名选择器小于ID选择器样式class类名选择器class类名选择器.pid{color:red;}注意：style在在富文本里不生效，需要在html页面测试效果外部样式和内部样式的执行级别在同一个html里面有一个
  • 网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了 白帽黑客坤哥 web安全安全网络安全转行python白帽黑客linux
    href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
  • Css3重点知识讲解 Warren98 css3前端css笔记学习开发语言html5
    选择器优先级：id选择器>类选择器>标签选择器类选择器：.myClass{color:blue;}id选择器（全局唯一）：#myId{color:green;}标签选择器：p{color:red;}层次选择器：/*后代选择器AB*/.nava{color:blue;}/*子选择器A>B*/.card>h2{color:red;}/*相邻兄弟选择器A+B（相邻向下）*/h1+p{font-size:
  • vue3 图片预览 v-viewer 情话丫 vue
    vue3图片预览v-viewer百度没找到方法，自己看了源码发现的//添加依赖npminstallv-viewer//在main.js中注册import'viewerjs/dist/viewer.css';//引入样式importViewerfrom'v-viewer';//引入v-viewer组件constapp=createApp(App);Viewer.install(app)//在页面中使
  • Flask应用开发综合示例——博客系统 Botiway FlaskWebpythonflask
    下面是一个与前面不同的综合示例，展示如何使用Python+Flask+HTML+CSS+JavaScript+jQuery+Bootstrap+SQLAlchemy开发一个简单的博客系统。用户可以注册、登录、发布博客、查看博客列表以及删除自己的博客。1.项目结构blog_system/│├──app.py#Flask应用主文件├──models.py#SQLAlchemy模型定义├──requir
  • 一分钟搭建 Vite + Cesium 开发环境
    ⚠2021年4月1日更新：10秒钟搭建Vite+Cesium开发环境创建目录mkdircesium-vite-testcdcesium-vite-test/创建package.jsonyarninit-y安装依赖yarnadd-Dcesiumvitevite-plugin-cesium由于Cesium不是一个普通的npm包，需要依赖一些css，图片，json啥的。我们要参考Cesium官方的web
  • 2025：前端开发真的结束了吗，还是刚刚起步？ @大迁世界
    想象一下：你花了几年时间精通JavaScript、CSS，并与后端API亲密互动。然后有一天，你在LinkedIn上看到一条帖子写道：“前端开发死了！AI和无代码工具已经接管！”你的心跳一瞬间加速。是不是该换个职业了？或许去做个咖啡师？（至少咖啡的需求永远不会消失。）别急着慌张，我们先冷静分析一下。前端开发真的结束了吗，还是它仅仅在发生变化？接下来，我们来探讨一下这个话题。AI正在取代我们的工作随
  • 钉钉小程序-三级联动选择地区组件 似月是你 前端小程序
    钉钉小程序三级联动上次发布的钉钉小程序三级联动，在真机上测试不管用，自己写了个组件1.select.axml=index}}"data-type="{{index}}"onTap="nav_typ">{{item.text}}{{item.name}}2.select.acss.scroll-item{
  • 掌握这个API，让你的网页展示效果提升10倍
    Hey,我是沉浸式趣谈本文首发于【沉浸式趣谈】，我的个人博客https://yaolifeng.com也同步更新。转载请在文章开头注明出处和版权信息。如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！如何原生实现让任意div全屏展示最近在做一个项目，需要实现点击按钮让某个div全屏展示的功能。第一反应是用CSS设置position:fixed加上宽高100%，但这样并不是真正的全屏，因为浏
  • DOCTYPE的作用 捂風鋔笶_小欣同學 前端vue.jsjavascripthtml
    在HTML中，声明（也称为文档类型声明）是一个必要的元素，它位于HTML文档的第一行，用来告知浏览器当前文档使用的HTML版本或规范。下面详细介绍它的作用：1.触发标准模式渲染现代浏览器有两种渲染模式：标准模式（也称为严格模式）和怪异模式（也称为混杂模式）。标准模式：浏览器按照HTML和CSS规范来解析和渲染页面，保证页面在不同浏览器中的显示效果尽可能一致。当文档中包含正确的声明时，浏览器会以标准
  • CSS 真的会阻塞文档解析吗？从浏览器渲染原理深入探究一下
    在网页开发领域，一个常见的疑问是CSS是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题，需要从浏览器渲染网页的原理说起。浏览器渲染网页的基本流程浏览器在接收到HTML文档后，会依次进行以下几个主要步骤：解析HTML：浏览器从网络或本地获取HTML文件，然后开始解析，将HTML代码转换为DOM（DocumentObjectModel，文档对象模型）树。DOM
  • 《VUE+Django：电商独立站打造详解》1.1 为什么需要前后端分离的架构 尘烟生活家 电商独立站打造教程架构前端uidjangovue.js
    《VUE+Django：电商独立站打造详解》引子《VUE+Django：电商独立站打造详解》专栏大纲前后端分离的开发模式是伴随着互联网软件开发的发展而形成的。早期的互联网应用页面简单、处理逻辑简单、数据处理流程简单，整体侧重于服务端（后端）功能的实现，而前端主要是按照UI设计完成HTML静态页面模板，辅助少量的CSS和JS脚本。以当时后端流行的开发语言PHP为例，通过模板引擎直接把代码嵌入到HTM
  • public or static包下的 html 丢了（404）？ 你快回来！ 我一人承受不来 barcke html前端java学习spring
    没想到吧，我把html还是放到了jar包中～环境：SpringBoot版本2.XJava版本1.8.0及以上问题：publicorstatic包下的html丢了（404）？话不多说先上图我的目录结构是这样的src└──main└──java└──com└──example└──demo└──DemoApplication.java└──resources└──public├──css│└──mai
  • Nginx：功能和工作原理详解 AnHaskell nginx运维后端开发
    Nginx是一款常用的高性能、可靠性强的开源Web服务器软件。它的名字是“EngineX”的缩写，旨在提供快速、高效的HTTP服务和反向代理功能。本文将详细介绍Nginx的功能和工作原理，并提供相应的源代码示例。一、Nginx的功能Nginx具有以下几个主要功能：静态文件服务：Nginx可以直接处理静态文件的请求，如HTML、CSS、JavaScript和图像文件等。它通过高效的文件传输机制，能够
  • 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 网安詹姆斯 web安全CTF网络安全大赛pythonlinux
    【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S
  • 第一章：认识Tailwind CSS - 第四节 - Tailwind CSS 与其他 CSS 方案的对比
    主流CSS方案概览1.传统CSS/*传统CSS*/.button{background-color:#3490dc;padding:0.5rem1rem;border-radius:0.25rem;color:white;}2.CSSModules/*Button.module.css*/.button{background-color:#3490dc;padding:0.5rem1rem;bor
  • nodejs：express + js-mdict 作为后端，vue 3 + vite 作为前端，在线查询英汉词典 belldeep nodejsweb服务nodejsexpressjs-mdictvuevite
    向doubao.com/chat/提问：node.js+js-mdict作为后端，vue3+vite作为前端，编写在线查询英汉词典后端部分（express+js-mdict）1.项目结构首先，创建一个项目目录，结构如下：cd\jsmkdirmydict-appmydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──serve
  • 利用flex来布局顶部菜单栏 学习做游戏中 css3flex
    安装vscode插件csspeek：快速定位到css定义的位置微软的livepreview替换liveserver因为这个好像不支持utf8前置css知识span标签是一个行内容器，用于标记文本的一部分，或文档的一部分。它与div非常相似，但div是块级元素，而span是行内元素。p段落标签，可设置line-height属性text-align设置块元素或者单元格框的行内内容的水平对齐。这意味着其
  • 忘掉 DeepSeek：Qwen 2.5 VL 与 Qwen Max 来了
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读Qwen系列又推出了两款令人瞩目的新模型：Qwen2.5VL和Qwen2.5Max。如果还停留在“DeepSeek是最强”那一档，就可能要重新考虑一下，因为这两款模型的实力相当惊艳。什么是Qwen2.5VL？先从Qwen2.5VL说起。它不仅能看图识物，还能理解视频、文本，具备执行电脑操作（agentic）
  • Vue 项目更新，浏览器不需强制刷新就可更新版本！ 防止缓存 AsBefore麦小兜 Vue相关前端相关vue.js缓存前端html
    ##浏览器渲染流程1.解析HTML文件，构建DOM树，同时浏览器主进程负责下载CSS文件2.CSS文件下载完成，解析CSS文件成树形的数据结构，然后结合DOM树合并成RenderObject树3.布局RenderObject树（Layout/reflow），负责RenderObject树中的元素的尺寸，位置等计算4.绘制RenderObject树（paint），绘制页面的像素信息5.浏览器主进程将
  • Antd使用日期RangePicker框，实现左侧有时间区间选择 本月、上月、过去7天、过去30天等 孜然卷k css前端
    产品要求：在原有日期框的左侧，添加本月、上月、过去7天、过去30天等选项。看Antd组件RangePicker：只存在底下的选择采用CSS去改变样式达到左侧展示的需求:global{.ant-calendar-panel{display:flex;}}效果：在详细的去控制一下元素样式属性：记得给到RangePicker的dropdownClassName属性:global{.ant-calenda
  • css设置checkbox和文字在同一水平线上 码农张3 Html+Css
    默认是不在同一水平线上需要在input上添加样式:vertical-align:middle;文字
  • 忘掉 DeepSeek：Qwen 2.5 VL 与 Qwen Max 来了
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读Qwen系列又推出了两款令人瞩目的新模型：Qwen2.5VL和Qwen2.5Max。如果还停留在“DeepSeek是最强”那一档，就可能要重新考虑一下，因为这两款模型的实力相当惊艳。什么是Qwen2.5VL？先从Qwen2.5VL说起。它不仅能看图识物，还能理解视频、文本，具备执行电脑操作（agentic）
  • CSS面试题 星仔如雨 Vue3css前端
    活动发起人@小虚竹想对你说：这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。我们诚挚邀请你参加为期14天的创作挑战赛！提醒：在发布作品前，请将不需要的内容删除。1.盒子模型CSS中的盒子模型（BoxModel）是用来描述HTML元素在
  • 什么是 QGraphicsWidget 和 QGraphicsScene ? 七贤岭双花红棍 QtCharts小课堂qt
    QGraphicsWidget和QGraphicsScene是Qt框架中用于构建复杂2D图形界面的核心类，属于GraphicsViewFramework的一部分。它们提供了强大的功能来管理、显示和交互复杂的图形元素。1.QGraphicsSceneQGraphicsScene是一个场景类，用于管理多个图形项（QGraphicsItem或其子类）。它充当了一个容器，负责管理所有图形项的布局、事件处理
  • 前端面试题（超全！） 技术猿禁 前端
    一、HTML考题（8题）1.前端页面有哪三层构成，分别是什么？作用是什么？//前端三层构成：有三层，分别是：html、css、js，那html为dom，css是样式，js是交互//浏览器进程模型：（1）浏览器是一个大进程，中包含多个进程，进程中也有很多线程。（2）那么就拿html和css来说，是靠GUI来渲染的，那么如果要避免回流重绘，需要靠GPU进程完成，这样性能会好。（3）js是靠渲染进程的渲
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他