CSS3绘制3D盒子,动态害羞表情包

最新推荐文章于 2022-11-14 20:05:29 发布
最新推荐文章于 2022-11-14 20:05:29 发布
阅读量1.1k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doubleu_/article/details/81382324
版权

CSS3非常强大,我们不仅可以用它来绘制平面的图形,还可以绘制2D,3D的图形,并且可以制作一些动态的图,解锁CSS新玩法,今天要分享就是立体的3D盒子和动态超萌害羞表情包,先来看看效果

附上完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表情</title>
	<style>
		*{
			margin: 0;
		}
		body{
			background-color: lightblue;
		}
		.boss{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			position: relative;
			/*transform-style: preserve-3d;*/
		}
		.box1{
			width: 300px;
			height: 300px;
			margin: 100px auto;
			position: relative;
			border: 10px solid #eaab2e;
			border-radius:50%;
			background-color: #f8d93b;
			box-shadow:inset 100px 10px 10px #f9e16a;
			transform: rotate(85deg);
		}
		.boss>.meimao1{
			position: absolute;
			width: 100px;
			height: 80px;
			border: 8px solid black;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			border-radius:50%;
			top: 80px;
			left: 60px;
			z-index: 1;
			opacity: 0;
			animation: jm 5s infinite;
		}
		.boss>.meimao2{
			position: absolute;
			width: 100px;
			height: 80px;
			border: 8px solid black;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			border-radius:50%;
			top: 80px;
			left: 200px;
			z-index: 1;
			opacity: 0;

			animation: jm 5s infinite;
		}
		.zhui{
			position: absolute;
			width: 80px;
			height: 100px;
			border: 8px solid #f67a2d;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			border-radius:50%;
			top: 160px;
			left: 135px;
		}
		.hong{
			width: 80px;
			height: 30px;
			background-color:  rgba();
			border-radius: 50%;
			box-shadow:-130px 20px 50px 20px #ef7261,100px 20px 50px 20px #ef7261;
			position: absolute;
			left: 168px;
			top: 160px;
		}
		.jiemao{
			height: 20px;
			width: 6px;
			background-color: black;
			position: absolute;
			left: 60%;
		}
		.j1{
			transform: rotate(31deg) translateY(87px);
		}
		.j2{
			transform: rotate(20deg) translateY(86px);
		}
		.j3{
			transform: rotate(8deg) translateY(83px);
		}
		.j4{
			transform: rotate(-3deg) translateY(82px);
		}
		.yanjing1{
			width: 100px;
			height: 96px;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			animation: yj 5s  infinite;
			top: 115px;
			left: 68px; 
			z-index: 100;
		}
		.yanjing2{
			width: 100px;
			height: 96px;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			animation: yj 5s  infinite;
			top: 115px;
			left: 200px; 
			z-index: 100;
		}
		.yanbai-da{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			right: 20px;
			top: 20px;
			transform: translateY(-1px) translateX(-1px);
			animation: dong1 0.5s infinite;
			box-shadow: inset 0 0 20px 8px #70756e;
			backface-visibility: hidden;
		}
		.yanbai-xiao1{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			left: 15px;
			bottom: 28px;
			transform: translateY(-1px) translateX(1px) ;
			animation: dong2 0.5s infinite;
			box-shadow: inset 0 0 20px 4px #70756e;
			backface-visibility: hidden;
		}
		.yanbai-xiao2{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			left: 40px;
			bottom: 11px;
			transform: translateY(-1px) ;
			animation: dong2 0.5s infinite;
			box-shadow: inset 0 0 20px 4px #70756e;
			backface-visibility: hidden;
		}

		.yanjing1 .meimao1{
			position: absolute;
			width: 100px;
			height: 80px;
			border: 8px solid black;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			border-radius:50%;
			top: -36px;
			left: -8px;
			z-index: 1;
			opacity: 1;
			transform: rotateX(180deg) translateY(-40px);
		}
		.yanjing2 .meimao2{
			position: absolute;
			width: 100px;
			height: 80px;
			border: 8px solid black;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			border-radius:50%;
			top: -36px;
			left: -8px;
			z-index: 1;
			opacity: 1;
			transform: rotateX(180deg) translateY(-40px);
		}
		@keyframes dong1{
			50%{
				transform: translateY(1px) translateX(1px) ;
			}
		}
		@keyframes dong2{
			50%{
				transform: translateY(1px) translateX(-1px) ;
			}
		}
		@keyframes dong3{
			50%{
				transform: translateY(1px)  ;
			}
		}
		@keyframes yj{
			0%{}
			40%{
				transform: rotateX(0deg);
			}
			43%{
				opacity: 1;
			}
			46%{
				opacity: 0;				
			}
			50%{
				transform: rotateX(-90deg);
			}
			60%{
				opacity: 0;
				transform: rotateX(-90deg);
			}
			100%{}
		}
		@keyframes jm{
			43%{
				opacity: 0;
			}
			46%{
				opacity: 1;
			}
			60%{
				opacity: 1;
			}
			70%{
				opacity: 0;
			}
		}
	</style>
