<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title>css旋轉動畫</title>
????????<style>
????????????.rotateRect{
????????????????position:?absolute;
????????????????left:?300px;
????????????????top:?300px;
????????????????animation:?rotone?2s?linear?infinite;
????????????????transform-origin:?150px?150px;
????????????}
????????????.rotateRect?em{
????????????????display:?block;
????????????????width:?50px;
????????????????height:?50px;
????????????????background-color:?#FF8C00;
????????????????animation:?rottwo?2s?linear?infinite;????
????????????}
????????????@keyframes?rotone{
????????????????from{transform:?rotate(0);}
????????????????to{transform:?rotate(360deg);}
????????????}
????????????@keyframes?rottwo{
????????????????from{transform:?rotate(360deg);}
????????????????to{transform:?rotate(0);}
????????????}
????????</style>
????</head>
????<body>
????????<div?class="rotateRect"><em></em></div>
????</body>
</html>感覺背景色晃動是什么問題?還有這個嵌套一個em,一個正著轉,一個反轉,然后就不轉了,什么原因哦?很有意思的東西要是能有人把transform-origin屬性給我說明白就好了
- 1 回答
- 1 關注
- 1752 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消