自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(8)
  • 资源 (1)
  • 收藏
  • 关注

原创 css3制作正方体

今天学习transform的时候突然奇想,想写一个正方体,然后我就跟着我的想法,写咯一个,该正方体是全部用的html5+css3实现的,只要用transform 里面的rotate(旋转)、translate(位移)等,多的就不说咯,具体的看代码, html代码如下: 1 2 3 4 5

2016-07-26 16:36:20 1305

转载 深入理解CSS过渡transition

通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识   定义   过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timi

2016-07-25 16:08:36 4704

转载 干货满满,绝不错过,DOM、BOM 操作超级集合

本章内容: 定义节点类型节点关系 选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例   定义 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。   节点

2016-07-20 16:55:21 1512 1

原创 (莲花绽放)animation

今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫,我也试着写咯一下,效果如下所示 html代码: --> css代码: body{background-color: #d4d4d4; height: 100%; overflow: hidden;} .bo

2016-07-20 16:47:11 996

原创 floor random 随机抽奖

今天我在学习javascript的random 和 floor的时候想起用这个两个来写一个简单的随机抽奖页面。 写出的效果如下所示: 点击开始抽奖的时候上面红色部分的奖品会随机变化,点击停止的时候就显示你抽中的奖品是什么,做个其实很简单的,但是首先还是要把思路理清楚,那样写起来就不觉得那么难。 1、首先要定义一个数组,里面放置奖品清单, 2、在两个按钮上设置点击事件(点击过后注意按

2016-07-19 15:21:48 859

原创 轮播图

以后我觉得那些封装轮播的大神很牛逼,所以为咯节约时间和成本,我们大多用都是别人已经封装好的,但是里面包含咯许多我们不需要的代码,这样就会产生代码冗余,所以今天我也试着自己来写一个,当我写完之后,我发觉原来轮播图也不是那么的难的,写的时候一定要先分析,然后才开始着手,这样的话思路才会清晰明了。 要点分析: 1、首先要在父容器里设置相对定位,图片的容器设置绝对定位。 2、除了第一张外的图片都隐藏

2016-07-15 10:53:26 772

原创 瀑布流布局

很早以前我就想自己学写一下瀑布流布局,可是由于懒神来找我聊天咯,所以推迟咯很久直到今天我才来写瀑布流布局。由于鄙人的js还有很大的提升空间,所以我是先看咯一下那些大神的具体讲解和分析,然后才开始着手写的,收获那是杠杠的。

2016-07-13 15:09:08 608 1

原创 html+css+js 动态时钟

今天我在学习css3的时候,无意间在一个博客好友的文章里看见咯一个纯代码写出的动态时钟,我觉得很有确,我就试着按照他的思路分析自己写咯一个, 不过我写的和他写的还是有区别的,他的好些元素是用js创建的,而我的是直接在html代码里面添加的,练习的过程中,我把以前我不懂怎样使用原型平均分裂div学习到咯,代码如下:  var radius = 180;//大圆半价     var

2016-07-13 11:11:15 18880 2

html+css+js clock钟表

动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class

2016-07-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除