css
文章平均质量分 82
普通网友
这个作者很懒,什么都没留下…
展开
-
H5动画:轨迹移动
在 Web 开发中,经常需要实现各种动画效果,例如:移动、变形、透明度变化等,今天我们主要来讨论各种移动的实现。直线移动通常可以直接由各个点的位置,以及到点的时间与整个动画持续时间的比值,写出类似下面的代码并可实现动画。12345678910.cray { animation: move 2s alternate infinite;}@keyframes move { 0% { transfo...原创 2018-07-10 08:34:05 · 10415 阅读 · 0 评论 -
探究transform动画元素的z-index
z-index 和 translate3d在一次需求中,需要做出三张卡牌走马灯式滚动的效果,由于在前面的一张卡牌需要挡住后面的卡牌,自然而然地就用 z-index 使前面的卡牌显示在最上面,配以 transform 动画让“走马灯”滚起来,在开发过程中,在 PC 侧 Chrome 中表现良好,在本人手机浏览器中也表现良好,最后测试时却发现,在微信客户端或 QQ 客户端中打开页面出现问题,“走马灯”...原创 2018-07-11 08:29:05 · 172 阅读 · 0 评论 -
CSS书写规范、顺序
CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animat...原创 2018-08-07 11:13:12 · 155 阅读 · 0 评论