前端学堂
学有所用

HTML5|CSS3 第2页

基础知识HTML5、CSS3以及在PC和H5页面的适配和兼容
实现路径动画SMIL或offset-path和canvas-前端学堂

实现路径动画SMIL或offset-path和canvas

前端学堂阅读(909)评论(0)赞(2)

路径动画在增强用户体验过方面还是挺有用的。当然你也可以用个gif图来实现,gif是万能的,但是前提是一定要满足业务对页面性能的要求。我们这里主要介绍的是现有的技术方案。 SVG SMIL animation SMIL(Synchronize...

高性能CSS动画-前端学堂

高性能CSS动画

前端学堂阅读(448)评论(0)赞(1)

CSS Animation是实现Web Animation方法之一,其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animati...

HTML元素嵌套约束-前端学堂

HTML元素嵌套约束

前端学堂阅读(556)赞(0)

块级元素特点: ①总是在新行上开始,占据一整行(很霸道); ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳 内联元素 和其他块元素。 行内元素的特点: ①和其他元素都在一行上; ②高,行高...

css基线与行高关系-前端学堂

css基线与行高关系

前端学堂阅读(840)赞(1)

一、基本概念 1、基线、底线、顶线、中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 2、内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline;可以通过background-...

基于rem方案实现自适应布局-前端学堂

基于rem方案实现自适应布局

前端学堂阅读(744)赞(0)

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有...

每日一击:z-index与translateZ-前端学堂

每日一击:z-index与translateZ

前端学堂阅读(1142)评论(0)赞(0)

我们在写样式的时候,经常会用到 transform: translate3d(0px, 0px, 0px),据说这个还能开启浏览器动画硬件加速。但是你知道吗,这里面包含了一个坑,那就是translate3d(0px, 0px, 0px) 实...

H5页面秒开-套路1

前端学堂阅读(804)评论(0)赞(2)

随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展),APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法,以下把所有网页都称为 H5 ...

CSS 变量(CSS Variable)-前端学堂

CSS 变量(CSS Variable)

前端学堂阅读(892)评论(0)赞(1)

这是一个令人激动的革新。 CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道,CSS 中是没...