css动画教程

本篇文章主要向大家介绍如何使用css制作简单的动画,感兴趣的小伙伴参考下.

案例一:

nbsp;html> 【创想鸟】  div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-moz-keyframes myfirst /* Firefox */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}

登录后复制

案例二:

nbsp;html> 【创想鸟】  div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */}@keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}

登录后复制

相关推荐:

立即学习“前端免费学习笔记(深入)”;

PHP全站开发工程师-扩展之CSS动画和animate.css和wow.js

PHP全站开发工程师-扩展之CSS动画和animate.css和wow.js

立即学习“前端免费学习笔记(深入)”;

PHP全站开发工程师-扩展之CSS动画和animate.css和wow.js

以上就是css动画教程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2897562.html

(0)
上一篇 2025年3月10日 23:25:25
下一篇 2025年3月10日 23:25:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论