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 ...
随机推荐
- uni-app判断各大平台的语法
uni-app是一款强大的前端框架,它除了pc端其他都可以实现,打包原生app.手机h5页面,微信小程序, 但是有一个问题就是本生的app和微信小程序是有一定的区别的,因为app有标题栏,返回键,而微 ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- Apex语言（九）类的方法
1.方法 方法是对象的行为.如下表: 看书,编程,打球就是方法. 2.创建方法 [格式] 访问修饰符 返回值类型 方法名(形式参数列表){ 方法体; } 访问修饰符:可以为类方法指定访问级别. 例如, ...
- Js 删除前弹出确认框
<td align="center" valign="middle" class="black3"> <c:if test ...
- 6——Z 字形变换（ZigZag Conversion）
题目描述将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 “LEETCODEISHIRING” 行数为 3 时,排列如下: L C I RE T O E S ...
- kmp板子
kmp 容易理解板子 详情见知乎 算法思想 对模式串求PMT,但实际上nxt数组是PMT向前移动一位 nxt数组含义:记母串为m[],模式串为p[]; m[i]与p[j]比较失配,需要比较m[i]与p ...
- 【剑指Offer】3、从尾到头打印链表
题目描述: 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 解题思路: (三种方法:借助栈.递归.列表的首位插入) 从头到尾打印链表比较简单,从尾到头很自然的可以 ...
- [Ynoi2015]我回来了
题目大意: 给定一张无向无权图,每次给定若干个二元组\((x_i,y_i)\),定义点\(u\)满足条件,当且仅当存在\(i\),并满足\(dist(u,x_i)\leqslant y_i\)(\(d ...
- ZOJ 2699 Police Cities
Police Cities Time Limit: 10 Seconds Memory Limit: 32768 KB Once upon the time there lived a ki ...
- asp怎么实现二级联动下拉菜单
rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...