css+html 爱心❤

效果
在这里插入图片描述

代码实现
html

 <div class="main">
        <div class="aixin"></div>
    </div>

css

.main {
        transform: rotate(-45deg);

    }

    .aixin {
        height: 100px;
        width: 100px;
        background-color: red;
        margin: auto;
        margin-top: 200px;
        position: relative;
        /* transform: rotate(-45deg); */
        box-shadow: 3px 3px 20px;
        animation: jump 1s ease-in-out infinite alternate-reverse;
    }

    @keyframes jump {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);

        }
    }

    .aixin:after {
        /* 必须写concent */
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0px;
        left: 55px;

    }

    .aixin:before {
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: -55px;
        left: 0;
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/632670.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

给app引导页说goodbye吧,皮之不存,毛将焉附。

有几个原因导致大部分创业者选择不开发独立的移动应用程序&#xff08;App&#xff09;&#xff1a; 成本和资源&#xff1a;开发和维护一个独立的移动应用程序需要投入大量的时间、资金和人力资源。对于创业公司来说&#xff0c;他们可能没有足够的资源来支持这样的开发和维护…

大数据性能测试怎么做?看完这篇终于懂了!

大数据性能测试的目的 1.大数据组件的性能回归&#xff0c;在版本升级的时候&#xff0c;进行新旧版本的性能比对。 2.在新版本/新的生产环境发布之后获取性能基线&#xff0c;建立可度量的参考标准&#xff0c;为其他测试场景或者调优过程提供对比参考。 3.在众多的发行版本…

【好书推荐-第十六期】《 LangChain技术解密:构建大模型应用的全景指南》(Github 6800+示例!)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公众号&#xff1a;洲与AI。 &#x1f388; 本文专栏&#xff1a;本文收录…

【Flask 系统教程 6】进阶操作

Flask操作cookie 在 Flask 中操作 Cookie 是相对简单的。Cookie 是一种存储在用户计算机上的小型数据片段&#xff0c;由服务器发送到用户浏览器&#xff0c;然后在每次请求时由浏览器发送回服务器。在 Flask 中&#xff0c;你可以使用 request 对象来读取 cookie&#xff0c;…

【Maven】简介_下载安装

1.maven简介 项目管理工具项目对象模型 project object model (POM) 一个项目&#xff1a;清理、编译、测试、打包、发布、部署 1.1 为什么需要使用maven 组装机和品牌机的概念IDE &#xff08;集成开发环境&#xff09;不是万能的依赖大量的手工操作&#xff0c;编译、测试、…

npm install [Error]

npm install 依赖的时候报错 依赖版本问题的冲突&#xff0c;忽视即可 使用 npm install --legacy-peer-deps

个人写表格辅助软件

该软件作用 Excel 的辅助&#xff0c;可以执行excel不方便的操作&#xff0c;从excel复制数据到软件进行操作又复制回Excel。 下载软件地址 ,大小&#xff1a;65kb 点击下载 完整UI 列操作 右键单击列名弹出菜单 单元格操作 右键单击单元格弹出菜单 导航模式 每个操作都可以…

如何给实拍添加旋转模糊效果?视频模糊特效PR模板剪辑素材

PR特效模板&#xff0c;高级旋转模糊效果视频模板剪辑素材。 特征&#xff1a; After Effects 2019及以上兼容项目。 Premiere Pro 2021及以上兼容项目。 可用分辨率&#xff08;4K–HD–方形–移动&#xff09;。 不需要插件。 包括教程。 免费下载&#xff1a;https://prmu…

什么是电表智能抄表?

1.什么叫电表智能抄表 电表智能抄表&#xff0c;又被称为全自动读表系统&#xff0c;是一种利用通信网技术&#xff0c;如wifi网络、物联网技术或通信网络&#xff0c;全自动收集解决电能消耗数据信息的软件。与传统手动式抄水表方式相比&#xff0c;它大大提高了高效率&#…

Hadoop大数据应用技术复习题分析

文章目录 复习一一. 单选题二. 多选题三. 填空题 复习三一. 单选题 复习一 一. 单选题 (单选题)压缩速度由大到小snappy、LZO、gzip、bzip2&#xff0c;压缩比最大的是 A. snappy B. LZO C. gzip D. zip2 正确答案: D:zip2; 答案解析&#xff1a; 压缩率&#xff1a;zip2>…

Jenkins使用目录挂载实现自定义node版本

场景&#xff1a;研发同事需要一个指定版本的npm环境&#xff0c;但是现在使用的是docker部署的jenkins&#xff0c;在不新构建jenkins镜像的前提下&#xff0c;选择挂载方式解决。 1.下载nodejs 16版本的nodesource-nodejs.repo仓库脚本 cd /etc/yum.repos.d/ curl -sL http…

【Linux】Udp_Tcp协议

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Linux 目录 &#x1f449;&#x1f3fb;再谈端口号pidof命令 &#x1f449;&#x1f3fb;UDP协议报文的管理基于UDP协议的应用层协议 &#x1f449;&#x1…

mysql 多表关联执行计划 mysql 多表关联优化

desc SELECT * FROM expense_application a left join expense_application_detail b on a.order_no b.order_no LIMIT 10; 和 explain SELECT * FROM expense_application a left join expense_application_detail b on a.order_no b.order_no LIMIT 10; 这两种写法是一样…

持续拥抱鲲鹏生态 星辰天合深化信创存储能力

近日&#xff0c;鲲鹏昇腾开发者大会与广电五舟“2024 智算中国行”北京站陆续召开&#xff0c;星辰天合持续拥抱鲲鹏生态&#xff0c;以重要的合作伙伴身份受邀参加&#xff0c;并在鲲鹏昇腾开发者大会上荣获“甄选解决方案最佳应用软件奖”&#xff0c;在广电五舟“2024 智算…

C++学习~~string类

1.STL简单介绍 &#xff08;1&#xff09;标准模版库&#xff0c;是C里面的标准库的一部分&#xff0c;C标准库里面还有其他的东西&#xff0c;但是我们不经常使用&#xff0c;我们经常使用的还是STL这个标准库部分。 &#xff08;2&#xff09;六大件&#xff1a;仿函数&…

Microsoft Threat Modeling Tool 使用(三)

Boundary&#xff08;边界&#xff09; 本文介绍信任边界&#xff0c;基于 SDL TM Knowledge Base (Core) 模版&#xff0c;这是一个通用的威胁建模模板&#xff0c;非常适合初学者和大多数威胁建模需求。 这些边界&#xff08;Boundary&#xff09;在微软威胁建模工具中用于表…

如何重启Windows系统上的Mysql服务

很久很久之前&#xff0c;我想把我的一台windows笔记本当比服务使用&#xff0c;当时还没有搞wsl, 试了vmware在局域网内总是断连。然后就直接在 windows系统上装了一个 windows版本的Mysql81。 有一天需要修改最大连接数&#xff0c; 费了挺大的劲终于找到了配置文件 my.ini…

在云服务器上运行StyleGAN3生成伪样本

首先是传入数据&#xff0c;这里我们不做赘述。 对于数据格式的裁剪&#xff0c;可以通过以下代码进行&#xff1a; from glob import glob from PIL import Image import os from tqdm import tqdm from tqdm.std import trangeimg_path glob(r"C:\Users\Administrato…

Windows Docker安装运行Nacos

#下载Nacos docker pull nacos/nacos-server #可以创建docker中nacos网络&#xff0c;如果以后要使用docker中的mysql存储nacos配置的话&#xff0c;本文使用本地机器mysql&#xff0c;暂用不到 docker network create nacos_network #暂时先运行docker docker run --nam…

python手写数字识别(PaddlePaddle框架、MNIST数据集)

python手写数字识别&#xff08;PaddlePaddle框架、MNIST数据集&#xff09; import paddle import paddle.nn.functional as F from paddle.vision.transforms import Compose, Normalizetransform Compose([Normalize(mean[127.5],std[127.5],data_formatCHW)]) # 使用tran…