css3动画 keyframes与transform_keyframe transform-origin-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44543271/article/details/86619779

本文由江金燕撰写，介绍了使用开发工具DW进行CSS3动画制作，重点探讨了keyframes和transform属性，详细阐述了如何创建和应用CSS3动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：DW CSS3动画

作者：江金燕

撰写时间：2019、1、23


下面是我用DW来写一个css3动画、主要是关键帧keyframes与transform的结合.

 

1、 这是我制作效果图的代码部分  主要的就是一个简单是盒子里面有一个 由span标签制作出来的小圆点

2、 设计涉及的元素包括以下几点

3、transform-origin:rotate;/*原点*/

    transition-duration:4s;/*动画时长*/

    transition-delay:
1s;/*延迟*/

       

transform: rotate(360deg);/

animation-name:animation;/*调用动画

 animation-iteration-count:infinite;
 
下面是代码部分
             

 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190124001947384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzI3MQ==,size_16,color_FFFFFF,t_70)
                        
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190124002028222.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190124002007411.png)
 
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190124002043786.png)
  
  
  
  
  
  
  
  
  
  
  
 
 
 

 

 

 


             

 

          
 
  

 

1、 以下