摘要: will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。 举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页 阅读全文
posted @ 2018-08-03 15:21 狗尾草的博客 阅读(481) 评论(0) 推荐(1) 编辑
摘要: CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。 /* Keyword values */touch-action: auto;touch-action: none;touch-action: pan-x;touch 阅读全文
posted @ 2018-08-03 15:19 狗尾草的博客 阅读(964) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函数_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="J 阅读全文
posted @ 2018-08-03 15:18 狗尾草的博客 阅读(245) 评论(0) 推荐(0) 编辑
摘要: 根据MDN上的解释如下: CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时,SVG内容表现如同visiblePainted。 除了指定元素不成为鼠标事件的目标,none值还指示鼠标事件穿过该元素,并指向位于元素下面的元素 语法: po 阅读全文
posted @ 2018-08-03 15:18 狗尾草的博客 阅读(1727) 评论(0) 推荐(0) 编辑
摘要: :placeholder-shown 另外,划重点,这个伪类是仍处于实验室的方案。也就是未纳入标准,当然我们的目的是探寻有意思的 CSS 。 当 input 类型标签使用了 placeholder 属性有了默认占位的文字,会触发此伪类样式。 配合:not()伪类,可以再改变当默认文字消失后的样式,再 阅读全文
posted @ 2018-08-03 15:17 狗尾草的博客 阅读(631) 评论(0) 推荐(1) 编辑
摘要: :target 伪类选择器 :target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。 解释很难理解,看看 阅读全文
posted @ 2018-08-03 15:15 狗尾草的博客 阅读(3232) 评论(0) 推荐(1) 编辑
摘要: 1.盒子边框的线条动画: <div class="cont"> <div class="bb"></div> </div> .bb{ position: relative; width: 200px; height: 200px; background: #666666; border: 1px s 阅读全文
posted @ 2018-08-03 15:11 狗尾草的博客 阅读(621) 评论(0) 推荐(0) 编辑