<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: #67CF22;
margin: 100px auto;
animation: aa 1.5s ease-out infinite;
}
@keyframes aa{
0{transform: perspective(200px) rotateX(0) rotateY(0);}
50%{transform: perspective(200px) rotateX(180deg) rotateY(0);}
100%{transform: perspective(200px) rotateX(180deg) rotateY(180deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
自制css3动画
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 本文并非原创,属于摘抄性质,并有个人的加工。 一、过渡动画 过渡(transition)动画,就是从初始状态过渡到...
- 介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示 一.Keyframes介绍: ...
- 纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人...
- ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ Keyframes介绍...