CSS3篇
robbi.yang
这个作者很懒,什么都没留下…
展开
-
flex 弹性盒子子元素宽度被压缩
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,它还有另外一个值,就是0.原创 2022-06-14 14:34:00 · 2559 阅读 · 0 评论 -
CSS: 使用 svg 实现圆形进度条
使用 Vue 框架进行实现<template> <div class="mhy-audio-player" @click="onClickAudio"> <div class="mhy-audio-player__svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" w.原创 2022-05-19 18:53:58 · 511 阅读 · 2 评论 -
css 文本只显示两行,超出部分用省略号表示
代码块如下: overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;原创 2022-01-07 15:10:36 · 1042 阅读 · 0 评论 -
CSS3(一)动画原理
CSS3 Animation 之前一直在用cocos等编辑器做动画,最近想学习一下使用CSS3实现一些基本的动画。所以,将这两种动画开发模式,进行对比学习或许会有更深的理解与体会。什么是动画 在学习CSS3动画之前,我们必须先介绍一个什么是动画,动画都具有哪些特性。 动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应。什...原创 2018-04-14 18:09:43 · 5190 阅读 · 0 评论 -
CSS3(二) Transition & Animation
Transition & Animation记得很早以前使用过css动画,但是当时写起来感觉很混乱。大概是不太了解Transition & Animation这两个属性的关系,他们分别控制动画的哪些操作,因此,今天整理一下这两个动画中,经常用到的属性。 CSS3中,动画允许在多个关键帧之间进行状态(元素的行为和外观)的改变。Trasition 提供了从一种状...原创 2018-04-16 17:36:59 · 2774 阅读 · 1 评论 -
CSS3(三)Animation 入门详解
Animation前言 好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动到导航栏,就会播放多种动效,给用户一种酷炫的体验。我觉得用户体验,才是前端工程师更加关注的问题,而不是一味追求Javascript的编码技能。 七喜官方网站A...原创 2018-04-17 16:07:44 · 77585 阅读 · 9 评论 -
CSS3(四)Flex布局简介
Flexible Box 弹性布局(flexbox),第一次见到这种布局方式的我,有种第一次遇到外国人一样的好奇,咦~这个人长得这么特别,黄头发大鼻头深眼窝。然后,在好奇心的趋势下,我就打算一窥究竟,它的内部构造到底是和我们有什么不同的(我们不一样~)。 直到我遇到了bootsrap的库之后,我深深被它的弹性布局吸引,感觉是一个很高大上的布局方式。通过深入探索之后,我才发现它应用...原创 2018-04-22 17:54:48 · 1204 阅读 · 0 评论 -
CSS3(五) Transform的实现原理
Transform CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换: 旋转(rotate) 平移(translate) 缩放(scale) 倾斜(skew) 下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一种常见的动画效果。 项目源码T...原创 2018-04-23 16:13:31 · 5473 阅读 · 5 评论