- 博客(11)
- 收藏
- 关注
原创 深入理解CSS3里的transform变换
transform变换不会影响元素在文档流中的位置 transform是CSS3中实现各种炫酷效果的样式属性,基础的转换函数有缩放scale()、平移translate()。transform对元素在文档流中的盒模型的影响就相当于position:relative,不会改变盒模型,包括大小和位置。在animation的@...
2018-05-23 20:03:58
839
原创 background-size的transition不生效的解决方案
background-size的transition可能不生效的原因今天在实现鼠标悬浮背景图渐渐扩大的效果时,遇到一个坎:div{ background-size:cover; transition:background-size .5s;}div:hover{ background-size:120% auto;}以上是css样式,然而,当鼠标悬浮在di...
2018-05-20 17:20:28
2038
原创 关于Angular中的:host选择器
Angular使用自定义标签插入组件 上一篇关于HTML中的自定义标签的博客中,揭示了HTML自定义元素的默认样式是display:inline,而且也是可以为它们应用样式的。在Angular中,组件样式规则中的:host选择器就是用来对自定义元素应用样式: &n...
2018-05-09 13:46:59
8592
原创 html中的自定义标签和语义元素
HTML元素本质上是样式无关的 自从html5中出现了语义元素,html文档中的元素种类增多了,对已有的元素在样式上进行比较,其实可以发现html中的标签除了名称不同,它们的本质作用都是一样的:声明一个元素节点,只不过浏览器默认样式表(user agent stylesheet...
2018-04-30 16:19:01
5159
原创 利用animation和transform实现翻页效果
最近要展示菜谱的步骤,想到采用翻页的动画效果来在各个步骤之间切换,以下是我的实现过程:由于涉及到动画效果,肯定得采用CSS3动画来实现,CSS3提供了2种方式来在元素上应用动画: 1. animation和@keyframes 2. transition 其中第1种是直接实现动画的,允许定义动画的每一帧;第2种是利用...
2018-04-30 01:01:58
3137
原创 base标签
最近在项目中使用Angular的Router服务时接触到HTML中的<base>标签,查看了MDN官方文档,mark一下:<base href="baseUrl"/><base>标签为文档中的所有 相对 URL指定相对解析环境,即所有相对URL都被解析为相对href属性值"baseUrl"的。举个栗子:<base href="/example/...
2018-04-21 16:42:49
365
1
原创 CSS选择器之最常见的交集选择器和并集选择器
由于太常见,上篇文章漏掉了2种最常见的组合选择器:1.并集选择器S1,S2[,S3...]2.交集选择器S1S2[S3...],注意交集选择器的各个选择器的排列顺序是要遵循能被解析的原则的(For Example:选择p和.class1的交集,p.class1可行,但是.class1p不可行,原因是后者不能被CSS解析器正确解析)。...
2018-04-21 15:00:08
5443
原创 理一理CSS选择器
CSS是我在前端开发中打交道最多的,而写CSS离不开选择器(selector),今天就来梳理一下CSS各种选择器,复习捡漏。 总结一下,CSS选择器一共有以下3种: 1. 基础选择器:元素选择器 elementname(元素名称) 类选择器 .classname(类名) ID 选择器 #idname(ID 名) 通配选择器 * 属性选择器 [属性=值] 其中前4种再熟悉...
2018-04-19 22:57:13
262
原创 CSS实现毛玻璃效果
今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差。页面结构如下:<div class="wrap-box"><!--最外层包裹框,背景图片很鲜艳亮眼position:fixed--> <div class='login-box'><!--登录表单框部分position:fixed--> ...
2018-04-10 23:52:32
9962
1
原创 Angular本地代理解决跨域问题
今天在写完了前端的登录表单组件后,本地测试时由于前端运行在http:localhost:4200,而后端部署在其他主机上,访问后端接口产生了浏览器跨域问题,百度一番后找到了解决方案: 1.搭建本地代理到目标服务器; 2.让后端在response添加Access-Control-Allow-Origin:*;这个http Header 由于第二种方法可能会导致非法跨域攻击(CSRF...
2018-04-07 00:05:18
2757
1
原创 入门Angular
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。Angular 的基本构造块是 NgModule,它为组件提供了编译的上下文环境。NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由...
2018-04-05 22:01:46
331
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人