文字3D立体效果

最新推荐文章于 2023-12-19 19:15:00 发布
最新推荐文章于 2023-12-19 19:15:00 发布
阅读量289 收藏
点赞数 1
分类专栏： css3 文章标签： 3d css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/defeatyang/article/details/121870760
版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d文字效果</title>
     <link rel="stylesheet" type="text/css" href="3d文字效果.css">
</head>
<body>
    <h1>3d demo</h1>
</body>
</html>

CSS

/* 初始化css */
*{
    margin: 0;
    padding: 0;
}
body{
    background: #90a7ff;
}
h1{
  margin: 20% auto;
  text-align: center;
  font-size: 6em;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  /* 英文字母首字母大写 */
  text-transform: uppercase; 
   /* 动画效果  */
  transition: all 0.1s;
}
h1:hover{
  /* 文字阴影效果 */
  /* text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur) 
   颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]... */
  text-shadow: 
  0 1px 15px rgba(0, 0, 0, 0.2),
  0 2px 0 #ccc,
  0 3px 0 #ccc,
  0 4px 0 #ccc,
  0 5px 0 #ccc,
  0 6px 0 #ccc,
  0 7px 0 #ccc,
  0 8px 0 #ccc,
  0 9px 0 #ccc,
  0 10px 0 #ccc,
  0 11px 0 #ccc,
  0 12px 30px rgba(0, 0, 0, 0.5);
}
故渊~池鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
纯CSS实现鼠标移入显示图标效果
技术无止境，人生仍探索。
03-16 1万+
1、效果预览 在淘宝或京东商城我们经常看到这样的效果：鼠标移动除某一个位置时出现下拉菜单，或者显示一个图标，那么这是如何实现的呢？我们今天就用CSS来实现鼠标移入时显示图标的一个效果。 下面是我们这次最终要实现的效果 或者这样 2、代码实现 1、标签布局 &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt;
3D效果
for_casech的博客
04-09 420
bool Text::init() { TBase::init(); CCSize winSize = CCDirector::sharedDirector()->getWinSize(); CCSprite *spr = CCSprite::create("HelloWorld.png"); spr->setPosition(ccp(winSize.width/2,winSize.hei
css3 3D立体阴影文字动画特效
06-11
基于css3 keyframes属性制作的3D立体阴影文字动画特效，也支持中文，只是字体不合适的话，效果没那么好看。
鼠标靠近会向上掀起的JS文本特效3D文字立体动画效果
11-23
鼠标靠近会向上掀起的JS文本特效3D文字立体动画效果
Unity 工具 之 VText 简单快速实现 文字 3D 效果
03-03
Unity 工具 之 VText 简单快速实现 文字 3D 效果，VText 的导入设置和简单使用 版本：VText 1.37.unitypackage使用说明，可参考CSDN博文： https://blog.csdn.net/u014361280/article/details/114295520
CSS3 3D立体文字变色发光动画特效.zip
07-11
代码：      <link rel="stylesheet" href="css/reset.min.css?3.1.64">   <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed]   <figure>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   <h1>3d CSS GLOW</h1>   </figure>
CSS———如何利用CSS实现hover 切换图片效果
Bonsoir777的博客
07-06 5642
本文主要介绍了如何利用css 实现hover时图片切换的效果
当鼠标光标放在一张图片上，如何显示另一张图片？
杜永康的博客
08-23 6434
我们会遇到一种情境，这种情境是当正常打开一个页面，有文字配有图片，可是当鼠标的光标移动到这张图片上时，会显示另一张图片。2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来。这个代码的意思就是当鼠标光标移动到这个div上时，不让第一张照片显示。以下，是我关于这个效果写的代码，大家可以复制到编辑器运行一下，加深印象。这个代码的意思就是当鼠标光标移动到这个div上时，让第二张照片显示。意思就是不将鼠标光标移动到第一张照片上时，不让第二张照片显示。5.对第二张照片设置。
css小技巧——鼠标悬浮时切换图片
朝阳39的博客
03-18 6669
完整范例代码 <template> <div style="padding: 20px"> <img src="https://mat1.gtimg.com/www/mb/images/face/104.gif"> </div> </template> <style scoped> img:hover { content: url(https://mat1.gtimg....
CSS实现鼠标移入div后，div内的图片更改
mfxcyh的博客
11-12 1730
CSS实现鼠标移入div后，div内的图片更改
CSS：实现鼠标悬停，切换图片的两种方法
奶绿走糖的博客
10-09 1万+
HTML CSS 两种方法：实现鼠标悬停，切换图片第一种方法：利用css的display属性第二种方法：利用css的background属性展示 第一种方法：利用css的display属性 html： <div class="light"> <img class="yellow" src="../../assets/imgs/icon_yel.png" alt="黄色灯泡"> <img class="red" src="../../assets/img
鼠标移动到图片上后切换为另一个图片
06-11
鼠标移动到图片上后，图片自动切换为另外一个图片，图片的小巧切换效果，可以用作两个相似图片的对比效果，很不错哦
CSS3实现3D文字动画效果
09-05
CSS3 3D文字动画，看到这个字眼都觉得震撼，顺便兼用下另两个属性：transition 和 animation。由于使用CSS3技术，因此测试时请使用火狐或Chrome等浏览器，否则不能看到效果
【3D数据读取】利用JAVA读取GLB（GLTF）文件数据
最新发布
New_Wang的博客
12-19 977
使用DataInputStream类读取GLB文件的头部，并获取文件版本和文件大小。Gltf对象包含模型的所有数据，包括模型的名称、作者、版本、几何信息、材质信息、动画信息等。头部包含文件的元数据，例如文件版本、文件大小、模型的几何信息等。头部包含文件的元数据，例如文件版本、文件大小、模型的几何信息等。要读取GLB文件的具体数据，可以根据GLB文件的二进制数据块的结构进行处理。如果需要更灵活的数据访问，则可以使用GLTF文件。要访问模型的各个部分的数据，可以使用Gltf对象的属性和方法。
【React-Native开发3D应用】React Native加载GLB格式3D模型并打包至Android手机端
qq_45430571的博客
11-07 1648
最近在Native上开发3D应用，选用的是React-Native（https://github.com/facebook/react-native），原因如下： • 开发语言使用JS，和ThreeJS（https://github.com/mrdoob/three.js） 的适配性比较好。（Three.js是一个轻量级的JavaScript库，用于在网页上创建和显示动画的3D计算机图形） • 多端部署，开发一次，可部署到Android、IOS、Web等平台 但是，这里我们忽略了一个问题，ThreeJS主要
Easy3dviewer三维模型（gltf/glb、osgb、fbx、x、shp、dxf）超轻量浏览和转换工具软件分享
热门推荐
急速光粒的博客
08-01 2万+
摄影测量 倾斜摄影osgb。 三维模型 三维建模软件3dmax，blender、maya等三维格式 gis格式 还有些常用的gis格式，如shp文件、dxf文件等 地形格式 为了方便对三维模型的操作能够方便的读取各种三维模型，支持gltf、glb、osgb、fbx等热门的模型格式，也能读取简单的gis格式如shp、dxf等格式的浏览和转换，实现了模型的浏览和三维动画，纹理支持多种图形格式（png、jpg、bmp等）。 模型可以保存为fbx、osgb、3ds、obj等格式，实现简单的模型格式转换功能。....
html css样式实现鼠标悬浮到a标签可以选择图片
qq_61549190的博客
11-03 1129
a href="#02" 可以填写具体的需要跳转的路径 a href="#"则表示当前页面当前位置 a href="index.html"跳转到具体的html文件。这里使用的是用表格限制其文件框架区域,用无序列表和a链接设置锚点,a标签引用class link-with-image"确认。当我们想要在链接中添加图片时，可以使用以上提供的CSS样式。"，并将其上下左右边距设为0，这将使图片与链接的边缘保持一定距离。接下来，我们将链接图像的。然后，我们设置一个相对定位的样式类名为"，这将使图像与链接的。
CSS实现鼠标移动到图片,更换图片,两种方
jack_rose_me的博客
11-20 3040
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS实现鼠标移动到图片,更换图片,两种方式</title> <style> .img-1a:link{ display:block; width:200px; ...
html+css布局实例：CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动
qq_51066068的博客
03-22 302
效果图： 小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解 你可以拿你自己的图片放进去： 鼠标没有点击之前： 鼠标点击图片时： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...
html 立体文字效果
09-10
CSS3提供了一些属性和特效，可以用来创建立体效果的文字。有多种方法可以实现立体文字效果，以下是其中一种方法： 1. 使用text-shadow属性：text-shadow属性可以为文字添加阴影效果，通过调整阴影的位置和颜色可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值