• CSS动画:animation、transition、transform、tra…

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

    前言 在平时开发过程中,由于都是自己捣鼓玩的项目,并没有UI设计给我的设计图,更没有什么特效要求,导致对css动画一直都不是很熟悉,但是作为即将进入实习单位的萌新程序员,要时刻准备着设计师要求的各种动画,于是有了这一篇文章。 容易混淆的几个css属性 css属性很多,并且有些无论是字母的拼写还是字面上的意思,都容易混淆,比如我列出来的几个属性,是不是也混淆过你~ 属性 含义 animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性 t

    阅读全文...

  • 通过生成内容和CSS网格布局为空单元格添加样式

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

    新手在使用网格布局时常见的一个问题是:如何对一个不包含任何内容的单元格添加样式。在当前的Level 1规范中还无法做到,因为无法选定空单元格或网格区域并对其添加样式。也就是说,想要设置样式必须插入一个元素。 本文我将会介绍如何使用CSS生成内容为空单元格添加样式,而不添加多余的空元素,同时会给出一些示例。 为什么不能对空区域设置样式? 网格规范的开头有提到: “本 CSS 模块定义了一个用于优化UI设计的基于网格的二维布局系统。在网格布局模型中,网格容器的

    阅读全文...

  • 爬虫攻防之前端策略简析

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

    看到一篇文章,介绍在反爬虫过程中,前端工程师的各种脑洞,文章见这里。 文章里介绍了几个大的网站,在反爬虫过程中,采取的各式各样的策略,无不体现出前端工程师的奇葩脑洞。 还挺有意思的,就简单分析了一下,针对每个方案,看看有没有解决办法,于是整理成博客,记录一下。 1. 自定义字体形式 该方案是,自定义了一种字体,网页中使用乱码字符或者其他混淆字符,通过自定义字体的渲染成正确的显示数据。 代表网站有猫眼电影和去哪儿手机端。 1.1 猫眼电影 如上图,是猫眼首页

    阅读全文...

  • 使用box-shadow进行画图(性能优化终结者)

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

    最近突然想做一些好玩的东西,找来找去,想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来 感觉这个挺有意思,正好趁着周末,自己也搞一波 前言 在线地址: 优化前的版本 优化后的版本 源码仓库地址 不建议上传大图片。。喜欢听电脑引擎声的除外 首先,并不打算单纯的实现某一张图片(这样太没意思了),而是通过上传图片,来动态生成box-shadow的数据。 所以,你需要了解这些东西: box-shadow canvas box-shadow

    阅读全文...

  • 没学过线代也能读懂的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有时候也很难搞,经常导致困惑。好像有什么神秘的规则在起作用。比如,我们改变了

    阅读全文...