HTML 3D表白爱心
程序员文章站
2022-03-07 17:08:54
...
代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes ani{
from{
transform:rotateY(0deg) rotateX(0deg);
}
to{
transform:rotateY(360deg) rotateX(360deg);
}
}
body{
perspective:1000px;
}
#heart{
position:relative;
height:200px;
width:150px;
margin:200px auto;
animation:ani 5s linear infinite;
transform-style:preserve-3d;
}
.line{
position:absolute;
height:200px;
width:150px;
border:2px solid red;
border-left:0;
border-bottom:0;
border-radius:50% 50% 0/50% 40% 0;
}
#word{
font-family:"隶书";
font-size:1.3em;
color:red;
position:absolute;
top: 80px;
left:22px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="heart">
<div id="word">I Love You</div>
</div>
<script>
var heart=document.getElementById("heart");
var html="";
for(var i=0;i<36;i++){
html+="<div class='line' style='transform:rotateY("+i*10+"deg) rotateZ(45deg) translateX(25px)'></div>";
}
heart.innerHTML += html;
</script>
</body>
</html>知识点:
1. border-radius的属性值有8个,斜杠前是水平方向,斜杠后是垂直方向
eg: border-radius:50% 50% 0%/50% 40% 0;
2.注意HTML代码的书写规范,腾讯的 http://alloyteam.github.io/code-guide/百度的 https://github.com/ecomfe/spec
3. 3D字体随笔
3.1. 伪3D字体
特点:该方法制作的3D字体是在2D平面上实现的,就像在纸上画水滴一样,看起来是3D的,但它只是使用光线等手法实现的伪3D.
代码:
<style>
.demop{
text-shadow: 1px -1px #CCC,
2px -1px #BBB,
3px -2px #AAA,
4px -2px #999,
5px -3px #888,
6px -3px #777;
font-size:2em;
}
</style>
<p class="demop">测试用例</p>
3.2. 3D字体
思路:使用制作长方体的方法,正方体的六个面分别对应字体的正视图,侧视图,俯视图
缺点,太麻烦了.需要单独制作六个页面的显示图形.
下一篇： win10虚拟网卡安装失败怎么办？