css3
李景山-编程者
就是想简单的写代码.......................
展开
-
css3 translateX,translateY,translate,transform,transition
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 用法:transform: rotate(-27deg); transform: translateX(0);transition: transform .3s ease;后面可以跟随的值: 兼容方式: div { transform:rotate(7deg); -ms-tran原创 2017-04-11 13:49:27 · 3617 阅读 · 0 评论 -
关于 transform:matrix(1,0,0,1,0,0)
transform 相对比较难理解的是 2D 的集合 matrix 。 这里只是对 matrix 里面的元素进行分解 matrix( 1 , 0 , 0 , 1 , 0 , 0 ) 1 2 3 4 5 6 1. 正常值为1,定义的是 scaleX 通过设置 X 轴的值来定义缩放。值:>=0 2. 正常值为0,定义的是 skew 定义 2D原创 2017-04-11 19:07:51 · 12593 阅读 · 1 评论 -
通过 css3 实现鼠标划过图片移动
.find_item_img:hover{transform: translateX(-5px);}.find_item_img{transition: transform .4s ease-out;position: absolute;bottom: 5px; right: 10px;width: 80px;height: 80px;}关键点: position: 绝对定位 :hover 方原创 2017-04-12 10:22:13 · 4013 阅读 · 0 评论 -
linear-gradient() 实现渐变
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)<side-or-corner> = [left | right] || [top | bottom]<color-stop> = <color> [ <length> | <perce原创 2017-04-12 09:56:26 · 684 阅读 · 0 评论 -
css 新特征
cubic-bezier贝塞尔曲线CSS3动画工具 cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。transparent是全透明原创 2017-04-13 11:21:51 · 232 阅读 · 0 评论 -
Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?
翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,如果这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了。原因:google浏览器为了最快速的相应touch事件,做出的改变。历史:当浏览器首先对默认的事件进行响应的...原创 2019-03-08 14:10:15 · 180217 阅读 · 11 评论