随笔分类 - css3
摘要：最近跟老大学了一招，因为要做一个以疫情为主题的新品宣传活动，banenr 是一个轮播图，使用 swiper 制作，三个背景分别以 backgroud 添加在三个 slider 上面。在做兼容的时候，这个banner 的高度要与屏幕的宽度成比例缩放。之前一直认为，这个比例缩放是通过 css3 的 @m
阅读全文
摘要：最近，在做一个比较大的网站，主要服务于欧美地区，全站为英文版本，因为是电子产品，因此，要展示产品内在美（扯个蛋！）仿照小米、錘子、苹果等网站，着重于css3动效效果，搜集整理了一些网站中用到的动效图，方便以后翻阅。 所有页面的动效依照 anicollection 动效来实现 旋转菜单 代码效果：de
阅读全文
摘要：医首信息 .company-logo{ margin: 80px auto; position: relative; /*父级元素相对定位*/ } .logo-box{ position: absolute; /*logo 绝对定位*/ ...
阅读全文
摘要：用 CSS 隐藏页面元素有许多种方法。你可以将 Opacity，占据网页布局，可以交互，读屏软件可以读到它 opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它
阅读全文
摘要：主流浏览器有5种：IE、chrome、firefox、safari、opera. 浏览器兼容 浏览器私有前缀 跨浏览器的默认样式 React.js 在浏览器中的兼容情况 Css3 在浏览器中的兼容问题 常用css内 hack 浏览器兼容写法，这次portal的兼容我使用的是选择器
阅读全文
摘要：上下晃动 /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环播放的次数 * transition-timing-functi...
阅读全文
摘要：CSS3 有3种和动画相关的属性：transform, transition, animation。 不同点： 1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。 2. 循环。 animation可以设定循环次数。
阅读全文
摘要：最早 JS 通过 setTimeout() 或者 setInterval() 方法设置一个时间，来控制帧与帧之间的时间间隔。 然而，这两个方法是有弊端的：效果不够流畅且占用额外资源。 后来，有了一个 requestAnimationFrame()，让浏览器决定最优帧速率、选择绘制下一帧的最佳时机。
阅读全文
摘要：ie-css3.htc 先说道说道这斯是弄啥嘞 ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow 复制保存下面的代码并命名为ie-css.htc,放在你认为比较好的位置中去，然后在CSS中调用，就像使用背景图片那样，只要能找得到他就可以了。...
阅读全文
摘要：flexBox 布局最合适小规模布局，而网格布局适合较大规模布局。 float,clear,vertical-align 在flex中不起作用。 flex布局中，有两类作用于父节点也子节点的样式，大部分简单的布局只要把父节点写好了，子节点是没有多大问题的。 常用的父节点样式有： display: f
阅读全文
