CSS环绕球体的旋转文字-3D效果
2023-09-11 14:18:03 时间
项目文件结构截图
只需要一个html文件既可:
项目截图:
代码实现原理:
该示例的实现过程很简单,主要是使用了CSS3的透视、3D旋转、位移、渐变、阴影,可以说是一次比较全面的练习。
HTML部分:
<div class="wrapper">
<div class="ball"></div>
<div class="stage">
<div class="text">
这里是文字
</div>
</div>
</div>
CSS部分:
使用到的CSS属性用法:
舞台:
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
margin: 200px;
perspective: 800px;
perspective-origin: 50% 50%;
position: relative;
}
.stage {
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
球体:
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
box-shadow: 0px 55px 45px -38px rgba(0, 0, 0, .3);
}
.ball::before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
z-index: 2;
}
文字:
.text {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
white-space: nowrap;
animation: rotate 5s linear infinite;
backface-visibility: hidden;
}
文字动画:
@keyframes rotate {
from {
transform: rotateY(0deg) translateZ(100px);
}
to {
transform: rotateY(360deg) translateZ(100px);
}
}
效果预览
效果地址:rotate-text-around-the-ballCSS环绕球体的旋转文字-3D效果
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
相关文章
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- 超实用的jQuery淡入淡出焦点图插件 带3D相框
- Unity 3D 粒子系统的一点经验
- CSS - 使用CSS 3D属性来完成页面视差滚动效果。
- CSS - 工具类 tool.css
- [ReactVR] Add Shapes Using 3D Primitives in React VR
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 【汤鸿鑫 3D太极】5年目标规划(基本功、套路、实战搏击)
- [ReactVR] Add Shapes Using 3D Primitives in React VR
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- Blender 3D文字、及艺术字体、场景海报制作
- 用纯CSS实现3D立方体效果
- 100天精通Python(可视化篇)——第79天:matplotlib绘制不同种类炫酷折线图代码实战(网格、趋势、对比、百分比、多条折线、堆积、百分比堆积、多坐标子图、3D折线图)
- 〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动
- Irrlicht 3D Engine 笔记系列 之 教程5- User Interface
- 深入浅出matplotlib(45):常用3D图形一
- Three.js 3D打印数据模型文件(.STL)载入中
- 3D游戏引擎设计与实现(1)
- 3D游戏引擎设计与实现(2)
- (02)Cartographer源码无死角解析-(34) LocalTrajectoryBuilder3D→3D点云数据处理,大致流程梳理
- 3D点云重建0-01:MVSNet(R-MVSNet)-资源下载(前奏准备篇)
- 【三】3D匹配Matching之外形匹配Shape—Based——project_shape_model_3d()/read_shape_model_3d()算子
- 【三】3D匹配Matching之外形匹配Shape—Based——get_shape_model_3d_contours()/get_shape_model_3d_params()算子
- 【三】3D匹配Matching之外形匹配Shape—Based——deserialize_shape_model_3d()算子