在小程序中的使用:

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

  

animation特效的更多相关文章

  1. CSS3之动画Animation特效

    CSS3的出现 让我们通过css样式也能写出炫酷的特效 通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果 DEMO: <!DOCTYPE html> ...

  2. Mac OS X 背后的故事

    Mac OS X 背后的故事 作者: 王越  来源: <程序员>  发布时间: 2013-01-22 10:55  阅读: 25840 次  推荐: 49   原文链接   [收藏]   ...

  3. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  4. Html5+Css3 Banner Animation 多方位移动特效

    背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...

  5. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. Android Animation动画详解(二): 组合动画特效

    前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...

  7. css3的动画特效--动画序列(animation)

    首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...

  8. css3的动画特效--元素旋转(transition,animation)

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  9. 37.如何把握好 transition 和 animation 的时序,创作描边按钮特效

    原文地址:https://segmentfault.com/a/1190000015089396 拓展地址:https://scrimba.com/c/cWqNNnC2 HTML code: < ...

随机推荐

  1. generatorConfiguration详解

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration ...

  2. Python基础(二)自定义函数

    1.判断字符串,内容是否为数字 我们用python:xlrd读Excel内容时,本来只是输入的整数字,经常读出来的是float类型 我们需要自动转成整型,意思就是说,读出来的和我们输入的一样,但是,我 ...

  3. proto 3 语法

    一.简介 proto3是新版本的protobuf语法.它简化了部分语法,并扩大了支持的语言,Ruby.C#.目前谷歌推荐只在是用新支持的语言或使用新的gRPC框架的时候使用.proto2和proto3 ...

  4. 解决IDEA无法安装插件的问题

    进入2018年以来,在IDEA插件中心中,安装插件经常安装失败,报连接超时的错误.如下: 我们发现连接IDEA的插件中心使用的是https的链接,我们在浏览器中使用https访问插件中心并不能访问. ...

  5. Spring 工具包

    Spring 工具包: spring-core-.RELEASE.jar!\org\springframework\util

  6. Python数据分析Numpy库方法简介(二)

    数据分析图片保存:vg 1.保存图片:plt.savefig(path) 2.图片格式:jpg,png,svg(建议使用,不失真) 3.数据存储格式: excle,csv csv介绍 csv就是用逗号 ...

  7. LeetCode #003# Longest Substring Without Repeating Characters(js描述)

    索引 思路1:分治策略 思路2:Brute Force - O(n^3) 思路3:动态规划? O(n^2)版,错解之一:420 ms O(n^2)版,错解之二:388 ms O(n)版,思路转变: 1 ...

  8. dataguard从库数据库丢失恢复例子(模拟所有的控制文件)

    1.退出日志应用模式[oracle@localhost ~]$ sqlplus /nolog SQL*Plus: Release 11.2.0.4.0 Production on Mon Jan 14 ...

  9. Guitar Pro 添加装饰音

    在使用Guitar Pro进行乐谱弹唱或者自己作曲时,我们经常会碰到在乐谱上出现一些装饰音,那么大家肯定会有问题了,装饰音是什么?如何使用Guitar Pro来添加装饰音呢? 装饰音是用来装饰旋律的临 ...

  10. Java基础学习-Java语言概述

    一.Java语言发展史 创始人:詹姆斯·高斯林(James Gosling) 公司:SUN——(Stanford University Network斯坦福大学网络公司) 1995年5月23日,Jav ...