html的3D效果

最新推荐文章于 2024-04-04 12:00:12 发布
最新推荐文章于 2024-04-04 12:00:12 发布
阅读量789 收藏
点赞数 1
分类专栏： html基础知识 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45270680/article/details/118999723
版权

3D效果的展现离不开阴影的设置

text-shadow:

文字的阴影 abcd
a 第一个值 代表水平方向 阴影离文字的距离 正值向右 负值向左
b 第二个值 代表垂直方向 阴影离文字的距离 正值向下 负值向上
c 第三个值 代表的是文字的模糊程度 值越小 越清晰 值越大 越模糊
d 第四个值 rgba(0-255,0-255,0-255，0.0-1.0)代表文字的阴影颜色 a代表的是文字阴影的透明度 值越小 透明 值越大 越清晰。
0px -1px 0px rgb(180,180,180) 此时的光源在上方

给你们展示个3D效果

注意此时用到了类

<style  type="text/css">
  p{
    font-size:50px;
	font-weight:bold;
	font-family:微软雅黑;
	/*  三种字体：颜色英文red  十六进制#ff6666  rgb(0-255,0-255,0-255)*/
	color:purple;
	/*
	文字的阴影 abcd
	a 第一个值 代表水平方向  阴影离文字的距离 正值向右 负值向左
    b 第二个值 代表垂直方向  阴影离文字的距离 正值向下 负值向上
    c 第三个值 代表的是文字的模糊程度 值越小 越清晰 值越大 越模糊
	d  第四个值 rgba(0-255,0-255,0-255，0.0-1.0)代表文字的阴影颜色 a代表的是文字阴影的透明度 值越小 透明 值越大 越清晰。
	*/
	   text-shadow:
		/*上*/
		0px -1px 0px rgb(180,180,180),
		0px 2px 2px rgba(0,0,0,0.9),
        0px 6px 5px rgba(0,0,0,0.7),
		0px 12px 12px rgba(0,0,0,0.4),
		0px 20px 20px rgba(0,0,0,0.3);
      }
	.aaa{
		text-shadow:
  /*下*/
        0px 1px 0px rgb(180,180,180),
		0px -2px 2px rgba(0,0,0,0.9),
		0px -6px 5px rgba(0,0,0,0.7),
		0px -12px 12px rgba(0,0,0,0.4),
		0px -20px 20px rgba(0,0,0,0.3);
  }
  
  /*左*/
     .bbb{
		text-shadow:
		 -1px  0px  0px rgb(180,180,180),
		 2px  0px  2px rgba(0,0,0,0.9),
         6px  0px  5px rgba(0,0,0,0.7),
		 12px 0px  12px rgba(0,0,0,0.4),
		 20px 0px  20px rgba(0,0,0,0.3);
  }

  /*右*/
     .ccc{
		text-shadow:
		 1px  0px  0px rgb(180,180,180),
		 -2px  0px  2px rgba(0,0,0,0.9),
         -6px  0px  5px rgba(0,0,0,0.7),
		 -12px 0px  12px rgba(0,0,0,0.4),
		 -20px 0px  20px rgba(0,0,0,0.3);
  }

	body{
		background-color:white;
	}
  </style>
 </head>
 <body>
	  <p>的很快恢复和地方几号放假看过从共和国</p>
	  <p class="aaa">反对恢复好好奋斗尽快恢复跌幅达到更高</p>
	  <p class="bbb">返回的结果开发很快就恢复的地方和法国</p>
	  <p class="ccc">四发到汉口国际黄金矿工的反对反对官方</p>
	  
 </body>

在这里插入图片描述

李宁也可以是程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 3d效果
02-04
用html开发的3d效果，文字（图片）随着鼠标的移动360度旋转，随鼠标移动速度变化。
html元素做3d变换,CSS3 3D变换之综合运用 - 3D box
weixin_28993311的博客
07-04 199
先上效果图吧javascript 点击'roll'按钮，会出现旋转的动画css代码以下htmldiv#camera{width: 500px;height: 500px;outline: 1px solid black;margin:100px auto;position: relative;perspective: 1000px;}div#camera>div{width: 400px;h...
【HTML】简单制作一个3D动画效果重叠圆环
最新发布
qq_70814008的博客
04-04 827
这段HTML和CSS代码描述了一个具有3D动画效果的网页结构。HTML部分定义了一个带有cont类的容器，其中包含了多个带有ac类的子元素。每个子元素都通过CSS变量--a赋予了一个唯一的标识，这些标识将用于控制每个元素的动画和样式。CSS部分首先设置了一些根变量，如，用于后续动画延迟的计算。.ac类的样式定义了子元素的颜色和阴影效果，而.cont类则定义了容器的大小、阴影和自身的动画效果。动画rot是一个简单的旋转动画，使得每个子元素从完全旋转的状态过渡到静止状态。动画rot-cont。
html如何实现立体效果,CSS3实现3D立体效果
weixin_30224231的博客
06-03 2442
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200px; back...
html+3d转换动画效果图,利用HTML5+CSS3实现3D转换效果实例详解
weixin_39767983的博客
05-30 386
前言本文介绍的是css3的3d模块，对大家具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。介绍首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一...
HTML——3D移动、3D透视、3D效果、3D呈现案例效果
zx2014567296的博客
04-29 2595
灵活运用3D效果制作两盒翻转与旋转木马案例 ※两盒翻转案例 一、效果展示 ※旋转木马案例
利用html做一个3D 图片动态效果
zghn6832的博客
11-30 3124
插一条：如果有人想要一些好玩的脚本（vbs，bat，html）同样联系我邮箱。如有侵权请联系[email protected]邮箱。在倒数第6行src=后是图片地址 可以自行更改。今天分享一个3D图片动态效果。
HTML实现3D相册
elsfkyxj的博客
12-22 3313
制作简易3D相册的代码（高手勿喷）
html3D 效果
07-29
一个非常绚丽的3D效果，值得大家参考和学习
3D烟花效果.html
02-15
3D烟花效果.html
3D烟花效果html
01-15
html实现的3D烟花效果，详细源码操作。
Html5+CSS3实现3D旋转效果
04-16
Html5+js+CSS3实现3D旋转效果
HTML5超炫3D旋转效果
09-11
html5的3D旋转效果
HTML5 3D效果网页视频背景特效代码
03-20
HTML5 3D效果网页视频背景代码是一款酷炫的3D网页视频背景特效下载。
HTML 3D效果+形变动态（球体、立方体、螺旋体、层次模型）
breakCSDN的博客
10-30 2545
文章主要实现了立方体、球体、螺旋体、层次体的3D模型 主要是使用： -webkit-perspective:1000px;/*透视距*/ transform-style: preserve-3d;/*指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。*/ transform对3D模型进行操作；
9个超绚丽的HTML5 3D图片动画特效
weixin_34255793的博客
12-15 3593
在Web 1.0时代，我们的网页中图片数量非常少，而且都是以静态图片为主。HTML5的出现，推动了Web 2.0的发展，同时也催生出了很多绚丽的HTML5图片动画特效，特别是有些还有3D的动画效果。本文收集了9个非常绚丽的HTML5 3D图片动画特效，分享给大家，希望你们喜欢。 1、纯CSS3 3D旋转图片墙动画 这是一款基于纯CSS3的3D旋转图片墙，这款纯CSS3图片动画非常炫酷，一张张图...
html3D网页实例
热门推荐
诗雨远方的博客
08-25 1万+
html3D网页实例        现在的网页最求的不仅仅是数据的展示了，我们需要的是让用户产生美感，体验独特，那么酷炫的3D网页就是我们的追求，很多电脑官网或者公司官网都淘汰了那些乏味的平面网页，使用3D网页来满足用户的需求，下面我就分享一端3D网页代码，相当简单。 一、项目使用的是Hbuilder建立，代码目录结构如图所示： 二、3d.html，需要关注div的css设计
html3D技术
Wdeasa的博客
12-14 2473
3D技术html
html照片墙3d旋转效果图
12-29
以下是一个使用HTML和CSS实现的3D照片墙的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .container { perspective: 1000px; width: 400px; height: 300px; margin: 0 auto; } .carousel { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotate 20s infinite linear; } .carousel img { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="container"> <div class="carousel"> <img src="photo1.jpg" alt="Photo 1"> <img src="photo2.jpg" alt="Photo 2"> <img src="photo3.jpg" alt="Photo 3"> <!-- 添加更多照片 --> </div> </div> </body> </html> ``` 这段代码创建了一个容器（`<div class="container">`），其中包含一个旋转的照片墙（`<div class="carousel">`）。通过使用CSS的`transform`属性和`rotateY`函数，我们可以实现照片墙的3D旋转效果。每张照片都是绝对定位的，并且通过`translate`函数在容器中居中显示。 你可以将自己的照片替换掉示例代码中的`<img>`标签中的`src`属性，以显示你自己的照片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值