• animation特效


    在小程序中的使用:

    <view class='test1'>
      <image src='/images/light.png'></image>
    </view>
    <!--星星的缩放效果-->
    <view class='test2'>
      <image src='/images/star.png'></image>
    </view>
    
    <!--转动效果-->
    <view class='test3'>
      <image src='/images/cross.png'></image>
    </view>
    <!--望远镜-->
    <view class='test4'>
      <image src='/images/telescope.png'></image>
    </view>
    

      

    .test1{
       160rpx;
      height: 160rpx;
      background-color: #188eee;
    }
    .test1 image{
       160rpx;
      height: 160rpx;
      animation: light 1.5s infinite;
    }
    @keyframes light{
      from{
        transform: rotate(0deg);
      }
      80%,to{
        transform: rotate(360deg);
      }
    }
    
    
    /*星星特效:*/
    .test2{
       100rpx;
      height: 100rpx;
    }
    .test2 image{
       100rpx;
      height: 100rpx;
      animation: star .5s linear infinite alternate
    }
    
    @keyframes star{
      form{
        transform: scale(1);
      }
      to{
        transform: scale(.5);
      }
    }
    /*转动效果:*/
    .test3{
       100rpx;
      height: 100rpx;
    }
    .test3 image{
       100rpx;
      height: 100rpx;
      animation: cross 1s linear infinite;
    }
    @keyframes cross{
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
    .test4{
       500px;
      height: 500px;
      text-align: center
    }
    .test4 image{
        96px;
       height: 221px;
       animation: eyes 3.2s infinite;
    }
    @keyframes eyes{
      from,90%,to{
        transform: rotate(80deg)
      }
      40%,50%{
        transform: rotate(-60deg)
      }
    }
    

      

  • 相关阅读:
    swift 加载 storyboard 里的UIViewController
    ios 下创建,删除文件夹的方法
    iOS ARC模式 内存管理
    UISwitch
    建立 svn 服务端
    去除NSString里面的空格
    正则表达式验证邮箱的合法性
    memcached 的安装与使用
    windows2008 IIS下配置FTP服务
    lua语法备忘录
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8818286.html
Copyright © 2020-2023  润新知