</head>
<body>
	<div class="boss">
		<div class="box1"></div>
		<div class="meimao1">
			<div class="jiemao j1"></div>
			<div class="jiemao j2"></div>
			<div class="jiemao j3"></div>
			<div class="jiemao j4"></div>
		</div>	
		<div class="meimao2">
			<div class="jiemao j1"></div>
			<div class="jiemao j2"></div>
			<div class="jiemao j3"></div>
			<div class="jiemao j4"></div>
		</div>
		<div class="zhui"></div>
		<div class="hong"></div>
		<div class="yanjing1">
			<div class="yanbai-da"></div>
			<div class="yanbai-xiao1"></div>
			<div class="yanbai-xiao2"></div>
			<div class="meimao1">
				<div class="jiemao j1"></div>
				<div class="jiemao j2"></div>
				<div class="jiemao j3"></div>
				<div class="jiemao j4"></div>
			</div>	
		</div>
		<div class="yanjing2">
			<div class="yanbai-da"></div>
			<div class="yanbai-xiao1"></div>
			<div class="yanbai-xiao2"></div>
			<div class="meimao2">
				<div class="jiemao j1"></div>
				<div class="jiemao j2"></div>
				<div class="jiemao j3"></div>
				<div class="jiemao j4"></div>
			</div>	
		</div>
	</div>
</body>
</html>

命名不规范,请大家谅解,因为名字真的好难起啊QAQ,接下来分享的是一个看起来很酷炫的3D旋转盒子

动图在录制的时候显得有些快了,实际效果是由慢到快的匀速运动的,符上完整代码,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body,html{
			height:100%;
			background-color: #000;
		}
		body{
			perspective: 1000px;
		}
		.warp{
			width: 200px;
			height: 200px;
		/*	border: 1px solid #ccc;*/
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -100px;
			margin-left: -100px;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-transition: all 15s;
			transition: all 15s;
			-webkit-transform: rotateX(0deg);
			transform: rotateX(0deg);
			-webkit-transform: rotateY(0deg) rotateX(-45deg) rotateZ(45deg);
			transform: rotateY(0deg) rotateX(-45deg) rotateZ(45deg);
		}
		.warp:hover{
			-webkit-transform:rotateY(1800deg) rotateX(-45deg) rotateZ(45deg);
			transform:rotateY(1800deg) rotateX(-45deg) rotateZ(45deg);
		/*	-webkit-transform:rotateZ(45deg);
			transform:rotateZ(45deg);*/
		}
		.warp div{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.8;
		}
		.warp div img{
			width: 200px;
			height:200px; 
			float: left;
		}
		.warp div:nth-child(1){
			
			-webkit-transform: rotateY(90deg) translateZ(100px);
			transform: rotateY(90deg) translateZ(100px);

		}
		.warp div:nth-child(2){
			
			-webkit-transform: rotateY(180deg) translateZ(100px);
			transform: rotateY(180deg) translateZ(100px);
			
		}
		.warp div:nth-child(3){
		
			-webkit-transform: rotateY(270deg) translateZ(100px);
			transform: rotateY(270deg) translateZ(100px);
			
		}
		.warp div:nth-child(4){
			
			-webkit-transform: rotateY(360deg) translateZ(100px);
			transform: rotateY(360deg) translateZ(100px);
			
		}
		.warp div:nth-child(5){
		
			-webkit-transform: rotateX(90deg) translateZ(100px);
			transform: rotateX(90deg) translateZ(100px);
			
		}
		.warp div:nth-child(6){
			
			-webkit-transform: rotateX(90deg) translateZ(-100px);
			transform: rotateX(90deg) translateZ(-100px);
			
		}

	</style>
