文献种类:专题技术文献;
开发工具与关键技术: DWcss3旋转与位移
作者:车华宇 ;年级:1802 ;撰写时间:2019 年 1 月 20 日
Css3旋转与位移
介绍以下css3动画
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/16ee6b90ad911c94cd01a479e699931b.png)
如图所示物体在边框上做旋转运动,实现动画效果关键代码如下:
在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); } }