CSS3来绘制一个3维立体游泳圈_Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果...

最新推荐文章于 2022-06-20 19:10:06 发布
最新推荐文章于 2022-06-20 19:10:06 发布
阅读量453 收藏
点赞数
文章标签： CSS3来绘制一个3维立体游泳圈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28737603/article/details/111891436
版权
这篇博客介绍了如何利用CSS3来绘制一个3D立体的游泳圈，并通过CSS3动画实现旋转效果。作者详细展示了计算角度、设置属性以及应用关键帧动画的步骤，创建了一个卫星围绕旋转的视觉效果。
摘要由CSDN通过智能技术生成

const outWidth = $(".out_circle").width()

$(".out_circle").height(outWidth)

// 获取半径

const rWidth = outWidth / 2

// 获得弧度

const radian = 2 * Math.PI / 360 * 60

// 长边

const langWidth = Math.sin(radian) * rWidth

// icon的长度

const iconWidth = $(".img_top").width()

$(".img_top").css({

top: 0 - iconWidth / 2,

left: rWidth - iconWidth / 2

})

$(".img_bottom").css({

top: rWidth * 1.5 - iconWidth / 2,

left: rWidth - langWidth - iconWidth / 2

})

$(".img_bottom2").css({

top: rWidth * 1.5 - iconWidth / 2,

left: outWidth - (rWidth - langWidth) - iconWidth / 2

})

css(sass格式)内容：

.star-animate {

width: 100%;

height: 100%;

background: url("~Images/animateList/1/bg.jpeg");

background-size: cover;

.out_circle{

width: 400px;

height: 400px;

margin: auto;

border-radius:50%;

position: relative;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

perspective: 30000;

-webkit-perspective: 30000;

transform: rotateX(76deg);

-webkit-transform: rotateX(76deg); /* Safari and Chrome */

}

.center-img1 {

animation: rotate_change1 13s linear infinite;

-webkit-animation:rotate_change1 13s linear infinite;

-moz-animation:rotate_change1 13s linear infinite;

-o-animation:rotate_change1 13s linear infinite;

}

.center-img1 {

position: absolute;

left: 6%;

top: 25.5%;

width: 88%;

height: 49%;

transform: rotateX(70deg);

-webkit-transform: rotateX(70deg); /* Safari and Chrome */

}

.test-div {

position: absolute;

width: 200px;

height: 625px;

background: red;

left: 128px;

top: -71px;

}

.nav_circle{

width:100%;

height:100%;

float:left;

position:absolute;

top:0;

text-align:center;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

}

@keyframes rotate_change1{

0%{

transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

}

100%{

transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

}

}

@keyframes rotate_change2{

0%{

transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

opacity: 0;

}

5%{

opacity: 1;

}

17%{

opacity: 1;

}

29%{

opacity: 1;

}

34%{

opacity: 0;

}

50%{

opacity: 0;

}

67%{

opacity: 0;

}

83%{

opacity: 0;

}

100%{

opacity: 0;

transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

}

}

@keyframes rotate_change3{

0%{

transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

opacity: 0;

}

17%{

opacity: 0;

}

34%{

opacity: 0;

}

50%{

opacity: 0;

}

67%{

opacity: 0;

}

72%{

opacity: 1;

}

83%{

opacity: 1;

}

95%{

opacity: 1;

}

100%{

opacity: 0;

transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

}

}

.img_top img, .img_bottom img, .img_bottom2 img {

width: 100px;

height: 100px;

}

.img_top,.img_bottom,.img_bottom2{

position: absolute;

z-index:1;

transform:rotateX(70deg);

-ms-transform:rotateX(70deg);

}

.nav_circle .img a{

position: absolute;

top:10px;

left:94px;

width: 52px;

}

.r1{

animation: rotate 13s linear infinite;

-webkit-animation:rotate 13s linear infinite;

-moz-animation:rotate 13s linear infinite;

-o-animation:rotate 13s linear infinite;

}

.r1 .img_top{

animation:rotate_c1 13s linear infinite;

-webkit-animation:rotate_c1 13s linear infinite;

}

.r1 .img_bottom{

animation:rotate_c2 13s linear infinite;

-webkit-animation:rotate_c2 13s linear infinite;

}

.r1 .img_bottom2{

animation:rotate_c3 13s linear infinite;

-webkit-animation:rotate_c3 13s linear infinite;

}

/* 外圈放大动画 */

@keyframes circle_rotate{

0%{

width: 120px;

height: 120px;

margin-left: -10px;

margin-top: -10px;

}

100%{

width: 100px;

height: 100px;

margin-left: 0px;

margin-top: 0px;

}

}

@keyframes rotate{

0%{

transform:rotate(0deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) skew(0deg) scale(1);

-moz-transform:rotate(0deg) skew(0deg) scale(1);

-webkit-transform:rotate(0deg) skew(0deg) scale(1);

-o-transform:rotate(0deg) skew(0deg) scale(1);

}

100%{

transform:rotate(360deg) skew(0deg) scale(1);

-ms-transform:rotate(360deg) skew(0deg) scale(1);

-moz-transform:rotate(360deg) skew(0deg) scale(1);

-webkit-transform:rotate(360deg) skew(0deg) scale(1);

-o-transform:rotate(360deg) skew(0deg) scale(1);

}

}

@keyframes rotate-center{

0%{

transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(0deg) rotateX(-70deg) skew(0deg) scale(1);

}

100%{

transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-ms-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-moz-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-webkit-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

-o-transform:rotate(-360deg) rotateX(-70deg) skew(0deg) scale(1);

}

}

@keyframes rotate_c1{

0%{

transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);

-ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);

-moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);

-webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);

-o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.01);

}

50%{

transform:rotateX(-70deg) rotateY(180deg) skew(0deg) scale(1);

-ms-transform:rotateX(-70deg) rotateY(180deg) skew(0deg) scale(1);

-moz-transform:rotateX(-70deg) rotateY(180deg) skew(0deg) scale(1);

-webkit-transform:rotateX(-70deg) rotateY(180deg) skew(0deg) scale(1);

-o-transform:rotateX(-70deg) rotateY(180deg) skew(0deg) scale(1);

}

100%{

transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.01);

-ms-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.01);

-moz-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.01);

-webkit-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.01);

-o-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.01);

}

}

@keyframes rotate_c2{

0%{

transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

}

34%{

transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);

-ms-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);

-moz-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);

-webkit-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);

-o-transform:rotateX(-70deg) rotateY(120deg) skew(0deg) scale(0.01);

}

83%{

transform:rotateX(-70deg) rotateY(300deg) skew(0deg) scale(1);

-ms-transform:rotateX(-70deg) rotateY(300deg) skew(0deg) scale(1);

-moz-transform:rotateX(-70deg) rotateY(300deg) skew(0deg) scale(1);

-webkit-transform:rotateX(-70deg) rotateY(300deg) skew(0deg) scale(1);

-o-transform:rotateX(-70deg) rotateY(300deg) skew(0deg) scale(1);

}

100%{

transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-ms-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-moz-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-webkit-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-o-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

}

}

@keyframes rotate_c3{

0%{

transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-ms-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-moz-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-webkit-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

-o-transform:rotateX(-70deg) rotateY(0deg) skew(0deg) scale(0.67);

}

17%{

transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);

-ms-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);

-moz-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);

-webkit-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);

-o-transform:rotateX(-70deg) rotateY(60deg) skew(0deg) scale(1);

}

67%{

transform:rotateX(-70deg) rotateY(240deg) skew(0deg) scale(0.01);

-ms-transform:rotateX(-70deg) rotateY(240deg) skew(0deg) scale(0.01);

-moz-transform:rotateX(-70deg) rotateY(240deg) skew(0deg) scale(0.01);

-webkit-transform:rotateX(-70deg) rotateY(240deg) skew(0deg) scale(0.01);

-o-transform:rotateX(-70deg) rotateY(240deg) skew(0deg) scale(0.01);

}

100%{

transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-ms-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-moz-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-webkit-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

-o-transform:rotateX(-70deg) rotateY(360deg) skew(0deg) scale(0.67);

}

}

.line-box {

position: absolute;

width: 300px;

height: 200px;

top: 35%;

right: 1%;

}

/* 标题动画 */

@keyframes des1_appear{

0%{

opacity: 0;

}

17%{

opacity: 0;

}

34%{

opacity: 0;

}

39%{

opacity: 1;

}

50%{

opacity: 1;

}

62%{

opacity: 1;

}

67%{

opacity: 0;

}

83%{

opacity: 0;

}

100%{

opacity: 0;

}

}

@keyframes des2_appear{

0%{

opacity: 0;

}

5%{

opacity: 1;

}

17%{

opacity: 1;

}

29%{

opacity: 1;

}

34%{

opacity: 0;

}

50%{

opacity: 0;

}

67%{

opacity: 0;

}

83%{

opacity: 0;

}

100%{

opacity: 0;

}

}

@keyframes des3_appear {

0%{

opacity: 0;

}

17%{

opacity: 0;

}

34%{

opacity: 0;

}

50%{

opacity: 0;

}

67%{

opacity: 0;

}

72%{

opacity: 1;

}

83%{

opacity: 1;

}

95%{

opacity: 1;

}

100%{

opacity: 0;

}

}

@keyframes snap_line1_appear{

0%{

width: 0px;

}

17%{

width: 0px;

}

34%{

width: 0px;

}

39%{

width: 0px;

}

50%{

width: 140px;

}

62%{

width: 140px;

}

67%{

width: 0px;

}

83%{

width: 0px;

}

100%{

width: 0px;

}

}

