zoukankan
html css js c++ java
CSS3动画效果示例
CSS3动画遵循@kwyframes规则,规定了动画的名称、时长。
1、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画示例</title>
<style>
*{margin: 0;padding: 0}
section{100px;height: 100px;
background-color: coral;
position: relative;
animation: anim 3s infinite alternate;
-webkit-animation:anim 3s infinite alternate;
-moz-animation: anim 3s infinite alternate;
-o-animation: anim 3s infinite alternate;
margin: 50px auto; }
@keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-webkit-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-moz-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-o-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
</style>
</head>
<body>
<section></section>
</body>
</html>
2.示例动画效果
查看全文
相关阅读:
Laravel 学习笔记之文件上传
Composer学习
Laravel 学习笔记之数据库操作——Eloquent ORM
PHP至Document类操作 xml 文件
使用promise构建一个向服务器异步数据请求
遍历DOM树
关于tp验证码模块
layui 封装自定义模块
js进阶之路,关于UI资源的优化(转载)
关于js 重载
原文地址:https://www.cnblogs.com/qikeyishu/p/7394050.html
最新文章
Scrapy-Redis分布式爬虫常规操作
敏捷开发简单介绍
Scrapy爬虫错误日志汇总
python之字符串反转
转:20分钟教你使用hexo搭建github博客
转载 git Unknown SSL protocol error in connection to github.com:443
HTML5 拖放(Drag 和 Drop)
nodejs之socket.io模块——实现了websocket协议
SSE推送数据
websocket
热门文章
Web Workers
JavaScript预编译原理分析
二叉树
URL末尾处的斜杠“/”
单点登录
Ionic创建混合App(二)
Javascript 学习笔记(二)
Javascript 学习笔记(一)
ECMAScript 6 学习笔记(二)
ECMAScript 6 学习笔记(一)
Copyright © 2011-2022 走看看