CSS3 模拟文字3D旋转

最新推荐文章于 2023-07-07 17:41:37 发布
最新推荐文章于 2023-07-07 17:41:37 发布
阅读量1.2k 收藏
点赞数
分类专栏： WEB前端 文章标签： CSS3 文字旋转 模拟3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_15094005/article/details/40047601
版权

最近老板让写一个文字特效，前端是美工兼职的，不会写JS，平时也就是做个适配，写个普通的静态页面，CSS3高级特性也不大接触，说搞不定，老板把这个问题甩给我，我这个静态页面都写不好的服务端只能硬上，参照w3cschool现学现卖，效果还不错。

<!DOCTYPE html>
<html>
<head>
<style> 
div#part1
{
position:absolute;
left:240px;
top:240px;
color:#C2C2C2;
opacity:0.2;

animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;

animation-delay:0s;
-moz-animation-delay:0s; /* Safari 和 Chrome */
-webkit-animation-delay:0s; /* Safari 和 Chrome */
-o-animation-delay:0s; /* Safari 和 Chrome */
}

div#part2
{
position:absolute;
left:240px;
top:240px;
color:#C2C2C2;
opacity:0.2;

animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;

animation-delay:2s;
-moz-animation-delay:2s; /* Safari 和 Chrome */
-webkit-animation-delay:2s; /* Safari 和 Chrome */
-o-animation-delay:2s; /* Safari 和 Chrome */
}

div#part3
{
position:absolute;
left:240px;
top:240px;
color:#C2C2C2;
opacity:0.2;

animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;

animation-delay:4s;
-moz-animation-delay:4s; /* Safari 和 Chrome */
-webkit-animation-delay:4s; /* Safari 和 Chrome */
-o-animation-delay:4s; /* Safari 和 Chrome */
}

div#part4
{
position:absolute;
left:240px;
top:240px;
color:#C2C2C2;
opacity:0.2;

animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;

animation-delay:6s;
-moz-animation-delay:6s; /* Safari 和 Chrome */
-webkit-animation-delay:6s; /* Safari 和 Chrome */
-o-animation-delay:6s; /* Safari 和 Chrome */
}

