css3动画简单案例

简单案例1：

<body><div>叶落森</div>
</body>

div
{width:100px;height:100px;background:red;animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/-webkit-animation:myfirst 5s; /* Safari and Chrome */color:yellow;text-align:center;line-height:100px
}@keyframes myfirst
{from {background:red;color:yellow}to {background:yellow;color:red}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:red;color:yellow}to {background:yellow;color:red}
}

简单案例2：

div
{width:100px;height:100px;background:red;position:relative;/*定位，为下面的top和left使用*/animation-name:myfirst;/*把 "myfirst" 动画捆绑到 div 元素*/animation-duration:5s;/*时长：5 秒。默认是 0*/animation-timing-function:linear;/*规定动画的速度曲线，匀速。默认是 "ease"。*/animation-delay:2s;/*规定动画何时开始。默认是 0。*/animation-iteration-count:infinite;/*规定动画被播放无限次数。默认是 1*/animation-direction:alternate;/*规定动画在下一周期逆向地播放。默认是 "normal"。*/animation-play-state:running;/*规定动画是否正在运行或暂停。默认是 "running"。*//* Safari and Chrome: */-webkit-animation-name:myfirst;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;
}@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;}
}

<body><div></div>
</body>

css3动画简单案例相关推荐

小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
一个小小Css3动画的案例
Css3动画开发工具与关键技术:Css3动画作者:沈金凤年级:18级(5)班撰写日期:2019年1月17日在Css3 中有三中属性是我们正常用的:transform,transition,a ...
工具人（超级赛亚人）学长写给超级可爱学妹的web简单课设（css3 动画 + 简单樱花飘落效果）
就是老工具人了. 学校web初级课程设计. 大概构思加完成1.5小时. 就这样. 大家想看拿走. 附上git地址:git地址,打包带走部分页面效果展示: 只是一个简单web课程,后续会上传雪花飘落 ...
vue使用高德地图制作小车轨迹回放动画简单案例
首先在根目录public中的index.html引入高德地图 <script type="text/javascript" src="https://webapi. ...
css3案例分析,CSS3动画/动画库以及案例分析（上）
在这html5遍天下的年代,越来越多的网页也用到了css3的动画效果,这让原本我们静态的页面有了更多的活力.最近也一直在做这方面的页面,有些小小的心得,和诸位分享下. CSS3的动画绝对是很赞的,不仅 ...
18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
【CSS3动画】从简单动画到实现平抛运动和弹跳效果-贝塞尔曲线的利用
基础概念如果你几乎不了解CCS3动画,下面会介绍一些基本概念,熟悉的朋友可以跳过基础概念部分. 假想想要一个正方形的盒子动起来,我们分别需要在html和css文件中进行设置.html比较简单,创建一 ...

css3动画简单案例

css3动画简单案例相关推荐

最新文章

热门文章