CSS3实现围绕任何点来旋转-京东推荐动画

最新推荐文章于 2023-01-05 09:56:27 发布
最新推荐文章于 2023-01-05 09:56:27 发布
阅读量6.2k 收藏 6
点赞数
分类专栏： html/css 文章标签： CSS动画

之前在京东首页看到一个推荐动画

GIF.gif

觉得还是可以试试使用.其实整个效果还是比较简单的.主要还是控制动画的运作原点.

在这个动画里,我觉得比较有意思的就是这个黑点的旋转.我们这次就来实现这个效果.以为其他效果都是没难度的

我们先来看完整代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>动画</title>
   <style>
      body>div{
          width:100px;
          height:100px;
          margin: 20px auto 0;
          color:orange;
          font-size:100px;
          line-height:1;
          animation: circle 5s linear 0s infinite;
          transform-origin: 0% 300%;
      }
      div>div{
          animation: inner-circle 5s linear 0s infinite;
      }
      @keyframes circle {
          from { transform:rotate(0deg); }
          to { transform:rotate(360deg); }
      }
      @keyframes inner-circle{
           from{
               transform: rotate(360deg);
           }
       }
   </style>
</head>
<body>
  <div>
      <div>☺</div>
  </div>
</body>
</html>


重点的代码讲解


1. 设置移动外层的样式,其实外观主要是这个div

body>div


2. 重点主要在下面CSS里,设置运动的原点坐标,改变这里就可以

transform-origin: 0% 300%;


3. div>div 的CSS动画主要是保证笑脸摆正.如果不需要,当然是可以不用设置其样式的.



其实整个代码是非常简单的.要实现整个京东的那个推荐动画.大家可以尝试做一下,理解下动画.



另外一种方式实现.

我们先来看代码

Html
 <div class="smile">☺</div>


Css

.smile{

margin:100px auto;

width: 80px;

height: 80px;

font-size: 80px;

animation: action 10s linear infinite;


}

@keyframes action {

from {

transform: rotate(0deg) translate(100px) rotate(0deg);

}

to {

transform: rotate(360deg) translate(100px) rotate(-360deg);

}

}

 

 

 
 
 

 其实从代码量来说,比之前的简化了不少. HTML使用的只有一个标签,也只使用了一个动画.
 


 
 

 我们主要还是从动画入手, 在这里transform里面我们加入了三种动画,第一种和 第三保证的是笑脸能够旋转起来,保证笑脸是正脸.
 

 如果不需要正脸,可以去掉一个.
 

 
 
 

 中间那个动画是平移动画,也就是在选择的同时,笑脸做平移运动.这样就形成了围绕旋转运动.
 

 
 
 

 要确定这个围绕点,得控制笑脸的位置,我这里的代码就直接是用margin来控制的.如果需要设置不同的点,可以使用定位来控制位置.这样灵活一点
 

 
 

                

        

        

    




    

      

        

            

              
                
                  fudapeng7
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS3实现同时执行倾斜和旋转的动画效果

				
			

			

				

					01-21
				

			

		

		

			
				
先看看静态的效果，运行后的效果更好

示例代码如下
<!DOCTYPE html>
<html lang=zh-CN>
<head>
  <meta charset=UTF-8 />
 <title>css3学习</title>
 <style type=text/css>
 .d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
  -webkit-animation:abc 2s infini

			
		

	



                

              
                



	

		

			

				
					
纯CSS实现旋转相册-3D旋转-悬停效果.html

				
			

			

				

					04-18
				

			

		

		

			
				
这是一个使用纯CSS实现的旋转相册，通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器，其中包含多个img标签，每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d，使得容器内的元素可以在3D空间中进行变换。通过设置容器的transform属性为rotateY，使得容器在Y轴上进行旋转，从而实现相册图片的3D旋转效果。同时，通过设置img标签的transform属性为rotateY，使得每个图片在容器旋转时也跟随旋转，从而保持相对位置不变。当鼠标悬停在某个图片上时，通过设置该图片的transform属性为translateZ，使得该图片在Z轴上进行平移，从而实现悬停效果。整个页面的布局和样式都使用CSS实现，没有使用任何JavaScript代码。

			
		

	



                


  
              

                


	

		

			

				
					
CSS3实现大小不一的粒子旋转加载动画

				
			

			

				

					12-13
				

			

		

		

			
				
先看看效果图，像是气泡在上升：

CSS Code复制内容到剪贴板
    #load3,     
    #loader3 {     
     font-size: 20px;     
     margin: 80px 50px;     
     float: left;     
     width: 1em;     
     height: 1em;     
     border-radius: 50%;     
     position: relative;     
     text-indent: -9999em;     
     -webkit-

			
		

	





	

		

			

				
					
CSS3给图片添加旋转背景特效

				
			

			

				

					10-08
				

			

		

		

			
				
CSS3给图片添加旋转背景特效 || 鼠标悬停旋转背景特效

			
		

	



		

			
		



	

		

			

				
					
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈

				
			

			

				

					06-10
				

			

		

		

			
				
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈
用到：
margin: 100px auto;
绝对定位 position absolute; 
动画animation animation: move 2s linear infinite;
 @keyframes move {
            from{
                transform: rotateY(0deg);
            }
            to{
                transform: rotateY(360deg);
            }
        }
和 transform rotateX，rotateY，translateZ



			
		

	





	

		

			

				
					
