• 没学过线代也能读懂的CSS3 matrix

    Posted by : lon.y@qq.com on 2018年5月30日

    前言 CSS3 中使用 transform 可以对元素进行变换。其中包含:位移、旋转、偏移、缩放。 transform 可以使用 translate/rotate/skew/scale 的方式来控制元素变换,也可以使用 matrix 的方式来控制元素变换。 比如: 通过transform属性进行变换。 首先演示使用 translate/rotate/skew/scale 的方式: .box { width: 100px; height: 100px; ba

    阅读全文...

  • CSS 深入理解之 float 浮动

    Posted by : lon.y@qq.com on 2018年5月26日

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。 1. float介绍 CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮

    阅读全文...

  • CSS深入理解之relative定位

    Posted by : lon.y@qq.com on 2018年5月26日

    1.前言 在前面的两篇文章:CSS深入理解之float浮动和CSS深入理解之absolute定位中,介绍了float和absolute的特性和使用方法,如果大家仔细阅读完了这两篇文章,相信你的CSS打怪技能又提高的一大截,那么趁着自己最近状态不错,就多给大家分享点自己平时所学的技能。一方面对自己的技能能够有一个总结,看自己到底理解透了没有,另一方面,以文章的形式分享出来,悦己同时悦他人。好了,开始进入今天的主题,今天轮到另一个定位属性登场了——relati

    阅读全文...

  • CSS深入理解之absolute定位

    Posted by : lon.y@qq.com on 2018年5月26日

    1. 写在前面 本篇将要介绍的绝对定位absolute属性和此前介绍的CSS系列——CSS深入理解之float浮动有着几分的相似性,可以认为两者是兄弟关系,都具有“包裹性”、“高度塌陷”、“块状化”的特性,它们在很多场合都可以互相替代。很多人可能有这样的疑问:一个属性名是“position”,一个属性名是“float”,从名字看起来,它们八竿子都打不着啊,怎么还是兄弟关系呢?要说position: absolute和position: relative是兄

    阅读全文...

  • css3D 的魅力

    Posted by : lon.y@qq.com on 2018年5月24日

    前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。  在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-origin,transform, perspective。 demo1 高度可变的立方体,先来看看最终效果,自己弄得有点丑,如果设计师调下色,添加点元素应该会好看的多 1.  我们先用css实现一个长方体,一个长方体有6个边,我们写6个div,并用一个div包裹

    阅读全文...

  • Vertical-Align,你应该知道的一切

    Posted by : lon.y@qq.com on 2018年5月24日

    好,我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上,verticle-algin可以在不同上下文中灵活地对齐元素,以及进行细粒度的控制,不必知道元素的大小。元素仍然在文档流中,因而其他元素可以根据它们大小的变化进行相应的调整。一个有用的例子就是居中图标与旁边的文本。 Vertical-Align是个怪物 可是,vertical-align有时候也很难搞,经常导致困惑。好像有什么神秘的规则在起作用。比如,我们改变了

    阅读全文...

  • 滑向未来(现代 JavaScript 与 CSS 滚动实现指南)

    Posted by : lon.y@qq.com on 2018年5月15日

    一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱。我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时,)将使你的页面滚动更平滑、美观且性能更好。 大多数的网页的内容都无法在一屏内全部展现,因而(页面)滚动对于用户而言是必不可少的。对于前端工程师与 UX 设计师而言,跨浏览器提供良好的滚动体验,同时符合设计(要求),无疑是一个挑战。尽管 web 标准的发展速度远超从前,但代

    阅读全文...

  • 有了 TensorFlow.js,浏览器中也可以实时人体姿势估计

    Posted by : lon.y@qq.com on 2018年5月13日

    与谷歌创意实验室合作,我很高兴地宣布发布TensorFlow.js版本的PoseNet,这是一种机器学习模型,允许在浏览器中进行实时人体姿势估计。您可以访问https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html 尝试一下在线演示。 PoseNet可以使用单姿态或多姿态算法检测图像和视频中的人物形象 – 全部来自浏览器。 那么,问题来了,什么是姿态估计?姿态估计是指在图像和视频

    阅读全文...

  • 利用 CSS 变量实现令人震惊的悬浮效果

    Posted by : lon.y@qq.com on 2018年5月6日

    最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像你想象的那么难! 追踪位置 我们要做的第一件事就是获取到鼠标的位置。 document.querySelector('.button').onmousemove = (e)

    阅读全文...

  • 妙用 scale 与 transfrom-origin,精准控制动画方向

    Posted by : lon.y@qq.com on 2018年4月26日

    上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。 然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何 将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。 描述很难理解,看看原本的效果: 难点所在 第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这

    阅读全文...