震惊！HTML竟可以做这个

最新推荐文章于 2021-06-03 20:02:24 发布

DaMeng1219

最新推荐文章于 2021-06-03 20:02:24 发布

阅读量255

点赞数 1

分类专栏：前端萌妹子文章标签： HTML 长心的树

本文链接：https://blog.csdn.net/DaMeng1219/article/details/99691724

版权

前端萌妹子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

震惊！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>

运行图：

其实是个动图，只是截取了一个面

在这里插入图片描述

DaMeng1219

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
震惊！HTML竟可以做这个

震惊！HTML竟可以做这个一棵长心的树：1. 使用的知识点：2D变换:transform1->2D变换:transform1)常用属性：(1)none：无转换；(2)translate();指定对象的2D平移，第一个参数代表X轴，第二个参数代表Y轴，如果第二个参数没有提供则默认值为0；有单独的对X轴Y轴的平移translateX，translateY。(3)scale...
复制链接

扫一扫

专栏目录