摘要: 在使用css做一些小的动画时,有些动画我们是需要其循环播放的,而且在部分动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔,这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效,而在两个循环之间是不生效的,这时我们就需要用其他的方法来实现 阅读全文
posted @ 2016-08-10 20:07 安得浮生半日闲 阅读(8748) 评论(0) 推荐(0) 编辑
摘要: 应用css3中的transition(过渡动画)、@keyframes(关键帧动画)、transform(2D、3D转换)可以实现一些小的动画效果。 一、transition—过渡动画 <!DOCTYPE html> <html><head> <title>基本图像的放大缩小</title> <me 阅读全文
posted @ 2016-08-09 22:37 安得浮生半日闲 阅读(884) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>360°图片旋转</title> <style> .wrap { width: 200px; height: 200px; transform-style: preserve-3d; 阅读全文
posted @ 2016-08-30 20:52 安得浮生半日闲 阅读(416) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>遮罩层加登录窗</title> <style type="text/css"> #wrap{width: 60px;height: 30px; position: absolu 阅读全文
posted @ 2016-08-30 20:17 安得浮生半日闲 阅读(247) 评论(0) 推荐(0) 编辑
摘要: 一、循环 循环结构:在满足特定条件的情况下反复执行的操作。循环四要素:循环变量 ,循环条件 , 循环增量 ,循环体。 第一种:while 循环。 while (条件表达式) {循环体;}。 //第一步:定义循环变量 var count = 1; // 第二部:判断循环条件 while (count 阅读全文
posted @ 2016-08-20 21:23 安得浮生半日闲 阅读(238) 评论(0) 推荐(0) 编辑
摘要: 用js可以做许多有趣的小动画,下面是一个简易时钟的小例子,可能样式写的有点多了,下方最终效果图(作为老司机的我有点小完美的强迫症哈哈哈...) <!DOCTYPE html><html><head> <title>时钟</title> <meta charset = "utf-8"> <style 阅读全文
posted @ 2016-08-20 20:16 安得浮生半日闲 阅读(1179) 评论(1) 推荐(0) 编辑
摘要: 1、关系运算符 大于‘>’,大于等于‘>=’,小于‘<’,小于等于‘<=’,等于‘==’‘ ’,不等于‘!=’‘!==’,关系运算符的返回值为布尔类型 true 或 false。 例: var a = 5 > 3; alert(a); 5>3是正确的,所以alerta(a)为true。 var a 阅读全文
posted @ 2016-08-17 19:39 安得浮生半日闲 阅读(191) 评论(0) 推荐(0) 编辑
摘要: 1、变量的定义:var a = 20; 定义变量a并给其赋值20. 2、基本数据类型 : Number类型,表示数字,例如,1,2,3等。var number1 = 10。 string类型,表示字符串, var string1 = 'hello word'。 Boolean类型,布尔类型,用来表示 阅读全文
posted @ 2016-08-16 20:24 安得浮生半日闲 阅读(197) 评论(0) 推荐(0) 编辑
摘要: 相信每个初学html5的童鞋都或多或少的对float浮动这一属性迷茫过,下面让我来为大家列举一下关于浮动的特性。 一、浮动元素会脱离文档流 何为脱离文档流?假设我们在纸上写字,每一个字代表一个元素,我们让其中的一个字原地漂浮起来,那么我们会说这个字脱离了原先的位置,即脱离了文档。当我们给一个元素加入 阅读全文
posted @ 2016-08-10 21:12 安得浮生半日闲 阅读(227) 评论(0) 推荐(0) 编辑
摘要: 下午试着用css中的transform属性做了一个3d可旋转的正方体,把各个面放上图片的,顺便加上box-shadow,使之具有荧光的效果,加完图片后的最终效果如下图 <!DOCTYPE html><html><head> <title>3d正方体旋转</title> <style type="te 阅读全文
posted @ 2016-08-04 21:25 安得浮生半日闲 阅读(945) 评论(0) 推荐(0) 编辑