<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页</title>
    <style type="text/css">
        /*存放元素的区域*/
        html,body{
                    height:100%;
                }
        .content{/*存放元素的区域*/
        position:relative;
        width:200px;
        height:200px;
        background-color: #368;

        margin:auto;

        }

        .love{
        position:relative;
            width:200px;
            height:180px;
            background: silver;
        }

        .love .left{
        position:absolute;
        left:32px;
            width:100px;
            height:150px;
            background: red;
            border-radius:50px 50px 0 0;
            /* 对应的长度 得出弧度*/
            transform:rotate(-45deg);/*css3 形变,逆时针旋转45度*/

        }

            .love .right{
        position:absolute;
        left:68px;
            width:100px;
            height:150px;
            background: red;
            border-radius:50px 50px 0 0;
            /* 对应的长度 得出弧度*/
            transform:rotate(45deg);/*css3 形变,逆时针旋转45度*/
        }
        .love .left,.love .right{

        }

    </style>
</head>
<body>
    <!--  -->
        <div class='content'>
            <div class='love'>
                <div class='left'></div>
                <div class='right'></div>
            </div>
        </div>

</body>
</html>

使用html画爱心的更多相关文章

  1. 程序员式优雅表白，教你用python代码画爱心

    还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧! 用python代码画爱心的思路是怎样的? 1.怎么画心形曲线 2.怎么填满心 ...

  2. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  3. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  4. 用C语言制作爱心

    国庆我们实验室布置了作业,其中一项为,利用流程控制语句打印以下图形 * *** ***** ******* ***** *** * 代码如下 #include <stdio.h> int ...

  5. java swing画图片爱心

    第一次用swing做一个可视化程序,写第一篇随笔,有写的不好的地方请多多见谅.上个星期三在网上看到一个画爱心的软件,就想着自己用java也实现一个程序,画爱心用到的数学函数知识在网上百度的,不是本人原 ...

  6. 这个七夕节，用Python为女友绘制一张爱心照片墙吧！【华为云技术分享】

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群:输入关键字“最新活动”,获取华为云最新特惠促销.华为云诸多技术大咖.特 ...

  7. 【Python】画一个心形

    #!/usr/bin/env python # -*- coding:utf-8 -*- import turtle import time # 画心形圆弧 def hart_arc(): for i ...

  8. python画一颗拳头大的💗

    用上turtle库后,各种画,今天画个拳头大的爱心@.@. 下面贴下代码: # -*- coding: utf-8 -*- # Nola import pygame import time impor ...

  9. 爱心跳动效果 CSS实现

    爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...

随机推荐

  1. elasticsearch kibana logstash(ELK)的安装集成应用

    官网关于kibana的学习指导网址是:https://www.elastic.co/guide/en/kibana/current/index.html Kibana是一个开源的分析和可视化平台,设计 ...

  2. 题解：luogu P1247

    大概没你们说得复杂吧...... \(Part\;1\) \(Nim\)游戏 大家都对异或和感到懵逼吧(排除大佬),其实很简单,用\(SG\)函数打表计算即可解决: 抛个板子: void get_sg ...

  3. RPC_E_SERVERFAULT excel com操作错误

    遇到多次了,以管理员身份启动excel,禁用第三方加载项,解决. 我遇到几次都是 foxit pdf reader导致的.

  4. 在 .net 中释放嵌入的资源

        private static void ExtractResourceToFile(string resourceName, string filename) {     if (!Syste ...

  5. tab选项卡，不带自动切换定时器

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  6. 史无前例！一季度Facebook移除22亿假账号

    导读 北京时间5月26日上午消息,Facebook表示平台在第一季度移除了22亿虚假账号.这一创纪录的数据显示了这家公司正在与大量试图破坏全球最大社交网络真实性的负面因素进行斗争. 北京时间5月26日 ...

  7. 九十二、SAP中ALV事件之六，复制一个标准工具栏到自己的程序

    一.我们来到SE41,点击复制状态按钮 二.点击复制状态后,弹出一个框框,上面是模板内容,下面是我们自己的程序 三.我们根据上一篇的标准模板内容,填好相应的模板和我们的程序的内容 三.点击复制按钮 五 ...

  8. 001、MySQL查询服务器版本号和当前日期

    SELECT VERSION(), CURRENT_DATE; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.

  9. 150-PHP nl2br函数（一）

    <?php $str="h t m l"; //定义一个多处换行的字串 echo "未处理前的输出形式:<br />{$str}"; #nl2 ...

  10. oracle11g导出dmp文件时不能导出空表，导致缺表

    一.执行 select 'analyze table '||table_name||' compute statistics;' from user_tables; 将该查询语句查询到的结果粘贴到sq ...