随笔分类 -  css3

使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法
摘要：如果不喜欢看分析过程，可以跳到最后看最终兼容方案 史前方法： 以前实现两端对齐是这样的： 效果是这样： 然后再慢慢加&emsp 或者&nbsp 来调整。原始、粗暴、效率低。em。。。应该摒弃。。。 现代方式： 自从了解到 text-align:justify 发现，原来还有这种操作。 满怀期待，结果 阅读全文
posted @ 2018-08-24 10:08 站住，别跑 阅读(6278) 评论(4) 推荐(6)
jq模仿雨滴下落的动画
摘要：效果如图： 实现思路：定时器每隔x秒生成宽高、下落速度（即动画执行时间）、left随机的div。 1.CSS： 2.JS: 本来最开始想计算雨滴left和下落高度的最大值，以免出现滚动条，但是后来想直接body加个overflow：hidden不是更好么，省去多余的代码，效果还一样。 除了用JS实现 阅读全文
posted @ 2018-02-26 12:32 站住，别跑 阅读(910) 评论(0) 推荐(0)
css3 calc()的用法
摘要：说明：calc（四则运算）；任何长度值都可以使用calc()函数进行计算；和平时的加减乘除优先顺序一样一样的； 特别注意：calc（）里面的运算符必须前后都留一个空格，不然浏览器识别不了，比如：calc(100% - 5px); 兼容性： HTML: CSS： 结果： 这个时候out被撑破了怎么办呢 阅读全文
posted @ 2017-12-11 18:02 站住，别跑 阅读(3372) 评论(0) 推荐(0)
点击旋转，再点击恢复初始状态
摘要：今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下 1.HTML 2.CSS 3.JQ 效果： 阅读全文
posted @ 2017-11-13 14:48 站住，别跑 阅读(2313) 评论(0) 推荐(0)
利用渐变实现书本的效果
摘要：如上图中间的那部分有点类似阴影的效果是用css3中的渐变（Gradients）来实现的 结构: 左边一个div，右边一个div。 样式: 左边一个背景为白色。 右边的div设置渐变属性: 说明：linear-gradient是线性渐变。最后一个background中的to right 指的是从左边到 阅读全文
posted @ 2016-11-07 14:09 站住，别跑 阅读(371) 评论(0) 推荐(0)
DIV或者DIV里面的图片水平与垂直居中的方法
摘要：水平居中的常用方式： text-align:center ——这可以实现子元素字体，图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式： vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-bl 阅读全文
posted @ 2016-10-12 14:33 站住，别跑 阅读(55542) 评论(1) 推荐(1)