• transiton,transform,animation,border-image


    animation,transition,transform三者联系与区别: https://www.jianshu.com/p/0e0e1903b80d

    transform: 使用小技巧:

     transform(x,y): 移动盒子自身的动画,可以取代定位中的margin:0 auto; margin-left: -100px. 中的后者

     因为transform(x,y)指代盒子自身向左或者向右移动.

    transition与transform结合使用范例:

     transform:rotate旋转

     例2:

     transform-origin

     animation:动画

    动画类似于js函数代码,分为定义动画和使用动画:其中定义动画使用关键字@keyframes 动画名称。使用通过animation关键字即可。动画使用如下图所示:

     例2: transform和animation结合使用,注意: 动画自动补全过度,所以不需要指定transaction属性。

     例3: 图片旋转

    效果如下:

    css3中动画事件

    css3中动画transition和animation都有动画事件transitionend和animationend事件.

     css3动画效果及源码学习

    1.通过网站:animate.css查看所有css3动画效果

    2.点击View on GitHub跳转到git上,并打开animate.css文件查看源码3

    3.搜索pulse查看使用方式即可,如下截图

     css3总结

     border-image边框图片

  • 相关阅读:
    剑指offer 找出数组中重复的数字
    SE知识整理——泛型
    Centos7 切换与安装图形界面
    laravel8 elasticsearch 配置搭建使用
    ts运行配置.md
    ts类型保护
    2022年4月工作资料
    Cmake使用
    关于线性筛的研究
    SkyWalking在.NET平台的简单使用
  • 原文地址:https://www.cnblogs.com/zhulibin2012/p/10031229.html
Copyright © 2020-2023  润新知