资讯专栏INFORMATION COLUMN

CSS3动画简单案例

android_c / 948人阅读

摘要:简易加载中控制执行次数这里一直执行,执行速度,匀速简易进度条过渡属性和鼠标滑过根据宽高变大,必须设置和大

1.简易加载中
 @keyframes myfirst
    {
        from{transform: rotate(0deg)}to{transform: rotate(360deg)}
    }
    .loading{
        animation: myfirst 1.5s infinite linear;//infinite控制执行次数这里一直执行,linear执行速度,匀速
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top:16px solid blue;
        width: 120px;
        height: 120px;
    }
    
    
2.简易进度条
.move {
        width: 0px;
        height: 10px;
        animation: moveHover 5s infinite linear;

    }
    
  
3.过渡属性
    .change
    {
        transition: width 2s;
        font-size: 10px;
        width: 100px;
        height: 20px;
        background: yellow;
        -moz-transition: width 2s;    /* Firefox 4 */
        -webkit-transition: width 2s;    /* Safari 和 Chrome */
        -o-transition: width 2s;    /* Opera */
    }
    .change:hover
    {
        width: 500px;
    }
    
鼠标滑过
    .bigger{
        font-size: 20px;
        width: 0;
        height: 0;//scale根据宽高变大,必须设置width和height
        background: #2A9F00;
        transition: transform 5s;
    }
    .bigger:hover{
        transform: scale(10);
    }
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114580.html

相关文章

  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    Flink_China 评论0 收藏0
  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    Bmob 评论0 收藏0
  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    tracy 评论0 收藏0
  • CSS3动画简单案例

    摘要:简易加载中控制执行次数这里一直执行,执行速度,匀速简易进度条过渡属性和鼠标滑过根据宽高变大,必须设置和大 showImg(https://segmentfault.com/img/bVbslqh?w=656&h=397); 1.简易加载中 @keyframes myfirst { from{transform: rotate(0deg)}to{transfor...

    Jason 评论0 收藏0
  • CSS3动画简单案例

    摘要:简易加载中控制执行次数这里一直执行,执行速度,匀速简易进度条过渡属性和鼠标滑过根据宽高变大,必须设置和大 showImg(https://segmentfault.com/img/bVbslqh?w=656&h=397); 1.简易加载中 @keyframes myfirst { from{transform: rotate(0deg)}to{transfor...

    AlphaWatch 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<