css3动画的"消失"””
2017-08-09 22:28
239 查看
今天做了一件特别丢人的事情,用css3写一个最基础最简单的动画
元素从左上角开始,到200px
处转换成圆形 到400px处转换成方形
第一次写的时候,我的代码是这样写的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
top: 0;
animation:mobbile 3s;
}
@keyframes mobbile{
0%{
left: 0;
background-color: #FFA300;
}
50%{
left: 200px;
border-radius: 50%;
background-color: #0f0;
}
100%{
left: 400px;
background-color: #00f;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果是每当这个动画执行结束之后,这个div就会“消失”,然后我就反复的检查我的代码,看一下是不是哪儿搞错了,结果是看了一遍又一遍都没有问题啊,那这是咋回事啊,没办法,于是我就在这个div里加了文本,结果发现当动画执行结束之后,这个div并没有消失,只是没有了背景色了而已,然后再回去看自己的代码,只想说一句,哎呀我去!自己把自己给坑住了,所以在以后写东西的时候,即使再简单,再基础,也要细心一点,认真一点。
下面是我改后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
top: 0;
animation:mobbile 3s;
}
@keyframes mobbile{
0%{
left: 0;
background-color: #FFA300;
}
50%{
left: 200px;
border-radius: 50%;
background-color: #0f0;
}
100%{
left: 400px;
background-color: #00f;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素从左上角开始,到200px
处转换成圆形 到400px处转换成方形
第一次写的时候,我的代码是这样写的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
top: 0;
animation:mobbile 3s;
}
@keyframes mobbile{
0%{
left: 0;
background-color: #FFA300;
}
50%{
left: 200px;
border-radius: 50%;
background-color: #0f0;
}
100%{
left: 400px;
background-color: #00f;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果是每当这个动画执行结束之后,这个div就会“消失”,然后我就反复的检查我的代码,看一下是不是哪儿搞错了,结果是看了一遍又一遍都没有问题啊,那这是咋回事啊,没办法,于是我就在这个div里加了文本,结果发现当动画执行结束之后,这个div并没有消失,只是没有了背景色了而已,然后再回去看自己的代码,只想说一句,哎呀我去!自己把自己给坑住了,所以在以后写东西的时候,即使再简单,再基础,也要细心一点,认真一点。
下面是我改后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
top: 0;
animation:mobbile 3s;
}
@keyframes mobbile{
0%{
left: 0;
background-color: #FFA300;
}
50%{
left: 200px;
border-radius: 50%;
background-color: #0f0;
}
100%{
left: 400px;
background-color: #00f;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
相关文章推荐
- 百余淘宝刷单手被拖欠"工钱" 组织者"玩消失"
- 纯CSS3 3D图片向上翻转渐隐消失动画DEMO演示
- CSS3 实现的一个简单的"动态主菜单" 示例[转]
- 在 Windows 8 中找回消失的"休眠"菜单
- 利用html 动画做出一个 "王" 字
- 整合大量开源库项目(六)ListView动画,Activity"抽象化",顺便提一提”抽象类“And"接口"
- CAGradientLayer实现"滑动来解锁"动画效果
- 复制"尹琼洁"的博客 webkit-animation css3 动画
- "Javascript高性能动画与页面渲染"笔记
- 整合大量开源库项目(六)ListView动画,Activity"抽象化",顺便提一提”抽象类“And"接口"
- ps单引号的"消失"
- "Android中的动画"-Android面试必问"精华技能点"汇总
- CSS3 实现的一个简单的"动态主菜单" 示例
- 未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0"提供程序的解决方法
- @SuppressWarnings({"unchecked","rawtypes"})
- HTML5+CSS3鼠标移入移出图片生成随机动画
- 对于"第一次创业者"应该给什么样的建议
- "QString" to "const char*"
- "光棍节"的来历
- CSS3的transition动画功能