02 2017 档案

扑克牌反转
摘要：利用了2d特效 <title>扑克翻转</title> <style type="text/css"> .box{ width: 300px; height: 600px; margin: 50px auto; } .box img{ position: absolute; width: 300px 阅读全文
posted @ 2017-02-15 13:28 AdiaLike 阅读(159) 评论(0) 推荐(0)
before和after
摘要：before和after分别是向选择器之前之后插入内容，必须配合content属性使用， 我们使用before和after去设置一些样式就是content里的内容样式 <title>before和after</title> div::before{ content: '你好'; color: red 阅读全文
posted @ 2017-02-15 13:27 AdiaLike 阅读(158) 评论(0) 推荐(0)
心跳动画
摘要：这个心制作稍微有点难度，关键旋转后的对照 <style type="text/css"> .heart{ width: 200px; height: 180px; position: relative; animation: heartAnimation 2s infinite; } .heart: 阅读全文
posted @ 2017-02-15 13:26 AdiaLike 阅读(148) 评论(0) 推荐(0)
加载中动画
摘要：利用的是边框切圆 <style> .box { width: 80px; height: 60px; margin: 200px; padding: 80px 150px; position: relative; } .box div { width: 80px; height: 80px; bor 阅读全文
posted @ 2017-02-15 13:23 AdiaLike 阅读(136) 评论(0) 推荐(0)
跑步动画
摘要：需要一张如下要求的图片（背景为透明色） <title>跑步动画</title> <style type="text/css"> .box{ width: 360px; height: 360px; position: relative; margin: 100px auto; } .person{ 阅读全文
posted @ 2017-02-15 13:22 AdiaLike 阅读(344) 评论(0) 推荐(0)
关键帧动画
摘要：<style type="text/css"> .demo{ animation-name: demoAnimation; 定义关键帧动画的名称 名称为我们使用@keyframes定义的动画 animation-duration: 2s;动画持续时间 animation-delay: 2s;设置动画 阅读全文
posted @ 2017-02-15 13:20 AdiaLike 阅读(288) 评论(0) 推荐(0)
animate.css
摘要：使用首先设置一下 link 标签 方式一： 在animate网上管理geihub，将源代码下载下来，将animate.css放入目录 <link rel="stylesheet" href="animate.css"> 方式二： <link href="http://cdn.bootcss.com/ 阅读全文
posted @ 2017-02-15 13:19 AdiaLike 阅读(166) 评论(0) 推荐(0)
怪异盒子
摘要：box-sizing: content-box; 标准盒子模型， 宽高=content的宽高 box-sizing: border-box; 怪异盒子模型（IE盒子模型），宽高=border+padding+content box-sizing: padding-box; 火狐盒子，宽高=paddi 阅读全文
posted @ 2017-02-15 13:18 AdiaLike 阅读(837) 评论(0) 推荐(0)
弹性项目属性
摘要：作为一名html5初学者，觉得这样整天粘代码并不是好的学习方法，需要优化改进，从今天开始，开始总结关键字，加注释 改掉之前总是粘代码的坏习惯 给div设置弹性布局，在div中加上display：flex； 然后在子元素上总的设置属性，或者在单独的子元素上单独设置属性 .box{ display: f 阅读全文
posted @ 2017-02-15 13:15 AdiaLike 阅读(160) 评论(0) 推荐(0)
改变元素大小
摘要：<!DOCTYPE html><html><head> <title>改变元素大小</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; border: solid; resi 阅读全文
posted @ 2017-02-13 20:13 AdiaLike 阅读(272) 评论(0) 推荐(0)
css3 动画 专场曲线
摘要：<!DOCTYPE html><html><head> <title>转场曲线</title> <style type="text/css"> .content div{ width: 100px; height: 30px; margin-top: 30px; background-color: 阅读全文
posted @ 2017-02-11 13:18 AdiaLike 阅读(543) 评论(0) 推荐(0)
css3 动画
摘要：<!DOCTYPE html><html><head> <title>过渡动画</title> <style type="text/css"> div{ width: 200px; height: 300px; background-color: red; margin: 100px auto; / 阅读全文
posted @ 2017-02-11 13:16 AdiaLike 阅读(107) 评论(0) 推荐(0)
css3 景深
摘要：<!DOCTYPE html><html><head> <title>景深</title> <meta charset="utf-8"> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 100px auto; po 阅读全文
posted @ 2017-02-11 11:49 AdiaLike 阅读(3375) 评论(0) 推荐(0)
css3 3d立方体练习
摘要：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: relative; margin: 100px auto; transfo 阅读全文
posted @ 2017-02-11 11:48 AdiaLike 阅读(192) 评论(0) 推荐(0)
css3 3d转换
摘要：<!DOCTYPE html><html><head> <title>3D转换</title> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 100px auto; position: relative; /*t 阅读全文
posted @ 2017-02-11 11:46 AdiaLike 阅读(114) 评论(0) 推荐(0)
css3 2d转换
摘要：<!DOCTYPE html><html><head> <title>2D转换</title> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 100px auto; position: relative; } i 阅读全文
posted @ 2017-02-11 10:31 AdiaLike 阅读(124) 评论(0) 推荐(0)
css3固定居中
摘要：<!DOCTYPE html><html><head> <title>左右垂直居中</title> <meta charset="utf-8"> <style type="text/css">/* div{ width: 250px; height: 250px; background-color: 阅读全文
posted @ 2017-02-11 09:32 AdiaLike 阅读(422) 评论(0) 推荐(0)
css3倒影
摘要：<!DOCTYPE html><html><head> <title>倒影</title> <meta charset="utf-8"> <style type="text/css"> .first{ width: 400px; height: 200px; margin-left: 500px; 阅读全文
posted @ 2017-02-11 09:20 AdiaLike 阅读(100) 评论(0) 推荐(0)
css3径向渐变
摘要：<!DOCTYPE html><html><head> <title>径向渐变</title> <style type="text/css"> div{ width: 200px; height: 150px; } .a{ /*径向渐变的默认形状是椭圆ellipse 和线性渐变一样如果不设置第一个颜 阅读全文
posted @ 2017-02-09 20:12 AdiaLike 阅读(425) 评论(0) 推荐(0)
css3线性渐变
摘要：<!DOCTYPE html><html><head> <title>线性渐变</title> <style type="text/css"> div{ width: 150px; height: 150px; margin-top: 20px; } /*渐变分线性渐变和径向渐变 线性渐变：line 阅读全文
posted @ 2017-02-09 20:11 AdiaLike 阅读(150) 评论(0) 推荐(0)
css3文本多行省略
摘要：<!DOCTYPE html><html><head> <title>多行换行</title> <style type="text/css"> div{ /*overflow溢出元素框，发生什么 hidden内容剪裁，余下内容不可见 scroll 内容剪裁，显示滚动条 visible默认值 不会剪裁 阅读全文
posted @ 2017-02-09 20:09 AdiaLike 阅读(617) 评论(0) 推荐(0)
css3文本省略换行，添加字体
摘要：<!DOCTYPE html><html><head> <title>文本省略，添加字体</title> <meta charset="utf-8"> <style type="text/css"> div{ font-family: myFont; overflow: hidden; white- 阅读全文
posted @ 2017-02-09 20:07 AdiaLike 阅读(245) 评论(0) 推荐(0)
css3边框背景
摘要：需要一种3*3格式的小图 <!DOCTYPE html><html><head> <title>边框背景</title> <style type="text/css"> div{ width: 26px; height: 26px; margin: 50px auto; border:dashed 阅读全文
posted @ 2017-02-09 20:05 AdiaLike 阅读(145) 评论(0) 推荐(0)
css3背景多图
摘要：<!DOCTYPE html><html><head> <title>背景多图</title> <style type="text/css"> div{ height: 300px; width: 300px; border:dashed 20px; /*背景多图和写多个盒阴影的时候一样可以用逗号隔 阅读全文
posted @ 2017-02-09 19:44 AdiaLike 阅读(350) 评论(0) 推荐(0)
css3蒙版（有些浏览器不好用）
摘要：<!DOCTYPE html><html><head> <title>蒙版</title> <style type="text/css"> div{ width: 480px; height: 270px; border: solid 5px pink; background-image: url( 阅读全文
posted @ 2017-02-09 13:17 AdiaLike 阅读(844) 评论(0) 推荐(0)
css3背景定位
摘要：<!DOCTYPE html><html><head> <title>背景定位</title> <style type="text/css"> div{ width: 700px; height: 500px; margin: 50px; border:dashed 20px; padding: 5 阅读全文
posted @ 2017-02-09 13:16 AdiaLike 阅读(141) 评论(0) 推荐(0)
css3盒子阴影
摘要：昨天，没有更新，因为调换班级的原因。可能我直接把源码放上去，对于有些自学的同学看到可能并不好用，但是可能目前还没有更好的方法，我把整理过后没有注释的代码放到了我的印象笔记里面，方便复习。以后会改将方法，希望对新人有所帮助。 <!DOCTYPE html><html><head> <title>盒子阴 阅读全文
posted @ 2017-02-09 13:15 AdiaLike 阅读(370) 评论(0) 推荐(0)
媒体查询
摘要：<!DOCTYPE html><html><head> <title>媒体查询练习</title> <meta charset="utf-8"> <style type="text/css"> div{ width: 600px; height: 600px; margin-top: 10px; m 阅读全文
posted @ 2017-02-07 20:52 AdiaLike 阅读(108) 评论(0) 推荐(0)
移动端适配
摘要：刚开始，也不是很紧，想自己详细的规划一下课程，希望做这个博客能坚持能坚持，加油 <!DOCTYPE html><html><head> <title>viewport</title> <meta charset="utf-8"> <meta name="viewport" content="widt 阅读全文
posted @ 2017-02-07 20:51 AdiaLike 阅读(94) 评论(0) 推荐(0)
HTML5新特性介绍---（初试博客园）
摘要：选择从事H5这个方向，还是有很多迷茫的，很多本来还在纠结JAVA方向，后来确定从事HTML5希望能走的长远，也希望自己写的一些学习记录能给初学者一些帮助。 <!DOCTYPE html><html><head> <title>html5新特性</title> <meta charset="utf-8 阅读全文
posted @ 2017-02-07 13:27 AdiaLike 阅读(159) 评论(0) 推荐(0)