CSS3绘制3D盒子,动态害羞表情包
2024-05-10 02:51:18
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>
以上效果都是我自己瞎捣鼓的,对本篇文章有任何的疑问或者有更好的建议,可以在下方留言
CSS3绘制3D盒子,动态害羞表情包相关推荐
- 运用CSS3制作3D盒子骰子
运用CSS3制作3D盒子骰子 最近好像CSS3上瘾了,特喜欢找动画效果来练手(空闲时间),这不,我参照人家制作的3D盒子制作了一个骰子,参照链接: https://www.cnblogs.com/dt ...
- css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理 众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形. 为了使指针转动起来,我们需要使用-webkit-transfo ...
- 用html5做立体盒子,css3制作3d盒子
本文首发于我的博客,这是我的github,欢迎star. 一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下,再写一些和盒子互动的操作.这里是要做的效果 ...
- python 怎么将数组转为列表_怎么将视频转为GIF动态图 表情包怎么制作
说到GIF,大家应该都不陌生了吧!尤其是在聊天中使用较多,似乎一言不合就开启了斗图模式,但是我们平时使用的GIF一般都是软件中自带的,其实自己制作也是很方便的,而且会发现很有趣,不但可以直接录制成GI ...
- 用 matplotlib 绘制 3D 时间序列动态图
时间序列动态图是显示时间演变的非常强大的工具,但 matplotlib 的默认动态图很简单,不太适合用于比较多个时间序列. 动态图被广泛使用:从解释神经网络如何训练,到显示合成时间序列统计数据或波动率 ...
- 自己的视频怎么做成gif动态表情包？
自己的视频怎么做成gif?视频做成动态gif表情包制作方法是什么?如何制作GIF动图?下面gif中文网就来介绍一下gif制作的方法吧.( 入口:一键合成高清gif动图-在线gif制作工具-gif.cn ...
- python画动态表情包_python还可以这么玩（三）？
在表情包中,静态的单张表情包有时候已经满足不了我们的搞怪了,这时候需要更需要一张搞怪的gif动态的表情包,前面两篇文章主要讲解了制作单张的表情包,大家不要以为python只能制作单张的表情包,多张动态 ...
- C语言编写 小企鹅表情包
使用 C 语言调用 EasyX 绘图库绘制小企鹅表情包,简直太可爱了! 简单分析一下,这个小企鹅的构成,主要是由黑白颜色和简单的圆与椭圆构成,也不是很复杂,如果能够通过平移它的位置和上下位置,就可以实 ...
- ogre绘制3d图形_R语言统计与绘图：绘制饼图
饼图也是最常见的图形之一,饼图在商业世界中无所不在,然而多数统计学家,包括相应R文档的编写者却都对它持否定态度. 相对于饼图,更推荐使用条形图或点图,因为相对于面积,人们对长度的判断更精确. 今天来学 ...
最新文章
- 3月24日下午专家聊天室：轻松掌握WCF 帮你找到入门砖
- springmvc-配置文件
- sdutoj-4209-移动小球
- js中常用的正则表达式
- [骗分技巧——随机化Ⅱ] [Poi2014]Couriers，CodeChef - TKCONVEX
- Android之ZXing扫描二维码以及生成二维码
- 小米两高管科普Redmi K50电竞版快充细节：挑战最快边玩边充
- Ccover在hudson持续集成中的应用
- c# 第七节 编程规范，vs中的各种设置
- 在Windows Azure平台上部署服务
- 在python中怎么排序_怎么在python的字典中进行排序
- 【Axure原型分享】会议管理原型模板
- SSRF漏洞原理及检测
- Ambari 安装多个impala deamon节点（apache impala）
- 五行灵根 鸿蒙珠,异世鸿蒙武神
- 群晖服务器名修改,闻上云刷黑群晖后免拆机修改序列号和mac地址
- 【单片机开发平台】msp430几种不同开发平台的对比
- NBMA网络中的OSPF实验（MGRE）
- 昨夜西风凋碧树，独上高楼，望断天涯路————马哥培训第二天
- 蓝桥杯省赛真题2014题解