buttonChan-CSDN博客

原创深入理解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"> <div class='login-box'> ...

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 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由...

2018-04-05 22:01:46 331

buttonChan的博客