@keyframes myfirst
{
0%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
5%{color:#C2C2C2;font-size:1.83em;left:82px;opacity:0.21;}
10%{color:#C2C2C2;font-size:1.95em;left:49px;opacity:0.27;}
15%{color:#C2C2C2;font-size:2.12em;left:22px;opacity:0.36;}
20%{color:#C2C2C2;font-size:2.35em;left:5px;opacity:0.47;}
25%{color:#C2C2C2;font-size:2.59em;left:0px;opacity:0.6;}
30%{color:#C2C2C2;font-size:2.84em;left:5px;opacity:0.72;}
35%{color:#C2C2C2;font-size:3.07em;left:22px;opacity:0.83;}
40%{color:#C2C2C2;font-size:3.24em;left:49px;opacity:0.92;}
45%{color:#C2C2C2;font-size:3.36em;left:82px;opacity:0.98;}
50%{color:#C2C2C2;font-size:3.4em;left:119px;opacity:1;}
55%{color:#C2C2C2;font-size:3.36em;left:157px;opacity:0.98;}
60%{color:#C2C2C2;font-size:3.24em;left:190px;opacity:0.92;}
65%{color:#C2C2C2;font-size:3.07em;left:217px;opacity:0.83;}
70%{color:#C2C2C2;font-size:2.84em;left:234px;opacity:0.72;}
75%{color:#C2C2C2;font-size:2.6em;left:240px;opacity:0.6;}
80%{color:#C2C2C2;font-size:2.35em;left:234px;opacity:0.47;}
85%{color:#C2C2C2;font-size:2.12em;left:217px;opacity:0.36;}
90%{color:#C2C2C2;font-size:1.95em;left:190px;opacity:0.27;}
95%{color:#C2C2C2;font-size:1.83em;left:157px;opacity:0.21;}
100%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
5%{color:#C2C2C2;font-size:1.83em;left:82px;opacity:0.21;}
10%{color:#C2C2C2;font-size:1.95em;left:49px;opacity:0.27;}
15%{color:#C2C2C2;font-size:2.12em;left:22px;opacity:0.36;}
20%{color:#C2C2C2;font-size:2.35em;left:5px;opacity:0.47;}
25%{color:#C2C2C2;font-size:2.59em;left:0px;opacity:0.6;}
30%{color:#C2C2C2;font-size:2.84em;left:5px;opacity:0.72;}
35%{color:#C2C2C2;font-size:3.07em;left:22px;opacity:0.83;}
40%{color:#C2C2C2;font-size:3.24em;left:49px;opacity:0.92;}
45%{color:#C2C2C2;font-size:3.36em;left:82px;opacity:0.98;}
50%{color:#C2C2C2;font-size:3.4em;left:119px;opacity:1;}
55%{color:#C2C2C2;font-size:3.36em;left:157px;opacity:0.98;}
60%{color:#C2C2C2;font-size:3.24em;left:190px;opacity:0.92;}
65%{color:#C2C2C2;font-size:3.07em;left:217px;opacity:0.83;}
70%{color:#C2C2C2;font-size:2.84em;left:234px;opacity:0.72;}
75%{color:#C2C2C2;font-size:2.6em;left:240px;opacity:0.6;}
80%{color:#C2C2C2;font-size:2.35em;left:234px;opacity:0.47;}
85%{color:#C2C2C2;font-size:2.12em;left:217px;opacity:0.36;}
90%{color:#C2C2C2;font-size:1.95em;left:190px;opacity:0.27;}
95%{color:#C2C2C2;font-size:1.83em;left:157px;opacity:0.21;}
100%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
5%{color:#C2C2C2;font-size:1.83em;left:82px;opacity:0.21;}
10%{color:#C2C2C2;font-size:1.95em;left:49px;opacity:0.27;}
15%{color:#C2C2C2;font-size:2.12em;left:22px;opacity:0.36;}
20%{color:#C2C2C2;font-size:2.35em;left:5px;opacity:0.47;}
25%{color:#C2C2C2;font-size:2.59em;left:0px;opacity:0.6;}
30%{color:#C2C2C2;font-size:2.84em;left:5px;opacity:0.72;}
35%{color:#C2C2C2;font-size:3.07em;left:22px;opacity:0.83;}
40%{color:#C2C2C2;font-size:3.24em;left:49px;opacity:0.92;}
45%{color:#C2C2C2;font-size:3.36em;left:82px;opacity:0.98;}
50%{color:#C2C2C2;font-size:3.4em;left:119px;opacity:1;}
55%{color:#C2C2C2;font-size:3.36em;left:157px;opacity:0.98;}
60%{color:#C2C2C2;font-size:3.24em;left:190px;opacity:0.92;}
65%{color:#C2C2C2;font-size:3.07em;left:217px;opacity:0.83;}
70%{color:#C2C2C2;font-size:2.84em;left:234px;opacity:0.72;}
75%{color:#C2C2C2;font-size:2.6em;left:240px;opacity:0.6;}
80%{color:#C2C2C2;font-size:2.35em;left:234px;opacity:0.47;}
85%{color:#C2C2C2;font-size:2.12em;left:217px;opacity:0.36;}
90%{color:#C2C2C2;font-size:1.95em;left:190px;opacity:0.27;}
95%{color:#C2C2C2;font-size:1.83em;left:157px;opacity:0.21;}
100%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
}

@-o-keyframes myfirst /* Opera */
{
0%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
5%{color:#C2C2C2;font-size:1.83em;left:82px;opacity:0.21;}
10%{color:#C2C2C2;font-size:1.95em;left:49px;opacity:0.27;}
15%{color:#C2C2C2;font-size:2.12em;left:22px;opacity:0.36;}
20%{color:#C2C2C2;font-size:2.35em;left:5px;opacity:0.47;}
25%{color:#C2C2C2;font-size:2.59em;left:0px;opacity:0.6;}
30%{color:#C2C2C2;font-size:2.84em;left:5px;opacity:0.72;}
35%{color:#C2C2C2;font-size:3.07em;left:22px;opacity:0.83;}
40%{color:#C2C2C2;font-size:3.24em;left:49px;opacity:0.92;}
45%{color:#C2C2C2;font-size:3.36em;left:82px;opacity:0.98;}
50%{color:#C2C2C2;font-size:3.4em;left:119px;opacity:1;}
55%{color:#C2C2C2;font-size:3.36em;left:157px;opacity:0.98;}
60%{color:#C2C2C2;font-size:3.24em;left:190px;opacity:0.92;}
65%{color:#C2C2C2;font-size:3.07em;left:217px;opacity:0.83;}
70%{color:#C2C2C2;font-size:2.84em;left:234px;opacity:0.72;}
75%{color:#C2C2C2;font-size:2.6em;left:240px;opacity:0.6;}
80%{color:#C2C2C2;font-size:2.35em;left:234px;opacity:0.47;}
85%{color:#C2C2C2;font-size:2.12em;left:217px;opacity:0.36;}
90%{color:#C2C2C2;font-size:1.95em;left:190px;opacity:0.27;}
95%{color:#C2C2C2;font-size:1.83em;left:157px;opacity:0.21;}
100%{color:#C2C2C2;font-size:1.79em;left:120px;opacity:0.2;}
}
</style>
</head>
<body>

<div id="part1">测试文字</div>
<div id="part2">测试文字</div>
<div id="part3">测试文字</div>
<div id="part4">测试文字</div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>


iovexorg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3图片3D翻转显示文字特效
06-24
CSS3图片3D翻转显示文字特效是一款鼠标经过图片的时候3D效果翻转显示文字描述信息代码。
3D文字球形旋转
11-03
3D文字球形旋转 3D文字球形旋转 3D文字球形旋转 3D文字球形旋转
html 3D球状旋转标签云文字云效果
kongzhonghu的专栏
09-27 2375
html 3D球状旋转标签云文字云效果
html5 css3酷炫的3D文字样式特效
11-24
html5 css3酷炫的3D文字样式特效
3D文字标签云CSS3特效
04-06
3D文字标签云CSS3特效是一款全屏酷炫的文字标签云3d立体旋转特效。
CSS（四）--3D转换
Twelve_Y的博客
04-30 364
3D转换 3D特点：近大远小 物体后面遮挡看不见 3D位移 translate3d(x,y,z) 3D旋转 rotate3d(x,y,z) 透视 perspective 3D呈现 transform-style 1.三维坐标系： 三维坐标系：就是指立体空间，立体空间由3个轴共同组成 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意： y下面是正值，上面是负值 ...
CSS中的3D旋转
m0_56232007的博客
06-09 7077
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
CSS3爱心文字3D旋转动画特效
weixin_53666393的博客
03-13 310
CSS3爱心文字3D旋转动画特效
CSS立体旋转
weixin_35755188的博客
12-21 256
CSS立体旋转是指使用CSS技术在网页中创建3D旋转效果的方法。 要在网页中实现3D旋转效果，需要使用CSS的transform属性。 该属性允许你在网页元素上应用转换，如旋转、缩放、移动等。 要创建3D旋转效果，可以使用rotate3d函数，该函数接受4个参数：x、y、z和deg，分别表示旋转的方向和角度。 例如，要使元素在x轴方向上旋转45度，可以使用以下代码： transform: rot...
css 实现文字3D旋转近清晰远模糊
weixin_43294560的博客
11-09 957
3D旋转:父元素设置透距perspective:160vmin,子元素设置3D模式transform-style: preserve-3d 近清晰远模糊:通过filter:blur实现模糊,filter:contrast实现更清晰,通过animation-delay:-ns;从指定时间立即开始动画,通过时间差实现,近清晰,远模糊 效果图: 代码示例: body { perspective: 160vmin; overflow: hidden; } p { margin: aut
看到一个球体旋转3D效果，分享一下
11-06
关键字3D旋转效果，JS+FLASH实现，花了些力气找到的，希望可以对大家有帮助。
3D字体旋转特效（HTML5-CSS3）
10-15
酷炫的3D文字旋转特效，基于HTML5和CSS3.
css3图片3D翻转显示文字信息特效
11-03
css3图片3D翻转显示文字信息特效 css3图片3D翻转显示文字信息特效
CSS3动画效果源代码27个合集.zip
09-02
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...文字说明较多)的CSS3动画效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟...
css入门笔记
05-15
3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
26.jQuery实现图片3D旋转特效插件 v1.1版本下载 27.jQuery实现图片3D立体感的前后轮番展示特效 28.jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29.jQuery实现图片变色特效插件与实例下载如jquery...
12款实用的HTML5干货分享.zip
03-03
HTML5_CSS3牙刷动画 模拟真实刷牙效果.rar 动感的CSS3 Loading文字特效.rar 漂亮的CSS3动画进度条 可自定义进度条颜色.rar 纯CSS3实现滑杆开关切换按钮动画.rar 纯CSS3背景渐变按钮 按钮图标淡入淡出动画.rar
【CSS卡片翻转特效】CSS3实现3D旋转动画卡片翻转效果（附源码）
赏樱看雪撸代码
07-07 1974
CSS3如何实现卡片翻转效果，CSS3如何实现3D旋转效果，CSS实现卡片动态效果，页面实现dom翻转效果，好看的CSS样式特效。
css3实现文字3D效果
最新发布
07-14
下面是一个示例代码，展示了如何使用CSS3实现文字的3D旋转效果： ```html <!DOCTYPE html> .text { font-size: 48px; font-weight: bold; color: #fff; background-color: #333; padding: 20px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值