Css3旋转与位移

文献种类：专题技术文献；
开发工具与关键技术： DWcss3旋转与位移
作者：车华宇 ；年级：1802 ；撰写时间：2019 年 1 月 20 日

              Css3旋转与位移

介绍以下css3动画

如图所示物体在边框上做旋转运动，实现动画效果关键代码如下：
在himl的位移代码span内添加旋转代码sunny

位移关键代码： @keyframes around { 0%{ transform:translateX(0); } 25% { transform: translate(260px); } 50% { transform: translate(260px, 260px); } 75% { transform:translate(0, 260px); } 100% { transform: translateY(0); } } div span { display: block; animation-name:around; animation-duration:10s; animation-timing-function:ease; animation-delay:.3s; animation-iteration-count:infinite; } 旋转关键代码： .sunny{ -webkit-animation: sunny 1s linear infinite; animation: sunny 1s linear infinite; } @-webkit-keyframes sunny { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes sunny { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }