css3 3d旋转动画

 
  
 
  


 
  
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css3  3d动画  keyframes</title>

</head>



<body>





<style>/*************** ANIMATIONS ***************/

		@-webkit-keyframes spin {

			from { -webkit-transform: rotateY(0); }

			to { -webkit-transform: rotateY(360deg); }

		}



		@-ms-keyframes spin {

			from { ms-transform: rotateY(0); }

			to { ms-transform: rotateY(360deg); }

		}



		@keyframes spin {

			from { transform: rotateY(0); }

			to { transform: rotateY(360deg); }

		}



		@-webkit-keyframes spin-vertical {

			from { -webkit-transform: rotateX(0); }

			to { -webkit-transform: rotateX(-360deg); }

		}



		@-ms-keyframes spin-vertical {

			from { ms-transform: rotateX(0); }

			to { ms-transform: rotateX(-360deg); }

		}



		@keyframes spin-vertical {

			from { transform: rotateX(0); }

			to { transform: rotateX(-360deg); }

		}



		

		/*************** STANDARD CUBE ***************/

		.cube-wrap {

			-webkit-perspective: 800px;

			-webkit-perspective-origin: 50% 100px;



			-moz-perspective: 800px;

			-moz-perspective-origin: 50% 100px;



			-ms-perspective: 800px;

			-ms-perspective-origin: 50% 100px;



			perspective: 800px;

			perspective-origin: 50% 100px;

		}



		.cube {

			position: relative;

			width: 200px;

			margin: 0 auto;

			

			-webkit-transform-style: preserve-3d;

			-webkit-animation: spin 5s infinite linear;

			

			-moz-transform-style: preserve-3d;

			-moz-animation: spin 5s infinite linear;



			-ms-transform-style: preserve-3d;

			-ms-animation: spin 5s infinite linear;



			transform-style: preserve-3d;

			animation: spin 5s infinite linear;

		}



		.cube div {

			position: absolute;

			width: 200px;

			height: 200px;

			background: rgba(255,255,255,0.1);

			box-shadow: inset 0 0 30px rgba(125,125,125,0.8);

			font-size: 20px;

			text-align: center;

			line-height: 200px;

			color: rgba(0,0,0,0.5);

			font-family: sans-serif;

			text-transform: uppercase;

		}



		/*************** DEPTH CUBE ***************/

		.depth div.back-pane {

			-webkit-transform: translateZ(-100px) rotateY(180deg);

			-moz-transform: translateZ(-100px) rotateY(180deg);

			-ms-transform: translateZ(-100px) rotateY(180deg);



			transform: translateZ(-100px) rotateY(180deg);

		}

		.depth div.right-pane {

			-webkit-transform:rotateY(-270deg) translateX(100px);

			-webkit-transform-origin: top right;



			-moz-transform:rotateY(-270deg) translateX(100px);

			-moz-transform-origin: top right;



			-ms-transform:rotateY(-270deg) translateX(100px);

			-ms-transform-origin: top right;



			transform:rotateY(-270deg) translateX(100px);

			transform-origin: top right;

		}

		.depth div.left-pane {

			-webkit-transform:rotateY(270deg) translateX(-100px);

			-webkit-transform-origin: center left;



			-moz-transform:rotateY(270deg) translateX(-100px);

			-moz-transform-origin: center left;



			-ms-transform:rotateY(270deg) translateX(-100px);

			-ms-transform-origin: center left;



			transform:rotateY(270deg) translateX(-100px);

			transform-origin: center left;

		}

		.depth div.top-pane {

			-webkit-transform:rotateX(-90deg) translateY(-100px);

			-webkit-transform-origin: top center;



			-moz-transform:rotateX(-90deg) translateY(-100px);

			-moz-transform-origin: top center;



			-ms-transform:rotateX(-90deg) translateY(-100px);

			-ms-transform-origin: top center;



			transform:rotateX(-90deg) translateY(-100px);

			transform-origin: top center;

		}

		.depth div.bottom-pane {

			-webkit-transform:rotateX(90deg) translateY(100px);

			-webkit-transform-origin: bottom center;



			-moz-transform:rotateX(90deg) translateY(100px);

			-moz-transform-origin: bottom center;



			-ms-transform:rotateX(90deg) translateY(100px);

			-ms-transform-origin: bottom center;



			transform:rotateX(90deg) translateY(100px);

			transform-origin: bottom center;

		}

		.depth div.front-pane {

			-webkit-transform: translateZ(100px);

			-moz-transform: translateZ(100px);

			-ms-transform: translateZ(100px);



			transform: translateZ(100px);

		}





		/*************** VERTICAL SPINNING CUBE ***************/

		.cube-wrap.vertical .cube {

			-webkit-transform-origin: 0 100px;

			-moz-transform-origin: 0 100px;

			-ms-transform-origin: 0 100px;

			transform-origin: 0 100px;



			-webkit-animation: spin-vertical 5s infinite linear;

			-moz-animation: spin-vertical 5s infinite linear;

			-ms-animation: spin-vertical 5s infinite linear;

			animation: spin-vertical 5s infinite linear;

		}



		.cube-wrap.vertical .depth div.top-pane {

			-webkit-transform:rotateX(-270deg) translateY(-100px);

			-moz-transform:rotateX(-270deg) translateY(-100px);

			-ms-transform:rotateX(-270deg) translateY(-100px);



			transform:rotateX(-270deg) translateY(-100px);

		}



		.cube-wrap.vertical .depth div.back-pane {

			-webkit-transform: translateZ(-100px) rotateX(180deg);

			-moz-transform: translateZ(-100px) rotateX(180deg);

			-ms-transform: translateZ(-100px) rotateX(180deg);



			transform: translateZ(-100px) rotateX(180deg);

		}



		.cube-wrap.vertical .depth div.bottom-pane {

			-webkit-transform: rotateX(-90deg) translateY(100px);

			-moz-transform: rotateX(-90deg) translateY(100px);

			-ms-transform: rotateX(-90deg) translateY(100px);

			transform: rotateX(-90deg) translateY(100px);

		}



		/*************** FLAT SPINNING CUBE ***************/

		.cube-wrap.flat {

			-webkit-perspective: none;

			-webkit-perspective-origin: 0 0;



			-moz-perspective: none;

			-moz-perspective-origin: 0 0;



			-ms-perspective: none;

			-ms-perspective-origin: 0 0;



			perspective: none;

			perspective-origin: 0 0;

		}</style>

        

       <div style="height: 300px; margin-top: 45px; float:left; width:400px;">

        <div class="cube-wrap">

        <div class="cube depth">

        <div class="front-pane">前</div>

        <div class="back-pane">后</div>

        <div class="top-pane">上</div>

        <div class="bottom-pane">bottom</div>

        <div class="left-pane">左</div>

        <div class="right-pane">右</div>

        </div>

       </div>

    </div>



    

    

    

    <div style="height: 300px; margin-top: 60px;float:left;width:400px;">

      <div class="cube-wrap vertical">

      <div class="cube depth">

      <div class="front-pane">前</div>

      <div class="back-pane">后</div>

      <div class="top-pane">上</div>

      <div class="bottom-pane">bottom</div>

      <div class="left-pane">左</div>

      <div class="right-pane">右</div>

      </div>

      </div>

