css3动画简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} .box {
width: 400px;
margin: 100px auto;
} .box img{
/*4.调用动画*/
animation: rotateFuc 4s linear 0s;
} /*动画的第一步*/
/*1.申明动画序列 @keyframes 跟着的是动画序列的名称*/
@keyframes rotateFuc{
/*2.写动画的节点 from 0% to 100% 百分比是时间节点*/
from{ } 25%{
/*3.添加动画属性*/
transform: rotate(360deg) scale(2);
} 75%{
/*3.添加动画属性*/
transform: rotate(720deg) scale(0.5);
} to{
transform: none;
}
} </style>
</head>
<body>
<div class="box">
<img src="./images/fengche.png">
</div>
</body>
</html>
css3动画简单案例的更多相关文章
- css3动画小案例
今天与大家来分享一下我做的css3动画案例. 在展示我的案例之前先给大家说说实现这个案例所需要的一些属性. transform 属性允许我们对元素进行旋转.缩放.移动或倾斜. 通过 CSS3 2D转换 ...
- css3动画简单应用
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- css3学习--css3动画详解一(animation属性）
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- 浅谈CSS3动画的凌波微步--steps()
背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...
随机推荐
- fiddler抓包 IOS11以上系统
想要使用fiddler对iphone X进行抓包,按照以前的配置方法,走一遍.还是抓不成,原来是因为IOS11操作系统中,安装完证书之后,还需要再手动信任证书才能正常抓包. 以下内容来自:https: ...
- BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会 树形DP + 带权重心
Description Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 N(1<=N<=100,0 ...
- vue点击实现 路由的跳转
点击按钮实现路由的跳转 <div @click="gotoMenu">按钮</div> 实现跳转 methods: { gotoMenu(){ //跳转到上 ...
- 【剑指Offer】15、反转链表
题目描述: 输入一个链表,反转链表后,输出新链表的表头. 解题思路: 本题比较简单,有两种方法可以实现:(1)三指针.使用三个指针,分别指向当前遍历到的结点.它的前一个结点以及后一个结 ...
- shell脚本编程及bash特性
bash特性及bash脚本编程初步 终端,附着在终端的接口程序; GUI: KDE,GNome,Xfce CLI: /etc/shells bash的特性: 命令行展开: ~,{} 命令别名: ali ...
- 46.object类型
主要知识点 1.field分类 2.object field类型的存储 一.field类型分类 1.multivalue field { "tags": [ "tag1& ...
- .net 单元测试
都说测试驱动开发,但是想写好单元测试其实不容易,不是因为测试用例难以构造,而是因为很多时候方法非常复杂 其中部分测试想要完成就十分费力,其中让人崩溃的地方主要如下: 实例私有函数 实例静态私有函数 十 ...
- dubbo-源码阅读之dubboSpi实现原理
dubboSPI实现思想跟javaspi的思想差不多javaspi是ServiceLoad 而dubbo自己写的是ExtensionLoader SPI接口定义 @Documented @Retent ...
- JVM常用参数(内存分配 内存回收日志)
内存监控 -verbose:gc 测试代码 public static void main(String[] args){ List<Classes> classes=new Array ...
- i=i+1，i+=1与i++的区别
1. i=i+1 a.读取右i的地址 b,i=1 c.读取左i的地址 d. 值赋给左i 2.i+=1 a.读取左i的地址 b.i+1 c.值给i 3.i++ a.读取右i的地址 b.值加1