<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Title</title>
<meta name="Keywords" content="关键词,关键词"/>
<meta name="description" content="描述"/>
<!--css样式 层叠样式表 修饰网页-->
<style type="text/css">
* {margin: 0;padding: 0;}
.love{
width:250px;
height:250px;
position:absolute;
left:50%;
top:50%;
margin-left:-125px;
margin-top:-125px;
animation:move 0.5s infinite alternate;
}
@keyframes move{
100%{
transform:scale(1.5);
}
}
.love div{
position:absolute;/*绝对定位 相对于已经已经定位的父元素进行位移 特性：会使元素脱离文档流（在页面中不占位置）*/
width:150px;/*宽度 */
height:230px;/*高度 px像素/单位*/
background-color:#ff00ff;/*背景 颜色 #十六进制颜色值*/
border-radius:100px 100px 0 0;/*圆角 左上 右上 右下 左下*/
transform:rotate(-45deg);/*transform变换 rotate旋转 deg角度*/
}
.love .right{
left:57px;
transform:rotate(45deg);/*transform变换 rotate旋转 deg角度*/
}
</style>
</head>
<body>
<!--
div:
盒子 通用型的流内容 容器
有宽度有高度的长方形
class名字 命名的原则：见名知意 不能用中文
id 身份证
SEO 搜索引擎优化
it 面试 笔试
html+css JavaScript/js h5 vue react node.js 微信小程序
利他之心
切图仔
种一棵树最好的时间是十年前 其次就是现在
潭州林俊杰
面包机
官方报名老师 635900003
木马老师QQ：2655371678
-->
<div class='love'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
