<!DOCTYPE html>
<html lang="en">
<!-- 头部标签 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>just do it!</title>
<style>
/* style 给网页中的标签去装饰 CSS样式*/
/* body <!-- 标签选择器 --> */
body{
/* 外边距 默认为8px */
margin: 0;
background-color: black;
}
/* .heart 命名 类选择器 css'样式 */
.heart{
/* 宽度 200 像素 （单位）
高度200像素 */
width: 200px;
height: 200px;
margin: 100px auto;
/* auto 自动相等 */
/* 背景颜色 */
background-color:black ;
/* 播放动画 复制动画名称 beat 加上 时间 */
animation: beat 0.5s linear infinite alternate;
/* linear 线性的运动 infinite 无限的播放 alternate -- 反向循环 */
}
/*CS 的动画 关键的画面、关键帧 scale(1)开始 scale（1.1） 结束 */
@keyframes beat{
/* 动画开始的画面 */
0%{
transform: scale(1);
/* 缩小方法 1 倍数 默认大小为1倍*/
}
100%{
transform: scale(1.2);
}
}
/* 逗号隔开 ：并且 */
/* class 名称 选的就需要点. 代替 同时选择 宽高大小一样 */
.left,.right{
/* 浮动 横排显示 left 方向从左至右*/
float: left;
width: 100px;
height: 160px;
background-color: pink;
border-radius: 50px 50px 0 0;
/* 顺时针方向 设置 圆角弧度 */
box-shadow: 0px 0px 20px 0px pink;
/* 阴影的-- 1水平横向移动 2纵向 3模糊半径 4影子大小 阴影颜色 */
}
.left{
/* 变换 scale缩放 rotate 旋转 （多少度） 负的为逆时针旋转 正为顺时针 */
transform: translateX(29px) rotate(-45deg);
/* translate 位移 X 像素 */
}
.right{
transform: translateX(-29px) rotate(45deg);
/* translate 位移 X 像素 */
}
</style>
</head>
<body>
<!-- class 类选择器 -->
<!-- 标签的默认情况是透明的 -->
<div class="heart">
<div class="left"></div>
<div class="right"></div>
<!-- 独占一行 div 性质 -->
</div>
</body>
</html>
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