</div>







<div style="height: 300px; margin-top: 60px;float:left;width:400px;">

      <div class="cube-wrap flat">

      <div class="cube depth">

      <div class="front-pane">前</div>

      <div class="back-pane">后</div>

      <div class="top-pane">上</div>

      <div class="bottom-pane">bottom</div>

      <div class="left-pane">左</div>

      <div class="right-pane">右</div>

      </div>

      </div>

</div>



</body>

</html>




                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(css3)

        

            

                
    
                    
  • 前端面试题
                        大大。
前端vue.jsjavascript
                        
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
    
                    
    • 
                    
  • 揭秘前端 CSS3 字体特效的实现方法
                        

                        
    #揭秘前端CSS3字体特效的实现方法>关键词：CSS3、字体特效、text-shadow、@font-face、font-feature-settings、动画效果、Web字体>摘要：本文通过生活化的比喻和实战案例，深入解析CSS3实现字体特效的核心技术。从基础文字阴影到高级字体动画，揭秘7种酷炫效果实现原理，并提供可直接复用的代码模板。##背景介绍###目的和范围本文系统讲解CSS3实现字体特效
    
                    
    • 
                    
  • CSS3文本阴影特效全攻略
                        

                        
    CSS3文本阴影效果实现下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。设计思路创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果实现代码CSS3文本阴影效果大全*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'OpenSans',sa
    
                    
    • 
                    
  • 伪类选择器:root的妙用
                        weixin_33921089