</head>
<body>
	<div class="warp">
		<div><img src="1.png"></div>
		<div><img src="2.png"></div>
		<div><img src="3.png"></div>
		<div><img src="4.png"></div>
		<div><img src="5.png"></div>
		<div><img src="6.png"></div>
		<div class="sss"></div>
	</div>
</body>
</html>

还可以在hover的时候加上一些cube效果,看起来更酷炫

附上cube的完整代码:

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cube</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 200px;
      height: 200px;
      margin: 300px auto;
      position: relative;
      transform-style: preserve-3d;
      /*观察距离*/
      perspective: 1500px;
      /*观察角度*/
      perspective-origin: center;
      background-color: red;
      /*-webkit-animation: first 2s linear infinite;*/
      /*变形基点, left和right影响Y轴旋转, top和bottom影响X轴旋转*/
      /*transform-origin: left top;*/
    }
    .wrap>div {
      width: 200px;
      height: 200px;
      position: absolute;
      font-size: 100px;
      line-height: 200px;
      text-align: center;
      color: white;
      opacity: 0.3;
      transition: transform 1s;
    }
    .wrap>div:nth-child(1) {
      transform: translateZ(100px);
      background-color: red;
    }
    .wrap>div:nth-child(6) {
      transform: translateZ(-100px);
      background-color: yellow;
    }
    .wrap>div:nth-child(2) {
      transform: rotateY(90deg) translateZ(100px);
      background-color: blue;
    }
    .wrap>div:nth-child(5) {
      transform: rotateY(-90deg) translateZ(100px);
      background-color: green;
    }
    .wrap>div:nth-child(3) {
      transform: rotateX(90deg) translateZ(100px);
      background-color: cyan;
    }
    .wrap>div:nth-child(4) {
      transform: rotateX(-90deg) translateZ(100px);
      background-color: purple;
    }
    @-webkit-keyframes first {
      from {
        transform: rotateY(0deg) rotateX(0deg);
      }
      to {
        transform: rotateY(360deg) rotateX(360deg);
      }
    }

    .wrap:hover>div:nth-child(1) {
      transform: translateZ(300px) scale(2, 2);
      background-color: red;
    }
    .wrap:hover>div:nth-child(6) {
      transform: translateZ(-300px) scale(2, 2);
      background-color: yellow;
    }
    .wrap:hover>div:nth-child(2) {
      transform: rotateY(90deg) translateZ(300px) scale(2, 2);
      background-color: blue;
    }
    .wrap:hover>div:nth-child(5) {
      transform: rotateY(-90deg) translateZ(300px) scale(2, 2);
      background-color: green;
    }
    .wrap:hover>div:nth-child(3) {
      transform: rotateX(90deg) translateZ(300px) scale(2, 2);
      background-color: cyan;
    }
    .wrap:hover>div:nth-child(4) {
      transform: rotateX(-90deg) translateZ(300px) scale(2, 2);
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>
</html>

以上效果都是我自己瞎捣鼓的,对本篇文章有任何的疑问或者有更好的建议,可以在下方留言

Doubleu_
关注
css33D盒子动画（盒子套盒子）
ssh6666的博客
03-15 802
css3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 关键帧的定义 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 @keyframes mymove{ from{初始状态属性...
CSS3如何实现各种动态表情效果？（代码示例）
web前端入门基础进阶教程-htmlcssjs
05-18 1156
CSS3如何实现各种动态表情效果？下面本篇文章给大家通过实例来介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 CSS3实现各种动态表情效果 效果图： 代码如下，复制即可使用： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { text-align: ce
使用纯css3写出来的表情包 (^v^)
weixin_30553777的博客
08-09 190
效果如图所示： 不多说，我们直接一个一个来写出，主要列出每个表情的结构，样式我们统一写出，基本全部会用到，颜色以及结构可以根据自己的需求来调整。（里面可是没有一张图片的哦） 页面预览：http://211.140.7.173:8081/t/wuhairui/表情包/ （顶赞） <div class="emoji emoji--like"> &l...
CSS+transform画动态表情
weixin_30836759的博客
03-31 173
先给大家看下画完后是什么样子： 代码看这里： html代码： <body> <div class="emoji emoji_like"> <div class="emoji_hand"> <div class="emoji_thumb"></div&gt...
css3实现3D盒子
LC的博客
05-18 615
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin:0;} html,body{height: 1...
CSS3——3D变形 transform
流楚丶格念的博客
07-15 4673
3D变形(CSS3) transform 2d x y 3d x y z 左手坐标系 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图 简单记住他们的坐标： x左边是负的，右边是正的 y 上面是负的， 下面是正的 z 里面是负的， 外面是正的 rotateX() 就是沿着 x 立体旋转.
HTML5 CSS3 ： 3D立方体旋转动画实例源码
07-12
CSS3的3D变换是实现动态效果的关键。`transform`属性可以对元素应用2D或3D转换，包括旋转（`rotateX`, `rotateY`, `rotateZ`）、平移（`translateX`, `translateY`, `translateZ`）和缩放（`scaleX`, `scaleY`, `...
CSS3实现3D透明立体盒子
GaHoOo的博客
10-19 2390
想要利用CSS3实现透明3D立体盒子 就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码 因此我设置了6个div，作为立方体的6个面 因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置 它才能展现出来。 .trangel div:nth-of-type(1){ left: 0; top:-10...
CSS3 3D转换之3D旋转 rotate
qq_43394976的博客
10-31 2204
一、沿着X轴旋转 rotateX 立体感不够，可以加一个透视perspective，注意要加在观察元素的父盒子上面 就可以变成这个样子 二、沿着Y轴旋转 rotateY transform: rotateY(360deg); 三、沿着Z轴旋转rotateZ transform: rotateZ(360deg); 和2D旋转差不多 四、还可以自定义旋转轴 ...
如何用css实现一个3D旋转照片墙
最新发布
qq_53983648的博客
11-14 3546
关于入门级css实现3D照片墙效果案例
CSS3仿Facebook表情包图标动画特效
06-12
一款CSS3仿Facebook表情包图标动画特效，非常可爱的动态表情特效CSS3代码。
纯CSS3绘制可爱小男孩动画 超酷面部表情
08-23
之前我们分享过几个纯CSS3动画特效，比如纯CSS3人物行走动画就非常酷，还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。
纯CSS3实现可爱的表情动画
08-23
CSS3非常强大，我们可以利用CSS3相关特性绘制很多平面图形，并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画。一共有7组表情动画，我们可以在文章底部将这些表情用作读者看完文章的心情。
CSS3汤圆可爱表情动画特效
04-25
CSS3汤圆可爱表情动画特效是一款基于css3绘制的一碗可爱的汤圆表情，汤勺捞起一个汤圆动画特效。
canvas绘制表情包的示例代码
12-13
本文介绍了canvas绘制表情包的示例代码，分享给大家，具体如下： 绘制卡通笑脸 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 画脸,设置脸的填充颜色为 '#fff' context.fillStyle = '#fff'; context.beginPath(); context.arc(150, 150, 60, 0, Math.PI*2); context.closePath(); context.fill(); // 画眼睛,设置眼睛的填充颜色为 'r
运用CSS3制作3D盒子骰子
qq_44544363的博客
05-28 699
运用CSS3制作3D盒子骰子 最近好像CSS3上瘾了，特喜欢找动画效果来练手（空闲时间），这不，我参照人家制作的3D盒子制作了一个骰子，参照链接： https://www.cnblogs.com/dtdxrk/p/4466175.html 3D骰子如下图，由于某种因素掺杂就不放动图了，看一下图版： HTML代码如下，list是骰子点的样式： 我们来看一下骰子平面图，如下图，1和4是这时重叠起来的： CSS代码如下，骰子点的样式我收起来了（因为太多太长了），红色框框的要在写完骰子点后加上让它们折叠成立方
用css3 3d效果做一个立体盒子
Cat_LIKE_Mouse的博客
07-30 1549
想要做立方体的盒子 需要了解几个知识点 旋转 transform：rotate 基点的设置transform-origin 3d设置transform-style：preserve-3d 移动：transform：translat
有关CSS3 3D盒子模型的一些总结
weixin_46560512的博客
11-13 470
    以前就想学CSS3动画，觉得挺高级的，但后来因为一些原因，没能理解好，也没有时间，最近重新学了一波。为了帮助那些像我一样理解能力不太好的人（同时也使自己更好的理解知识点），这里做一下总结。主要是我在学习过程中遇到的一些问题，如果有写的不清晰的，希望大家能够指正。     一、perspective设置透视： 如上图所示透视可以理解成图中的d，即眼睛到显示屏的距离，当透视的值变小，可以理解成人走进了去看物体，那么物体就变大了； （注意:在设置时，perspective要加到父级盒子里面，eg:per
css3 3d 盒子写法01
天天的博客
02-19 272
  第二步，展开盒子六个面  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值