css3做一个爱心

CSS3是一种用于网页设计和开发的样式表语言，其功能非常强大。今天，我们来尝试使用CSS3做出一个可爱的爱心。

/* 首先，在CSS文件中定义一个div元素，作为爱心的容器 */.heart {
    width: 100px;
    height: 100px;
    position: relative;
}
/* 接着，使用伪元素:before和:after绘制爱心的左半部分和右半部分 */.heart:before,.heart:after {
    content: "";
    background-color: red;
    border-radius: 50px 50px 0 0;
    position: absolute;
}
/* 左半部分 */.heart:before {
    width: 50px;
    height: 50px;
    top: 0;
    left: 25px;
    transform: rotate(-45deg);
}
/* 右半部分 */.heart:after {
    width: 50px;
    height: 50px;
    top: 0;
    right: 25px;
    transform: rotate(45deg);
}
/* 最后，加上一个小圆形就完成了一个可爱的爱心 */.heart:before {
    border-radius: 50px 50px 0 0;
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1);
}
.heart:after {
    border-radius: 50px 50px 0 0;
    box-shadow: inset -5px 5px 5px rgba(0,0,0,0.1);
}
.heart:before {
    background-color: #fc2f68;
}
.heart:after {
    background-color: #fc2f68;
}
.heart:before {
    z-index: 10;
}
.heart:after {
    z-index: 10;
}
.heart:before {
    transform: translateX(5px) translateY(5px);
}
.heart:after {
    transform: translateX(-5px) translateY(5px);
}
.heart {
    animation: beating 1s ease-in-out infinite;
}
@keyframes beating {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
}
}
    

试着把上面的代码复制到你的CSS文件中，并在HTML页面中添加以下代码：

div class="heart">
    /div>
    

打开页面，你会看到一个可爱的红色爱心，它会在页面上上下跳动，为你的页面添加了一些浪漫和温馨的感觉。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！