页面布局之动画及插件

最新推荐文章于 2020-10-31 08:12:39 发布

Lia------Li

最新推荐文章于 2020-10-31 08:12:39 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/qq_36974981/article/details/79187449

版权

transition
过渡，缓动

<style>
        div{
            width: 50px;
            height: 30px;
            transition: all 500ms ease-out 500ms;
            background-color: #f00;
        }
        div:hover{
            width: 400px;
            height: 200px;
            background-color: #ff0;
        }
    </style>

<body>
    <div></div>
</body>

属性名/all：对哪个属性过渡，比如width, height, color; all(对所有属性都添加过渡)
- all 比较浪费性能
时间：过渡动画所需要的时间
过渡形式：
- ease
- ease-in 缓入
- ease-out 缓出
- ease-in-out 缓入缓出
- cubic-bezier() 贝塞尔曲线
动画延迟时间单位 ms s

transform

<style>
        div{
            width: 50px;
            height: 30px;
            transition: all 500ms ease-out;
            background-color: #f00;
        }
        div:hover{
            /*transform: translate3d(200px,300px,0);*/
            /*transform: rotateZ(360deg);/*旋转*/
            /*transform: scale(2);/*放大缩小*/
            transform: skew(150deg,0);
        }
    </style>

<body>
    <div></div>
</body>

平移
translateX
translateY
translateZ
translate3d(x,y,z) 推荐
旋转单位 deg（度）
rotateZ
rotateY
rotateX
rotate3d
缩放
scale() 放大的系数 1是原比例大于1 放大小于1缩小
scaleX()
scaleY()
scaleZ()
扭曲
skew(x,y) 单位deg

浏览器

chrome webkit/blink -webkit-
safari webkit/blink -webkit-
firefox Mozilla -moz-
edge
IE microsoft -ms-
opera -o-
360 极速模式webkit / 兼容模式 IE
猎豹
QQ
UC

-webkit-transform: translated3d(0,100%,0);
-moz-transform: translated3d(0,100%,0);
-ms-transform: translate3d(0,100%,0);
-o-transform: translate3d(0,100%,0);
transform: translated3d(0,100%,0);

Sublime 插件

css格式化：CSScomb
自动加前缀：Autoprefixer
- 设置快捷键：选择菜单Preferences > Key Bindings – User

[
    { "keys": ["ctrl+1"], "command": "autoprefixer" }
]

Preferences——>Package Settings——>Autoprefixer——>Settings - User

{
    "browsers": ["last 5 versions",">0.5%","ie 8","ie 7","ie 9"]
}

自动加文件名： AutoFileName，AutoTools
代码颜色系列：BracketHighlighter，Colorcoder，ColorPicker
20个强大的插件：http://www.oschina.net/translate/20-powerful-sublimetext-plugins

感想
程序员很辛苦，但是只要你喜爱代码，TA就会慢慢地AI上你。
想来想去也没什么可以抱怨的，毕竟是自己选择的路。
最初，我热情饱满，因为PS；在途中，我烦躁不安，因为布局；现在，我不紊不乱，因为爱自己。
我不懂，我到底为什么不会。
我羡慕，老师游刃有余。
我想，我也在进步。

Lia------Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局之动画及插件

transition 过渡，缓动style> div{ width: 50px; height: 30px; transition: all 500ms ease-out 500ms; background-color: #f00; } div:
复制链接

扫一扫