@keyframes snap_line2_appear{

0%{

width: 0px;

}

5%{

width: 0px;

}

17%{

width: 140px;

}

29%{

width: 140px;

}

34%{

width: 0px;

}

50%{

width: 0px;

}

67%{

width: 0px;

}

83%{

width: 0px;

}

100%{

width: 0px;

}

}

@keyframes snap_line3_appear {

0%{

width: 0px;

}

17%{

width: 0px;

}

34%{

width: 0px;

}

50%{

width: 0px;

}

67%{

width: 0px;

}

72%{

width: 0px;

}

83%{

width: 140px;

}

95%{

width: 140px;

}

100%{

width: 0px;

}

}

}

漫步云间ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Div的3D图片的360度旋转
123456
04-07 1375
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现Div的3D图片的360度旋转-岳瑞涛</title> <style> *{ font-size: 30px
html5行星环绕,CSS3 星球环绕动画
weixin_34161139的博客
06-30 885
body {margin:0;padding:0;background:#080e24 url(./bg.jpg) repeat;}ul {width:600px;height:600px;margin:40px auto;position:relative;list-style:none;}ul li {border:2px solid #394057;position:absolute;lef...
纯css3卫星信息传送图形动画特效代码
06-01
纯css3创意的卫星旋转信息传送图形动画，互联网全球信息发送图形动画特效。
Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
weixin_33985679的博客
05-28 1194
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效...
三维空间旋转和Three.JS中的实现
weixin_34133829的博客
04-15 712
目录 三维空间的旋转方法论 欧拉角（Euler Angle） 旋转矩阵（Rotation Matrix） Three.js中旋转的实际运用 欧拉角 矩阵 利用组合物体中心轴 三维空间中...
css3旋转的地球,旋转的地球css3
weixin_39613839的博客
08-04 277
css3果然博大精深：1.代码里面还有用box-shadow制作椭圆形阴影的效果，厉害了！之前找了好久都没找到，今天给找到了html:css:.ball .shadow {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgb...
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
12-13
复制代码代码如下:”raysDemoHolder”> <a>WebHek</a> ”rays”></div></div>最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。...
纯CSS3绘制旋转的鲜花花束动画效果源码.zip
11-20
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建一个动态的、旋转的鲜花花束动画效果。这个项目对于那些希望提升网站视觉吸引力、或者对CSS3动画感兴趣的开发者来说，是一个非常有价值的实践案例。 首先，...
轻量级CSS3立体式3D旋转动画效果特效代码
03-20
在本文中，我们将深入探讨如何实现“轻量级CSS3立体式3D旋转动画效果特效代码”。CSS3作为现代网页设计的重要工具，提供了丰富的样式和动态效果，其中3D旋转功能使得网页元素能够呈现出生动的视觉体验。这个特效在...
纯CSS3实现的3D书本旋转展览动画效果源码.zip
最新发布
11-20
【标题】中的“纯CSS3实现的3D书本旋转展览动画效果源码”表明这是一个使用CSS3技术创建的3D书本翻转动画项目。CSS3是层叠样式表的第三版，它引入了许多新的特性和功能，使得网页设计更加丰富多彩和动态。 在【描述...
模拟卫星旋转和地球自转
11-10
一个非常漂亮的用opengl模拟卫星绕地球旋转的源代码，对初学者会有帮助！
html5 canvas绘制3D地球旋转动画特效
09-08
html5 canvas绘制3D地球旋转动画特效
纯CSS3绘制太阳系行星动画运动轨迹
09-08
纯CSS3绘制太阳系行星动画运动轨迹
html旋转_html+css画旋转的太阳系
weixin_39692253的博客
12-01 103
我们先来看下效果：css部分： /* CSS 绘制太阳系各个行星运行轨迹 */ .solarsys{ width: 800px; height: 800px;; position: relative; margin: 0 auto; background...
HTML+CSS+JS-旋转地球
记录和分享属于我的“IT”时光
05-10 1150
HTML+CSS+JS-旋转地球
html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效
weixin_34470566的博客
06-19 320
CSS3 3D立方体多边形动画特效 - 代码笔记*{margin:0 auto;padding:0;}@keyframes rotate{0%{transform:rotateX(0deg) rotateY(0deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}html{background:linear-gradient(#ff0 0%,...
纯css3行星围着地球转动画
ICode联盟
06-20 426
下载地址使用css3的属性实现的行星围着地球转动画dd:
three 环绕旋转，卫星可以各个角度绕星球旋转
早晨阳光一般暖的博客
06-06 4614
three 环绕旋转，卫星可以各个角度绕星球旋转
CSS3 animation 实现地球转动
chongzhechou9149的博客
12-27 1393
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>旋转</title> <style> *{margin:0;padding:0;bo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值