随笔分类 -  CSS3

高性能 CSS3 动画
摘要：高性能 CSS3 动画 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画 阅读全文
posted @ 2017-02-20 17:35 不得不爱xxy 阅读(296) 评论(0) 推荐(1)
getComputedStyle 方法
摘要：一：getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 语法如下： var style = window.getComputedStyl 阅读全文
posted @ 2017-01-03 11:58 不得不爱xxy 阅读(750) 评论(0) 推荐(1)
css3 tween
摘要：/* * Tween.js * t: current time（当前时间） * b: beginning value（初始值） * c: change in value（变化量） * d: duration（持续时间） */ var Tween = { Linear: function(t, b, 阅读全文
posted @ 2016-01-27 20:36 不得不爱xxy 阅读(299) 评论(0) 推荐(0)
字体大小自适应纯css解决方案
摘要：viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vma... 阅读全文
posted @ 2015-11-17 18:53 不得不爱xxy 阅读(576) 评论(0) 推荐(0)
CSS3的rem设置字体大小
摘要：在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，... 阅读全文
posted @ 2015-11-17 14:03 不得不爱xxy 阅读(241) 评论(0) 推荐(0)
酷炫的响应式导航栏
摘要：一直想做一个纯css的导航栏，今天终于在百忙的工作中抽出一点时间来写了一下。唉,,.......都是泪啊....不说了，看下效果吧：看着很炫酷哦，哈哈哈，接下来一步一步来实现它吧。。要有耐心哦。看下dom元素怎么排列的，就是最普通的（）：header.html： 1 2 3 4 5 ... 阅读全文
posted @ 2015-09-09 14:56 不得不爱xxy 阅读(4813) 评论(11) 推荐(8)
CSS3鼠标悬停图片动画
摘要：鼠标放到图片上后：demo地址：demodiv： 1 2 3 4 5 6 7 8 9 ... 阅读全文
posted @ 2015-08-30 19:54 不得不爱xxy 阅读(962) 评论(0) 推荐(0)
Css3 提示框
摘要：xxy is a so cool boycss: 1 div{ 2 width: 200px; 3 height: 100px; 4 margin-top: 100px; 5 text-a... 阅读全文
posted @ 2015-08-30 13:41 不得不爱xxy 阅读(381) 评论(0) 推荐(0)
css3易混淆属性详解
摘要：1.background, background-color, color（1）background：在一个声明中设置所有属性： 如：background: #00FF00 url(bgimage.gif) no-repeat fixed top; 可用的属性有： ①background-c... 阅读全文
posted @ 2015-08-20 10:57 不得不爱xxy 阅读(201) 评论(0) 推荐(0)
position之absolute与relative 详解
摘要：absolute：绝对定位；relative：相对定位；唉，以前只是知是知道这两个单词的汉语意思，然后呢，，，怎么用。。。也是摸凌两可的用。终于抽出时间来看看了：1.绝对定位：absulute Absolute ----position:absolute： 表示绝对定位，位置将依据浏览器左上角开始... 阅读全文
posted @ 2015-08-11 10:11 不得不爱xxy 阅读(841) 评论(0) 推荐(0)
CSS里的pointer-events属性
摘要：现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示... 阅读全文
posted @ 2015-08-10 13:43 不得不爱xxy 阅读(350) 评论(0) 推荐(0)
CSS3 calc()的使用
摘要：前言： 平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你... 阅读全文
posted @ 2015-07-26 14:30 不得不爱xxy 阅读(386) 评论(0) 推荐(0)
CSS3 box-sizing属性
摘要：box-sizing,明知故问，看英语，“盒类型”。我去，好吧。就是你想怎么弄这个盒模型。来吧，看看有什么属性值可用： box-sizing: content-box|border-box|inherit;嗯，三个。不错（1）content-box:宽度和高度分别应用到元素的内容框。在宽度和高... 阅读全文
posted @ 2015-07-26 00:04 不得不爱xxy 阅读(168) 评论(0) 推荐(0)
css样式—字体垂直、水平居中
摘要：“来，老板娘，给个div瞅瞅”：“好的，宇哥，来了了了”：啦啦啦“给各样啊，我去”：“是”：.tt{ padding: 0px; width:500px; height:200px; text-align:cen... 阅读全文
posted @ 2015-07-21 19:15 不得不爱xxy 阅读(32178) 评论(0) 推荐(1)
CSS3详解：background
摘要：CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。1、多个背景图片在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上... 阅读全文
posted @ 2015-07-21 14:19 不得不爱xxy 阅读(248) 评论(0) 推荐(0)
CSS3_loading效果
摘要：写个div给他个基本样式：1 2 3 loading..4 5 1 效果图： 阅读全文
posted @ 2015-07-21 14:14 不得不爱xxy 阅读(185) 评论(0) 推荐(0)
CSS3_实现圆角效果box-shadow
摘要：1.outline的直角与圆角来给个div：来再给个样式： 1 .use-outline{ 2 3 width: 200px; 4 height: 200px; 5 background: #009dda... 阅读全文
posted @ 2015-07-21 11:36 不得不爱xxy 阅读(3084) 评论(0) 推荐(0)