css3动画的实例讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: skyblue; }
.box1{
width: 100px;
height: 100px;
background: skyblue;
/*transition: 1s;*//*过渡 需要事件触发*/
/*使用animation调用关键帧*/
/*animation:mz 3s;综合写法*/
animation-name: mz2;/*关键帧名字 动画名*/
animation-duration: 2s;/*关键帧时长 总运动时间*/
animation-delay: 3s;/*关键帧延迟时间*/
animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/
animation-direction: reverse;/*运动方向*/
animation-direction: alternate;/*先正向再反向*/
animation-direction: alternate-reverse;
animation-timing-function: ease;/*运动使用的类型*/
animation: mz2 2s 1s linear infinite; }
.box:hover .box1{
animation-play-state: running;/*鼠标移入暂停*/
}
/*定义动画*/
@keyframes mz{
from{margin-left: 0;}
to{
margin-left: 500px;
}
}
@keyframes mz2{
0%{/*初始状态*/
margin-left: 0px;
margin-bottom: 0px;
}
25%{
margin-left: 500px;
margin-top: 0px;
}
50%{
margin-left: 500px;
margin-top: 400px;
}
75%{
margin-left: 0px;
margin-top: 400px;
}
100%{
margin-left: 0px;
margin-top: 0px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</body>
</html>
css3动画的实例讲解的更多相关文章
- css3动画实例测试
1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- 第八十三节，CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介 CSS3提 ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
随机推荐
- Java——倒序输出Map集合
package com.java.test.a; import java.util.ArrayList; import java.util.LinkedHashMap; import java.uti ...
- async/await 内幕【译文】
C# Under the Hood: async/await 原文地址:https://www.markopapic.com/csharp-under-the-hood-async-await/ 前言 ...
- 如何利用 Python 爬虫实现给微信群发新闻早报？（详细）
1. 场景 经常有小伙伴在交流群问我,每天的早报新闻是怎么获取的? 其实,早期使用的方案,是利用爬虫获取到一些新闻网站的标题,然后做了一些简单的数据清洗,最后利用 itchat 发送到指定的社群中. ...
- Java实现 LeetCode 72 编辑距离
72. 编辑距离 给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字 ...
- Java实现 LeetCode 65 有效数字
65. 有效数字 验证给定的字符串是否可以解释为十进制数字. 例如: "0" => true " 0.1 " => true "abc&q ...
- java实现第三届蓝桥杯源码变换
源码变换 这道题因为有一些html语言在编写的时候不会显示出来,所以就用代码格式把题目写出来 [编程题](满分22分) 超文本标记语言(即HTML),是用于描述网页文档的一种标记语言. HTML通过文 ...
- Java实现第九届蓝桥杯阶乘位数
阶乘位数 题目描述 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞&qu ...
- java实现第九届蓝桥杯最大乘积
最大乘积 把 1~9 这9个数字分成两组,中间插入乘号, 有的时候,它们的乘积也只包含1~9这9个数字,而且每个数字只出现1次. 比如: 984672 * 351 = 345619872 98751 ...
- java实现第五届蓝桥杯奇怪的分式
奇怪的分式 题目描述 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1.png) 老师刚想批 ...
- svg 贝塞尔曲线图解（记录）
path路径绘制中,绘制贝塞尔曲线的命令包括: Q 二次贝赛尔曲线 x1,y1 x,y T 平滑二次贝塞尔曲线 x,y C 曲线(curveto) x1,y1 x2,y2 x,y S 平滑曲线 x2, ...