javascriptViewUI
                        
    css3的元素旋转功能非常强大，也非常吸引人，但是很多时候因为浏览器使用率的问题，我们必需要想办法兼容一些低版本的浏览器，特别是ie这朵奇葩。想要实现元素旋转本来很简单的一个属性就能实现，那就是transform:rotate(xxdeg)。举个例子：实现一个层旋转270deg。#demo{width:300px;height:200px;background-color:#FF80C0;marg
    
                    
    • 
                    
  • 【CSS3】 结构性伪类选择器—root
                        badlyForPapers

                        
    :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。示例演示：通过“:root”选择器设置背景颜色HTML代码：:root选择器的演示CSS代码：:root{background:orange;}演示结果：“:root”选择器等同于元素，简单点说：:root{background:orange}html{backgro
    
                    
    • 
                    
  • 前端动画实现：CSS3 动画与 JavaScript 动画对比
                        大力出奇迹985
前端css3javascript
                        
    一、引言：动画世界的双剑客在网页的奇妙世界里，动画就像是灵动的精灵，赋予页面生机与活力。CSS3动画和JavaScript动画，宛如两位得力的剑客，各自挥舞着独特的招式，为开发者实现绚丽动画效果提供了强大的武器。CSS3动画简洁优雅，能轻松实现一些基础且流畅的动画；而JavaScript动画则以其强大的控制能力和灵活性，在复杂动画的舞台上大放异彩。接下来，让我们走进它们的世界，一探究竟。二、语法与
    
                    
    • 
                    
  • 通过Deepseek找工作
                        速易达网络
人工智能
                        
    推送的结果如下，对应的AI提示词在底部：计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向：8+个技术领域薪资范围：¥10K-¥40K/月工作模式：100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程
    
                    
    • 
                    
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果
                        申增浩

                        
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
    
                    
    • 
                    
  • 06.CSS3布局
                        Ching_Lee

                        
    1.弹性盒模型flexbox1）弹性容器属性flexcontainerflex-directionflex-wrap复合属性flex-flowjustify-contentalign-itemsalign-content2）弹性子元素属性flexitem3）Flexbox菜单项目实战宽度大于768px宽度大于480px小于768px宽度小于480px弹性响应式布局实现菜单栏.menu{list-s
    
                    
    • 
                    
  • css3地球转动模型（动态数据）
                        

                        
    参考资源：https://www.jq22.com/jquery-info24302{{!item.permission?'暂无权限':''}}{{item.name}}exportdefault{data(){return{list:[{id:"81e5f51d6ab845fca406bdc8b0c50e34",homeUrl:"/workbenches",name:'交易管理后台',img:'
    
                    
    • 
                    
  • HTML5+CSS3小实例：流星划过天际的动画效果
                        艾恩小灰灰

                        
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
    
                    
    • 
                    
  • css mix-blend,详解CSS3的mix-blend-mode属性
                        weixin_39630813
cssmix-blend
                        
    1、相当于加了一个图层mix-blend-mode:multiply;2、相当于加了一个滤镜mix-blend-mode:screen;3、相当于加了一个图层和滤镜mix-blend-mode:overlay;4、会使图片变暗，出现变暗效果mix-blend-mode:darken;5、这个模式与darken相反，*它的效果取决于源和背景颜色之间更浅的(色彩)。*即将两像素的RGB值进行比较后，取
    
                    
    • 
                    
  • 2019-05-16
                        海牙kyogre

                        
    前端优化动画性能之requestAnimationFrame@(技术分享)在前端做动画很多人第一人的反应是用定时器，比如setInterval、setTimeout，除此之外css3可以使用transition和animation来实现。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有
    
                    
    • 
                    
  • 2014年最具人气国外WORDPRESS主题
                        weixin_34355715
php前端uxViewUI
                        
    在国外，WrodPress这个博客系统极为受欢迎，使用WordPress来建站可以降低很多成本，另外还能以十分便宜的价格获得一个漂亮的WP网站模板。今天向大家分享来自Themeforest2014年最具人气的高级WrodPress主题，这些主题无论是设计还是技术上，都是目前最新最流行的。比如CSS3、扁平化、响应式设计、全屏视频背景、视差滚动特效等等。本次分享的WP主题实用性非常不错，流行的设计+
    
                    
    • 
                    
  • OracleERP云软件二次开发：业务流程管理与自定义教程
                        kkchenjj
工业软件二次开发全集工业软件ERP数据库开发语言
                        
    OracleERP云软件二次开发：业务流程管理与自定义教程OracleERP云平台概览OracleERP云平台架构OracleERPCloud采用了一种多层架构设计，旨在提供高度可扩展、安全且灵活的云解决方案。其架构主要分为以下几个层次：用户界面层：提供直观的用户界面，支持多种设备访问，包括桌面、平板和手机。这一层利用了现代Web技术，如HTML5、CSS3和JavaScript，确保了良好的用户
    
                    
    • 
                    
  • html5及css有什么区别,html5和css3的区别是什么？
                        weixin_39788256
html5及css有什么区别
                        
    html5和css3是什么？区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是HTML5？HTML，超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本，是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义
    
                    
    • 
                    
  • JS获取 CSS 中定义var变量值
                        前端 贾公子
tensorflow人工智能python
                        
    目录示例代码CSS3:root选择器CSSStyleDeclarationgetPropertyValue()方法styleSheetscssRules关键特性使用示例注意事项典型应用场景WindowgetComputedStyle()方法WindowgetComputedStyle()方法和style的异同在JavaScript中，可以通过getComputedStyle()方法结合getPro
    
                    
    • 
                    
  • 第二篇 html5和css3开发基础与应用
                        ᝰ落念英
html5css3前端开发语言webhtmlcss
                        
    第一章html5开发基础与应用第一节简介2014年10月28日，W3C组织公开发布HTML5标准规范。官方文档地址为：https://www.w3.org/TR/2014/REC-html5-20141028/HTML5.1文档地址：https://www.w3.org/TR/2015/WD-html51-20151008/HTML5.2文档地址：https://www.w3.org/TR/201
    
                    
    • 
                    
  • Vue.js 过渡 & 动画
                        lsx202406
开发语言
                        
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
    
                    
    • 
                    
  • CSS和CSS3区别对比
                        

                        
    CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：一、核心概念与版本关系CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如F
    
                    
    • 
                    
  • js实现百度地图的自定义marker与css3动画的交互
                        沈大大520
css3动画扩展自定义百度地图makerjscss3javascript前端html5
                        
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
    
                    
    • 
                    
  • 原生cesium 实现 多图例展示+点聚合(base64图标)
                        

                        
    个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、CSDN优质创作者作者：柳晓黑胡椒❣️专栏：cesium实践(原生)若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力需求背景解决思路解决效果index.vue需求背景1.需要展示多个站点图例的图表及闪烁效果2.需要考虑层级高时，多图例的点聚合效果，且点聚合显示需要采用设计的圆形图标解决思路闪烁效果：采用css3的anim
    
                    
    • 
                    
  • CSS3 文本效果详解
                        lly202406
开发语言
                        
    CSS3文本效果详解引言随着Web技术的发展，CSS3为前端设计师和开发者提供了丰富的文本效果选项。这些效果不仅能够增强网页的美观性，还能提升用户体验。本文将详细介绍CSS3中的文本效果，包括文本阴影、文本描边、文本装饰、文本换行、文本大小写等，并探讨如何在实际项目中应用这些效果。文本阴影文本阴影是CSS3中最常见的文本效果之一。它可以为文本添加阴影，使其更加立体，提升视觉效果。基本语法text-
    
                    
    • 
                    
  • html怎么设置好看的文本框,html页面输入框input的美化
                        PassatCC
html怎么设置好看的文本框
                        
    input输入框是网页必不可少的组件，可是每个浏览器对于输入框的显示样式各有不同例如：上图分别就是谷歌浏览器和IE浏览器自带显示的输入框，样式也不足人意，所以大多都会自己写样式以下是一个简单的文本框样式input{border:1pxsolid#ccc;padding:7px0px;border-radius:3px;/*css3属性IE不支持*/padding-left:5px;}效果图：样式属
    
                    
    • 
                    
  • html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
                        weixin_39886205
html读取媒体长度
                        
    显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在CSS文件中根据屏幕分辨率大小定义网页宽度。以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题
    
                    
    • 
                    
  • CSS3盒子模型
                        

                        
    div:nth-child(1){/*传统盒子模型=width+border+padding*/width:200px;height:200px;background-color:pink;padding:10px;border:10pxsolidred;box-sizing:content-box;}div:nth-child(2){/*有了这句话就让盒子变成CSS3盒子模型*//*paddin
    
                    
    • 
                    
  • css滑块开关的使用,CSS3制作滑块按钮
                        

                        
    滑块按钮-渣图.gif查看demo结构先整理一下，这个按钮的层。分层.gif样式body{background:#eee;}/*--用绝对定位让整个按钮在页面垂直居中--*/.toggle-wrapper{position:absolute;;left:50%;top:50%;overflow:hidden;margin-left:-60px;／*--按钮向左移动一半的宽度--*／margin-t
    
                    
    • 
                    
  • css3:css的3种引入方式
                        ksw000
csscss3html
                        
    css基本知识你好！这是你第一次使用css所需要了解的知识点。如果你想学习如何使用css,可以仔细阅读这篇文章，了解一下css的基本语法知识。CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：style属性的应用直接在HTML标签中设置的样式实际在写页面时不提倡使用，在测试的时候可以使用。行内样式LeapingAboveTheWater
    
                    
    • 
                    
  • CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解
                        1加1等于
javascript实战javascript前端css3
                        
    本文详细介绍了日常中常用的几种选择器，包括属性选择器、伪类选择器、伪元素选择器、组合选择器等等本文目录1.属性选择器2.伪类选择器3.伪元素选择器4.组合选择器1.属性选择器属性选择器允许根据元素的属性及其值来选择元素。常见的属性选择器有以下几种形式：[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性值精确等于指定值的元素。[attribute^=valu
    
                    
    • 
                    
  • 大数据项目-Django基于大数据技术实现的农产品销售系统
                        IT实战课堂-玲琳娜
计算机毕业设计大数据javaspark爬虫
                        
    《[含文档+PPT+源码等]Django基于大数据技术实现的农产品销售系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！数据库管理工具：phpstudy/Navicat或者phpstudy/sqlyog后台管理系统涉及技术：后台使用框架：Django前端使用技术：Vue,HTML5,CSS3、JavaScrip
    
                    
    • 
                                
  • github中多个平台共存
                                    jackyrong
github
                                    
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 
ssh链接一个托管的而已，下面讲解如何放两个文件 
 
 
1） 设置用户名和邮件地址 
 
$ git config --global user.name "xx" 
 
$ git config --global user.email "[email protected]"
    
                                
    • 
                                
  • ip地址与整数的相互转换(javascript)
                                    alxw4616
JavaScript
                                    
    //IP转成整型
function ip2int(ip){
    var num = 0;
    ip = ip.split(".");
    num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
    n
    
                                
    • 
                                
  • 读书笔记-jquey+数据库+css
                                    chengxuyuancsdn
htmljqueryoracle
                                    
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 
2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
    
                                
    • 
                                
  • javaSE javaEE javaME == API下载
                                    Array_06
java
                                    
    oracle下载各种API文档： 
http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html 
 
JavaSE文档： 
http://docs.oracle.com/javase/8/docs/api/ 
JavaEE文档： 
ht
    
                                
    • 
                                
  • shiro入门学习
                                    cugfy
javaWeb框架
                                    
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 
首先配置我们的web.xml代码如下，固定格式，记死就成 
 <filter> 
        <filter-name>shiroFilter</filter-name> 
&nbs
    
                                
    • 
                                
  • Array添加删除方法
                                    357029540
js
                                    
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 
 
//给数组添加删除 
            Array.prototype.del = function(n){ 

    
                                
    • 
                                
  • navigation bar 更改颜色
                                    张亚雄
IO
                                    
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。 
      翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下 
   
    
                                
    • 
                                
  • unicode转换成中文
                                    adminjun
unicode编码转换
                                    
      
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 
	/**
	 * unicode 转换成 中文
	
    
                                
    • 
                                
  • 一站式 Java Web 框架 firefly
                                    aijuans
Java Web
                                    
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 
firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 
更新日志： 
 
 增加自定义系统错误页面功能
    
                                
    • 
                                
  • 设计模式——单例模式
                                    ayaoxinchao
设计模式
                                    
    定义 
  
       Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 
  
分析 
  
       从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 
  &nb
    
                                
    • 
                                
  • Javascript 多浏览器兼容性问题及解决方案
                                    BigBird2012
JavaScript
                                    
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 
一、document.formName.item(”itemName”) 问题  
问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
    
                                
    • 
                                
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误
                                    bijian1013
junit4.11单元测试
                                    
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现： 
   
    
                                
    • 
                                
  • [Zookeeper学习笔记之二]Zookeeper部署脚本
                                    bit1129
zookeeper
                                    
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： 
  
#!/bin/bash  
  
#!!!Change the name!!!  
#The zookeepe
    
                                
    • 
                                
  • 【Spark八十】Spark RDD API二
                                    bit1129
spark
                                    
    coGroup 
package spark.examples.rddapi

import org.apache.spark.{SparkConf, SparkContext}
import org.apache.spark.SparkContext._

object CoGroupTest_05 {
  def main(args: Array[String]) {
    v
    
                                
    • 
                                
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题
                                    ronin47
modules
                                    
    在modules目录中只有httpd.exp，那些so文件呢？ 
 
我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 
去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
    
                                
    • 
                                
  • Java基础-克隆
                                    BrokenDreams
java基础
                                    
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 
克隆。 
        Java提供了java.lang.
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 
package design.pattern;

/*
 * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致
 * 可以这样想，我们要写这样一个类（Adapter）:
 * 1.这个类要符合客户的要求 ---> 那显然要
    
                                
    • 
                                
  • HDR图像PS教程集锦&心得
                                    cherishLC
PS
                                    
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 
软件有photomatix和nik hdr efex。 
 一、教程 
叶明在知乎上的回答： 
http://www.zhihu.com/question/27418267/answer/37317792 
大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 
 
 二、心得 
 1、去除阴影部分的
    
                                
    • 
                                
  • maven-3.3.3 mvn archetype 列表
                                    crabdave
ArcheType
                                    
    maven-3.3.3 mvn archetype 列表 
可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml 
  
[INFO] Scanning for projects... 
[INFO]                 
    
                                
    • 
                                
  • linux shell 中文件编码查看及转换方法
                                    daizj
shell中文乱码vim文件编码
                                    
    一、查看文件编码。 
    在打开文件的时候输入:set fileencoding 
    即可显示文件编码格式。 
 
 
 
二、文件编码转换 
    1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 
      &
    
                                
    • 
                                
  • MySQL--binlog日志恢复数据
                                    dcj3sjt126com
binlog
                                    
       恢复数据的重要命令如下   mysql> flush logs;  默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                    
    
                                
    • 
                                
  • 数据库中数据表数据迁移方法
                                    dcj3sjt126com
sql
                                    
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用 
  
下面看看如何使用 
  
语法：MySQL中INSERT INTO SELECT的使用 
1. 语法介绍 
      有三张表a、b、c，现在需要从表b
    
                                
    • 
                                
  • Java反转字符串
                                    dyy_gusi
java反转字符串
                                    
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 
1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
    
                                
    • 
                                
  • UI设计中我们为什么需要设计动效
                                    gcq511120594
UIlinux
                                    
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 
 
但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 
 
一、加强体验舒适度 
 
嗯，就是让用户更加爽更加爽的用
    
                                
    • 
                                
  • JBOSS服务部署端口冲突问题
                                    HogwartsRow
java应用服务器jbossserverEJB3
                                    
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 
  
1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 
  
2、./server/default/deploy/jbossweb.sar/server.xml 
  
3、.
    
                                
    • 
                                
  • 第三章 Redis/SSDB+Twemproxy安装与使用
                                    jinnianshilongnian
ssdbreidstwemproxy
                                    
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
    
                                
    • 
                                
  • ZooKeeper原理及使用 
                                    liyonghui160com

                                    
      
  
       ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
    
                                
    • 
                                
  • 程序员解决问题的60个策略
                                    pda158
框架工作单元测试
                                    
    根本的指导方针 
1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 
 
  良好的单元测试  
  强制数据库约束  
  使用输入验证框架  
  避免未实现的“else”条件  
  在应用到主程序之前知道如何在孤立的情况下使用  
 
  
日志 
2. print 语句。往往额外输出个一两行将有助于隔离问题。 
3. 切换至详细的日志记录。详细的日
    
                                
    • 
                                
  • Create the Google Play Account
                                    sillycat
Google
                                    
    Create the Google Play Account 
 
Having a Google account, pay 25$, then you get your google developer account. 
 
References: 
http://developer.android.com/distribute/googleplay/start.html 
https://p
    
                                
    • 
                                
  • JSP三大指令
                                    vikingwei
jsp
                                    
    JSP三大指令 
  一个jsp页面中，可以有0~N个指令的定义！ 
1. page --> 最复杂：<%@page language="java" info="xxx"...%> 
  * pageEncoding和contentType： 
    > pageEncoding：它
    
                                
    • 
                

            

        

    




    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他