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

于 2018-08-03 10:40:36 发布
阅读量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_
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值