震惊!HTML竟可以做这个
一棵长心的树:
1. 使用的知识点:
- 2D变换:transform
1->2D变换:transform
1)常用属性:
(1)none:无转换;
(2)translate();指定对象的2D平移,第一个参数代表X轴,第二个参数代表Y轴,如果第二个参数没有提供则默认值为0;有单独的对X轴Y轴的平移translateX,translateY。
(3)scale:指定对象的2D缩放,第一个参数代表X轴,第二个参数代表Y轴,如果第二个参数没有提供则默认值为第一个参数的值;有单独的对X轴Y轴的平移scaleX,scaleY。
(4)skew:指定对象的斜切扭曲,第一个参数代表X轴,第二个参数代表Y轴,如果第二个参数没有提供则默认值为0;有单独的对X轴Y轴的平移skewX,skewY。
2->动画:animation
1)常用属性:
(1)animation:对动画的设置;
(2)animation-name:检索或者设置对象所对应用的动画名称;
(3)animation-duration:检索或者设置对象动画的持续时间;
(4)animation-delay:检索或者设置对象动画延迟的时间;
(5)animation-timing-function:检索或者设置对像动画的过渡类型;
2.实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.root{
position: relative;
margin: 300px auto;
animation: rot 2s linear infinite alternate;
}
div{
width: 100px;
height: 10px;
transform:rotate(90deg);
}
div #ss{
width: 100px;
height: 150px;
transform:rotate(90deg);
position:absolute;
top:-70px;
right:-15px;
}
div div{
position: absolute;
left: 100px;
top: 0;
background: lightpink;
transform-origin: left center;
animation: tree 4.2s ease-in-out infinite alternate;
}
div div:nth-child(2){
background: #DDA0DD;
animation: tree_inverse 4.5s ease-in infinite alternate;
}
div div div div div div div div:nth-child(2){
background: lightcoral;
}
/*树枝*/
@keyframes tree{
from{
transform: rotate(-50deg) scale(0.7);
}
to{
transform: rotate(50deg) scale(0.7);
}
}
/*树枝inverse*/
@keyframes tree_inverse{
from{
transform: rotate(45deg) scale(0.7);
}
to{
transform: rotate(-45deg) scale(0.7);
}
}
/*树根*/
@keyframes rot{
from{
transform: rotate(-90deg);
}
to{
transform: rotate(-90deg);
}
}
</style>
</head>
<body>
<div class="root">
<img id="ss" src="../img/110.jpg" width="100px" height="50px"/>
/*div*2>div*2>div*2>div*2>div*2>div*2>div*2>div*2*/
//选中上一行代码,按tab键即可快速生成Div(代码太多就这样了)在最里面的div插入自己喜欢的图片 //就可以了。
</div>
</body>
</html>
运行图:
其实是个动图,只是截取了一个面