<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #ffa5a5;
}
.cen{
width: 200px;
height: 200px;
background-color: #d5093c;
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
/*执行动画的调用*/
animation: 1s aj infinite;
}
.lef{
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下 右上左下 */
/*border-radius:10px 60px;*/
/*border-radius:10px 20px 30px 40px;*/
position: absolute;
top: 200px;
left: 200px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 341px;
}
.c{
/*旋转角度*/
transform: rotate(45deg);
position: absolute;
top: 269px;
left: 271px;
}
/*CSS3中的动画*/
@keyframes aj{
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
@-moz-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
from{}
to{}
}
@-webkit-keyframes name{
from{}
to{}
}
</style>
</head>
<body>
<div class="cen lef" ></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
<!--
CSS3中常用的属性
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下 右上左下 */
/*border-radius:10px 60px;*/
/*border-radius:10px 20px 30px 40px;*/
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
/*transform: scale(1.3);*/
/* X:水平的位移 Y ：垂直的位移 负数：上*/
/*transform: translate(0px,-5px);*/
/*2D角度的旋转 X Y*/
transform: skew(40deg,45deg);
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px #D5093C;
CSS3中的动画标签
@-ms-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
0%{}
50%{}
100%{}
}
-->
13、项目：搭建网页--京东购物车
/* body、模块、所有的标签、列表标签、有序列表、无序列表 将浏览器默认设置的 外边距 和 内边距 都去掉 */
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px;padding: 0px;}
/* body 中的所有内容都居中，初始字体大小设置为 14px */
body{text-align: center;font-size: 14px;}
/* 去掉 a（超链接）标签的 下划线 */
a{text-decoration: none;}
/* 去掉 li（列表）标签前面的点 */
li{list-style: none;}
