<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现立体旋转的文字</title>
<style type="text/css">
body{
background:#000; /*设置页面背景颜色*/
}
h1{
margin-top:100px; /*设置元素上外边距*/
text-align:center; /*设置文字居中*/
color:#00FFFF; /*设置文字颜色*/
font-size:64px; /*设置字体大小*/
-webkit-transform-style:preserve-3d; /*设置元素保留3D位置*/
-webkit-animation:run ease-in-out 9s infinite; /*设置动画*/
}
@-webkit-keyframes run{ /*创建动画*/
0%{
-webkit-transform:rotateX(-5deg) rotateY(0);
}
50%{
-webkit-transform:rotateX(0) rotateY(180deg);
}
100%{
-webkit-transform:rotateX(5deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<h1>成功属于立刻行动的人</h1>
</body>
</html>
Xiuno BBS开源程序交流论坛
