随笔分类 -  2.CSS

多行文本加省略号的处理方法
摘要：写这篇文章的起因是，当使用样式实现多行文本超出显示省略号的效果的时候，发现有的页面上省略号不是在文字末尾，而是在文字中间。后来查了下竟是跟文字在a链接里显示有关。下面详细说明下。 页面上文字超出部分用省略号表示，有多种方法可以实现，比如利用JS计算字数或是宽度，超出指定长度的字数，截断文字并用'.. 阅读全文
posted @ 2016-12-20 15:02 ZRainna 阅读(1247) 评论(0) 推荐(0) 编辑
flex布局模式简单概述
摘要：CSS3中新增一种弹性布局模型：flexbox。网上关于flex的介绍很多，这里介绍下常用的几个属性。弹性布局的特点是非常灵活。可根据剩余的宽高，灵活布局。 先用图片说明flex具有哪些属性。（网上盗的图） 上图中flex容器即是父元素，flex项目为子元素。 属性说明 1.首先在父元素中定义dis 阅读全文
posted @ 2016-06-30 17:26 ZRainna 阅读(2396) 评论(0) 推荐(0) 编辑
利用writing-mode实现元素的垂直居中
摘要：writing-mode是CSS3的新特性之一，使用场景不是很多。这个属性主要是改变文档流的显示方式。具体的介绍参考这篇文章：http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/，这里大致提炼下可以使用的部分。使用时需要加上浏览器 阅读全文
posted @ 2016-05-23 16:43 ZRainna 阅读(3514) 评论(0) 推荐(1) 编辑
关于元素层级的一些介绍
摘要：说起浏览器中的元素层级，我们首先能想到的就是z-index，position(值非static)+z-index结合使用，即可控制元素在浏览器中的显示层级。那除了这种方式外，还有其他什么方式可以控制元素的层级呢？ 7阶层叠水平 任何元素都有层叠顺序，当元素发生层叠时，层级高的会显示在上面，覆盖层级低 阅读全文
posted @ 2016-05-06 16:12 ZRainna 阅读(9078) 评论(0) 推荐(1) 编辑
CSS 动画之十-图片+图片信息展示
摘要：这个动画主要是运用了一些css3的特性，效果是展示一张商品图片，然后在商品图片的制定位置显示该商品的详细信息。效果在chrome浏览器中预览。图片+图片上的说明信息 花王碧柔防晒霜 日本 50人... 阅读全文
posted @ 2015-09-01 15:18 ZRainna 阅读(378) 评论(0) 推荐(0) 编辑
CSS 动画之九-会呼吸的信封
摘要：新年已经到来,各个网站都举办着各种不同类型的活动,'会呼吸的信封'有可能就是你遇到的其中一种.其实就是一个信封的样式,在封口处加上开合开合的动画效果,吸引用户去打开这个信封,点击后可能会送红包,优惠券或介绍其他相关的活动内容.动画原理非常简单:先写出信封的样式,然后将封口处的元素使用rotateX旋... 阅读全文
posted @ 2015-01-16 18:29 ZRainna 阅读(3544) 评论(2) 推荐(1) 编辑
CSS 实现加载动画之八-圆点旋转
摘要：这篇文件介绍的动画是QQ邮箱APP里的加载动画，效果类似，但是不完全一样。实现过程不复杂，这里不详细解释了，直接上源码。另外还有一种实现方式，利用元素的3D转换加平移。1. 先看截图2. 源代码 1 2 3 4 5 CSS3实现加载的动画效果8 6 7 8 9 31 32 33 34 ... 阅读全文
posted @ 2014-10-13 17:50 ZRainna 阅读(1698) 评论(2) 推荐(0) 编辑
CSS 实现加载动画之七-彩环旋转
摘要：今天整理的这个动画估计大家都不会陌生，彩环旋转，看过之后是不是觉得很熟悉，对，这个就是优酷视频APP里面的加载动画。本人空余时间喜欢看些视频，留意到这个动画后就想用代码实现出来，今天整理了下，跟大家分享，如果有大牛能提出更好的实现方法，欢迎补充。案例请在chrome中查看。这个动画的实现也非常简单，... 阅读全文
posted @ 2014-10-13 11:20 ZRainna 阅读(2249) 评论(8) 推荐(1) 编辑
CSS 实现加载动画之六-大风车
摘要：这个动画改编自光盘旋转，前几个步骤一样，最后一步不同。光盘旋转的最后一步是外层容器加个圆形的白色边框，多余部分隐藏，这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素，构成风车旋转的角。1. 先看截图2. 代码实现思路2.1 首先还是定义四个元素，元素的中心为这四个元素组成的圆的圆心。这... 阅读全文
posted @ 2014-09-29 10:44 ZRainna 阅读(1494) 评论(3) 推荐(0) 编辑
CSS 实现加载动画之五-光盘旋转
摘要：今天做的这个动画叫光盘旋转，名字自己取的。动画的效果估计很多人都很熟悉，就是微信朋友圈里的加载动画。做过前面几个动画，发现其实都一个原理，就是如何将动画的元素如何分离出来。这个动画的实现也很简单，关键点在于如何将元素拼凑成风车形状。然后定义动画的关键帧为rotate 360度，应用于整个元素上，就可... 阅读全文
posted @ 2014-09-28 16:24 ZRainna 阅读(2493) 评论(9) 推荐(3) 编辑
CSS 实现加载动画之四-圆点旋转
摘要：圆点旋转也是加载动画中经常用到的。其实现方式和菊花旋转一样，只不过一个是线条形式，一个是圆点形式。圆点按照固定的旋转角度排列，加上延时的改变透明度的动画就可以实现。这个实现也比较简单。1. 动画截图2.案例源代码 1 2 3 4 5 CSS3实现加载的动画效果4 6 7 8 9 38 ... 阅读全文
posted @ 2014-09-27 17:06 ZRainna 阅读(2275) 评论(0) 推荐(0) 编辑
CSS 实现加载动画之三-钢琴按键
摘要：今天做的这个动画实现也是非常简单，简单数几行代码就可以搞定。给这个动画取了个优雅的名字--钢琴按键，也实在是想不出什么更形象的名字了。废话不多说，直接上图。1. 先看gif图2. 代码实现思路2.1 定义五个方块的元素。2.2 对方块元素使用动画，延时改变透明度。3. 主要使用的技术主要用到了ani... 阅读全文
posted @ 2014-09-26 15:39 ZRainna 阅读(2017) 评论(0) 推荐(2) 编辑
CSS 实现加载动画之二-圆环旋转
摘要：上次简单的介绍了下如何用代码实现菊花旋转的加载动画，动画点击，这次继续我们的动画系列，实现另外一种加载动画，圆环旋转。与上次不同的是，菊花旋转是通过改变元素透明度来实现动画，这次因为考虑到元素叠加，加上元素本身带有背景色，如果改变透明度会影响效果，所以直接改变元素的背景颜色，加上适当的延时，就可以实... 阅读全文
posted @ 2014-09-24 17:34 ZRainna 阅读(5112) 评论(0) 推荐(8) 编辑
CSS 实现加载动画之一-菊花旋转
摘要：最近打算整理几个动画样式，最常见的就是我们用到的加载动画。加载动画的效果处理的好，会给页面带来画龙点睛的作用，而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式，当做背景图或是img标签来引用，这种方式最简单，也不会有兼容性的问题。不过本人有时爱折腾，看到一些动画的效果，不管是简单也好，... 阅读全文
posted @ 2014-09-18 20:31 ZRainna 阅读(25816) 评论(7) 推荐(2) 编辑
CSS 清除浮动的四种方法
摘要：在实际项目中，我们经常会用到float属性来对页面进行布局。当使用float时，意味着该元素已经脱离了文档流，相当于浮于文档之上，不占据空间。但是针对兄弟元素为文字内容时，会占据一定空间，从而产生文字环绕的效果。如果不清除浮动，会导致父元素的高度撑不开等一系列问题。那如何清除浮动呢？给出以下几种方法... 阅读全文
posted @ 2014-08-08 15:38 ZRainna 阅读(329) 评论(0) 推荐(0) 编辑
CSS3 chart
摘要：利用CSS3技术生成统计图。原理：利用元素的百分比算出旋转度数。类似于斗地主时，手拿扑克牌的形状。程序源码： 1 2 3 4 5 CSS3 chart 6 7 8 9 59 60 61 62 63 利用CSS3 制图 64 65 ... 阅读全文
posted @ 2014-07-21 15:23 ZRainna 阅读(1188) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示