您的位置：首页 > Web前端 > CSS

#学习笔记#(41)CSS3画心

2016-02-11 23:48 597 查看

原理，两个圆与正方形组合而成，正方形边长与圆的直径相等

代码如下

<html>
<head>
<meta charset="utf-8" />
<style>
.box{
width:200px;
height:200px;
margin:50px auto;
animation:size 1s infinite;
animation-direction:alternate;
transition:1s all;
}
.round1{
width:100px;
height:100px;
border-radius:50%;
background-color:red;
float:left;
position:absolute;
}
.round2{
width:100px;
height:100px;
border-radius:50%;
background-color:red;
float:left;
position:absolute;
margin-left:80px;
}
.rec{
width:100px;
height:100px;
background-color:red;
float:left;
position:absolute;
margin-top:40px;
margin-left:40px;
transform:rotateZ(45deg);
}
@keyframes size{
0%{
transform:scale(0.6);
}
100%{
transform:scale(1);
}
}
</style>
</head>
<body>
<div class="box">
<div class="round1"></div>
<div class="round2"></div>
<div class="rec"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航