1.底部画线，从左边开始，右边结束 html： <div class="silde-txt">底部划线</div> css： <style>.silde-txt{ width: 200px; color: red; position: relative; text-align: center; ma ...
分类：
Web程序 时间：
2018-04-28 15:44:36
阅读次数：
506
怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画class。 先上效果图： 1.蒙层的结构： 注意：三元运算符里的slideup和slidedown一定要加上引号 2.蒙层的其 ...
分类：
微信 时间：
2017-12-26 14:36:19
阅读次数：
978
其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要，下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法 ps：不考虑兼容问题（下次会写js实现元素的水平and垂直居中 ） 第一种 css3的transform 第二种 flex盒子布局 第三种 display的ta ...
分类：
Web程序 时间：
2017-11-26 00:45:46
阅读次数：
232
我发现现在很多网站都使用了这种效果，比如说锤子官网、elementui官网、秒味课堂等，不单单有鼠标跟随的效果，随着鼠标的移动还有视觉差的效果，看起来很高大上的技术，其实实现起来很简单，主要利用css3的transform-style和persperctive属性。 废话不多说直接上代码： html ...
分类：
移动开发 时间：
2017-11-18 21:01:56
阅读次数：
158
原始（未居中）： Solution 1： 给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数 Solution 2： 原理和1相似，设left：50%，但使用css3的transform：translate(x,y); Solution 3： ...
分类：
其他好文 时间：
2017-11-06 13:58:37
阅读次数：
129
当前很多购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果， 实现代码很简单，就用css3的transform便可实现。 下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。 css： html: 就是这么简单，哈哈哈、、、、 ...
分类：
移动开发 时间：
2017-07-07 23:40:37
阅读次数：
409
一、功能分析 qq会话列表可以向左滑动，然后出现删除按钮 二、知识点 touch事件，css3的transform属性 三、实现思路 为每个列表项绑定touch事件，计算touch移动的距离，在touchmove事件中实现滑动，在touchend中判断touch移动的距离，根据距离大小判断删除按钮是 ...
分类：
其他好文 时间：
2017-07-05 15:23:59
阅读次数：
158
方法一：利用CSS3的transform:translate 方法二：利用flexbox ...
分类：
移动开发 时间：
2017-05-15 11:54:06
阅读次数：
193
转载自： http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单 ...
分类：
移动开发 时间：
2017-05-10 18:47:40
阅读次数：
344
思路：先写出简单的数字计时，根据时分秒的数值转换成度数，使用CSS3的transform进行div倾斜。 知识点：transform可以对div进行倾斜或旋转等效果。但是根据浏览器不同代码也不同，本代码只能根据chorme浏览器或safari使用 代码部分： <!doctype html><html ...
分类：
Web程序 时间：
2017-04-29 18:58:31
阅读次数：
275
