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{
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特效的更多相关文章
- CSS3之动画Animation特效
CSS3的出现 让我们通过css样式也能写出炫酷的特效 通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果 DEMO: <!DOCTYPE html> ...
- Mac OS X 背后的故事
Mac OS X 背后的故事 作者: 王越 来源: <程序员> 发布时间: 2013-01-22 10:55 阅读: 25840 次 推荐: 49 原文链接 [收藏] ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- Html5+Css3 Banner Animation 多方位移动特效
背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- Android Animation动画详解(二): 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- css3的动画特效--动画序列(animation)
首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...
- css3的动画特效--元素旋转(transition,animation)
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...
- 37.如何把握好 transition 和 animation 的时序,创作描边按钮特效
原文地址:https://segmentfault.com/a/1190000015089396 拓展地址:https://scrimba.com/c/cWqNNnC2 HTML code: < ...
随机推荐
- generatorConfiguration详解
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration ...
- Python基础(二)自定义函数
1.判断字符串,内容是否为数字 我们用python:xlrd读Excel内容时,本来只是输入的整数字,经常读出来的是float类型 我们需要自动转成整型,意思就是说,读出来的和我们输入的一样,但是,我 ...
- proto 3 语法
一.简介 proto3是新版本的protobuf语法.它简化了部分语法,并扩大了支持的语言,Ruby.C#.目前谷歌推荐只在是用新支持的语言或使用新的gRPC框架的时候使用.proto2和proto3 ...
- 解决IDEA无法安装插件的问题
进入2018年以来,在IDEA插件中心中,安装插件经常安装失败,报连接超时的错误.如下: 我们发现连接IDEA的插件中心使用的是https的链接,我们在浏览器中使用https访问插件中心并不能访问. ...
- Spring 工具包
Spring 工具包: spring-core-.RELEASE.jar!\org\springframework\util
- Python数据分析Numpy库方法简介(二)
数据分析图片保存:vg 1.保存图片:plt.savefig(path) 2.图片格式:jpg,png,svg(建议使用,不失真) 3.数据存储格式: excle,csv csv介绍 csv就是用逗号 ...
- 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 ...
- dataguard从库数据库丢失恢复例子(模拟所有的控制文件)
1.退出日志应用模式[oracle@localhost ~]$ sqlplus /nolog SQL*Plus: Release 11.2.0.4.0 Production on Mon Jan 14 ...
- Guitar Pro 添加装饰音
在使用Guitar Pro进行乐谱弹唱或者自己作曲时,我们经常会碰到在乐谱上出现一些装饰音,那么大家肯定会有问题了,装饰音是什么?如何使用Guitar Pro来添加装饰音呢? 装饰音是用来装饰旋律的临 ...
- Java基础学习-Java语言概述
一.Java语言发展史 创始人:詹姆斯·高斯林(James Gosling) 公司:SUN——(Stanford University Network斯坦福大学网络公司) 1995年5月23日,Jav ...