CSS——一个圆点绕着另一个圆点转动(animation动画中rotate使用)

				
			

			

				

					我是我
				

				

					06-21
					
					4710
					
				

			

		

		

			
				
1.要实现的效果

2. 实现思路

一个容器画出运动轨迹，设置宽高和border-radius，并relative定位
一个中心点，绝对定位至圆心处
一个移动点，固定在某处，跟着外部容器一起转动
animation + transform:rotate的使用

3.实现代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="

			
		

	





	

		

			

				
					
css 3旋转

				
			

			

				

					weixin_41620458的博客
				

				

					03-08
					
					2521
					
				

			

		

		

			
				
在css3中rotate（）实现旋转。可以使div实现2D旋转和3D旋转。
2D：
transform:rotate();
它的单位属性是度（deg）。当deg为正值时，顺时针旋转；为负值时，逆时针旋转。
transform:rotate(35deg);沿着中心点旋转；
transform:rotateX(45deg);绕X轴旋转；
transform:rotateY(45deg);绕Y轴旋转；
...

			
		

	





	

		

			

				
					
2019前端面试题 CSS篇

				
			

			

				

					魏晓栋
				

				

					12-31
					
					605
					
				

			

		

		

			
				
1.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box?
content-box是W3C的标准盒模型 元素宽度+padding+border
border-box 是ie的怪异盒模型，他的元素宽度等于内容宽度 内容宽度包含了padding和border
比如有时候在元素基础上添加内边距padding或border会将布局撑破 ...

			
		

	





	

		

			

				
					
css3绕点旋转

				
			

			

				

					weixin_30599769的博客
				

				

					06-12
					
					1975
					
				

			

		

		

			
				
<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style type="text/css">			.smile{
   margin:190px auto;
   width: 80px;
   heig...

			
		

	





	

		

			

				
					
css3旋转动画

				
			

			

				

					xzx66666的博客
				

				

					11-01
					
					243
					
				

			

		

		

			
				
css3动画

			
		

	





	

		

			

				
					
CSS3实现粒子旋转伸缩加载动画

				
			

			

				

					12-13
				

			

		

		

			
				
本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下 

CSS Code复制内容到剪贴板
    #loader6 {     
      margin: 60px 50px;     
      float: left;     
      font-size: 90px;     
      text-indent: -9999em;     
      overflow: hidden;     
      width: 1em;     
      height: 1em;     
      

			
		

	





	

		

			

				
					
基于H5,CSS3及JS的四星环绕中心点旋转效果

				
			

			

				

					06-28
				

			

		

		

			
				
本效果是基于HTML5，CSS3及JavaScript实现的，实现了移动端和web端的兼容居中显示。同时，以中心图片为圆点，四周图片环绕中心图片旋转，主要使用到的技术点在于z-index以及border-radius:50%，实现效果仅供参考（其中图片请自行替换）。

			
		

	





	

		

			

				
					
css3实现一个类似秒针旋转的效果

				
			

			

				

					CherryLee_1210的博客
				

				

					07-22
					
					1199
					
				

			

		

		

			
				
效果如下图所示（没有做成gif，嘿嘿嘿）

<style>
  .second-bar-box{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 1px solid #db192a;
     position: relative;
   }

   .second-bar{
  ...

			
		

	





	

		

			

				
					
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解

					
热门推荐

				
			

			

				

					Argonaut_的博客
				

				

					01-05
					
					1万+
					
				

			

		

		

			
				
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。接下来给大家介绍一下 transition-timing-function 属性的取值吧！

			
		

	





	

		

			

				
					
html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网

				
			

			

				

					weixin_39878698的博客
				

				

					06-04
					
					1232
					
				

			

		

		

			
				
前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转.今天我们继续用另外一种方式实现.我们先来看代码HTML☺CSS.smile {margin: 100 px auto;width: 80 px;height: 80 px;font - size: 80 px;animation: action 10 s linear infinite;}@keyframes action...

			
		

	





	

		

			

				
					
css元素旋转原点,使用transform-origin属性改变元素变换原点

				
			

			

				

					weixin_29325007的博客
				

				

					08-03
					
					5075
					
				

			

		

		

			
				
使用CSS中的旋转函数可以让元素旋转指定的角度，比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：#x{margin:100px;width:150px;height:80px;background-color:#...

			
		

	





	

		

			

				
					
欧母龙PLC例程源码陶瓷厂用程序及图纸

				
			

			

				

					04-22
				

			

		

		

			
				
欧母龙PLC例程源码陶瓷厂用程序及图纸提取方式是百度网盘分享地址

			
		

	





	

		

			

				
					
node-v19.6.1-darwin-arm64.tar.xz

					
最新发布

				
			

			

				

					04-22
				

			

		

		

			
				
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。

Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。

Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。

在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。



			
		

	





	

		

			

				
					
集比赛直播、新闻资讯、数据查询为一体的APP，支持Android和iOS双平台.zip

				
			

			

				

					04-22
				

			

		

		

			
				
NBA Player是由React Native创作的集比赛直播、新闻资讯、数据查询为一体的APP，支持Android和iOS双平台

			
		

	





	

		

			

				
					
大屏css围绕中心点旋转动画

				
			

			

				

					07-20
				

			

		

		

			
				
要实现大屏围绕中心点旋转的动画，你可以使用CSS3的`@keyframes`和`transform`属性来实现。下面是一个示例代码：  HTML: ```html   内容  ```  CSS: ```css .container {  width: 100%;  height: 100vh;  display: ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值