纯css3实现圆点围绕圆圈匀速无限旋转

最新推荐文章于 2024-05-14 16:37:25 发布
最新推荐文章于 2024-05-14 16:37:25 发布
阅读量1w 收藏 14
点赞数 5
分类专栏： css 文章标签： css3实现圆点围绕 css圆点旋转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/musclemen/article/details/78728563
版权

这个东西只是一个思路，大部分的效果都是通过js实现的，但是这里通过css3实现，其实效果要好得多，而且我建议很多效果如果可以通过css实现，要比js实现的效果要好

这里写图片描述

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8" />  
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />  
    <title>Document</title>  
    <style
最低0.47元/天 解锁文章
musclemen
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS3实现3D立方体旋转动画特效代码
03-20
纯CSS3实现3D立方体旋转动画是一款3d魔方旋转立方体动画特效。
纯css3实现螺旋状动态旋转导航下拉菜单
06-12
css3实现的导航菜单代码 不需要额外的js实现的动态效果 占用客户端内存极低 当鼠标悬停在一级导航上，二级导航呈现螺旋状效果下拉展示 使用方法： 1、引入lanrenzhijia.css样式 2、将index.html中的...
css3 animation 实现点绕圈 转圈效果
weixin_53898445的博客
11-23 1142
关键：转的不是点 是点所在的div（此div与圆重叠且宽高相等）
css实现围绕中心进行圆形旋转
最新发布
今晚吃火锅的博客
05-14 430
css animation实现围绕圆心旋转动效
css3实现椭圆轨迹旋转
weixin_34208185的博客
10-27 3146
最近需要实现如下效果 最开始用css3D旋转写，只能实现如下效果 没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊 没法用3d实现只能转向2d了，只要实现按椭圆旋转就ok了 X轴Y轴在一个矩形内移动 路径为斜线 .ball { animation: animX 2s li...
css3实现圆环的3D倾斜旋转
柚稚的博客
12-14 3682
**需求描述：**实现圆环的3D旋转效果 圆环是正圆形的， 实现思路： 代码示意： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, ...
css实现椭圆绕圈动画
苏苏就是小苏苏的博客
09-07 3132
css实现椭圆绕圈动画，rotate3D
html转动的圆圈,CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)
weixin_31796803的博客
05-30 2766
我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。在这里我们不得不克服几个问题：如何定义html如何悬停定位菜单元素在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。下面就让我们开始今天的教程吧第一步：构建HTML在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：每个顶部的矩形框都与下面大圆中的一...
css 围绕椭圆轨迹旋转
weixin_43962877的博客
10-28 3648
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { display: flex; just...
纯css3实现圆点加载动画特效源码.zip
11-09
通过这种方式，我们创建了一个纯CSS3实现的圆点加载动画。这种效果不仅适用于网页加载，还可以用在其他需要指示进度或等待的场景中。在实际开发中，可以根据需求调整圆点数量、颜色、动画速度等参数，以满足各种设计...
CSS3实现光感圆圈动画特效代码
03-20
在CSS3中，实现光感圆圈动画特效是一种常见的网页设计技术，它可以为网页增添动态美感，提升用户体验。本文将详细解析如何利用CSS3的特性来创建这种效果。 首先，我们要了解CSS3中的关键帧动画（@keyframes）。这是...
纯CSS3实现3D旋转书本效果
09-27
而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用，接下来通过本文给大家介绍CSS3实现3D旋转书本效果，需要的朋友一起学习
纯css3 地球轨迹图 球围着椭圆旋转
qq_39650950的博客
03-25 959
<div class="earth-wrap"> <div class="ring ring1"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> ...
css圆环的六种实现方式
逝水年华的博客
02-27 4771
1.通过伪类实现 .circle1{ position: relative; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background: white; ...
css数学圆与环教程,CSS3 简单的圆环环绕
weixin_36155754的博客
08-03 335
CSS语言：CSSSCSS确定@-webkit-keyframes openUp2 {50% {height: 100px;top: 45%;border: 2px solid #369; } }@-webkit-keyframes bodySpin {0% {-webkit-transform: rotate(0deg); }100% {-webkit-transform: rotate(360...
CSS——一个圆点绕着另一个圆点转动(animation动画中rotate使用)
我是我
06-21 4927
1.要实现的效果 2. 实现思路 一个容器画出运动轨迹，设置宽高和border-radius，并relative定位 一个中心点，绝对定位至圆心处 一个移动点，固定在某处，跟着外部容器一起转动 animation + transform:rotate的使用 3.实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
css3 阴影、文字旋转、圆角、投影
c1552182083的博客
09-29 774
6、文字加阴影 text-shadow:5px 2px 6px #000;       http://www.divcss5.com/css3-style/c734.shtml 文字旋转 .nav a{display:inline-block;-webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s
js+css3围绕中心圆形旋转动画js特效
ICode联盟
05-09 1348
下载地址 js+css3圆形旋转动画特效，鼠标悬停的时候会暂停，离开的时候又继续旋转。 dd:
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
weixin_37487831的博客
01-30 1173
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate            用法：transform: rotate(45deg);            共一个参数“角...
纯css实现炫酷抖音女友3d旋转相册特效
05-11
实现炫酷抖音女友3D旋转相册特效，需要掌握CSS3的一些基本动画和转换属性。首先需要准备照片，然后将照片放在一个容器中，设置容器的宽度、高度、视距、景深。接下来，需要使用CSS3的旋转属性将照片进行旋转，同时使用缩放属性进行3D效果的实现。最后再使用CSS3的动画属性和过渡属性，使照片在旋转的过程中呈现出平滑、连贯的效果。具体实现步骤和样式代码如下所示： 1. 创建一个容器，设置容器的宽度、高度、视距和景深。 ``` .container { width: 600px; height: 400px; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } ``` 2. 在容器中添加多个照片，将它们定位在正中心，并设置它们的宽度和高度。 ``` .photo { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; width: 400px; height: 300px; background-size: cover; background-position: center center; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } ``` 3. 使用CSS3的旋转属性，使照片在Z轴上进行旋转，并使用缩放属性使照片产生3D效果。 ``` .photo:nth-child(1) { transform: rotateY(0deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(0deg) translateZ(250px) scale(0.8); } .photo:nth-child(2) { transform: rotateY(60deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(60deg) translateZ(250px) scale(0.8); } .photo:nth-child(3) { transform: rotateY(120deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(120deg) translateZ(250px) scale(0.8); } .photo:nth-child(4) { transform: rotateY(180deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(180deg) translateZ(250px) scale(0.8); } .photo:nth-child(5) { transform: rotateY(240deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(240deg) translateZ(250px) scale(0.8); } .photo:nth-child(6) { transform: rotateY(300deg) translateZ(250px) scale(0.8); -webkit-transform: rotateY(300deg) translateZ(250px) scale(0.8); } ``` 4. 使用CSS3的动画属性和过渡属性，使照片具有平滑、连贯的旋转效果。 ``` .photo:hover { animation: rotate 10s infinite linear; -webkit-animation: rotate 10s infinite linear; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); } } ``` 这样就可以实现抖音女友3D旋转相册的特效了。通过使用CSS3的旋转、缩放、动画和过渡属性，可以轻松实现多种炫酷的效果，为网页添加生动、有趣的视觉体验。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值