<!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. 清北学堂例题 LUOGU2519 【HAOI2011】PROBLEM A

    题目描述 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) 输入格式 第一行一个整数n,接下来n行每行两个整数,第i+1行 ...

  2. 项目启动报错：Communications link failure

    2017-12-29 10:43:19,776 ERROR [com.alibaba.druid.pool.DruidDataSource] - <init datasource error, ...

  3. L2d插件

    <script src="https://blog-static.cnblogs.com/files/yyhh/L2Dwidget.min.js"></scrip ...

  4. wireshark混杂模式

    来自:https://blog.csdn.net/mukami0621/article/details/78645825 通过设置网卡为混杂模式就能捕获局域网内所有发包内容,包括非广播包和非发给自己主 ...

  5. JumpServer简单使用

    笔记内容:简单使用jumpserver笔记日期:2018-01-22 23.9 创建jumpserver普通用户 23.10 添加机器 23.11 添加系统用户并授权 23.12 添加授权规则 23. ...

  6. python 首先生成包含1000个随机字符的字符串，然后统计每个字符的出现次数

    题目:首先生成包含1000个随机字符的字符串,然后统计每个字符的出现次数 import string import random x = string.ascii_letters + string.d ...

  7. Oracle 组函数count()

    1.count() 函数的参数除了可以是字段值和表达式外,还可以是“ * ”.如果是字段值或表达式,则忽略空值且考虑重复值:如果是“ * ”,则计算所有的行,也包括空值.如果要查询某字段非重复值的个数 ...

  8. VS Code 单文件、多文件（工程） 配置文件

    针对于单文件编译运行,需要在代码文件夹下建立子文件夹 .vscode ,并放置三个文件 1:c_cpp_properties.json,注意更改7.8.11行的路径 { "configura ...

  9. Emacs: 设置窗口标题格式

    Emacs默认的窗口标题常常比较简单,例如我的默认标题是"emacs@ubuntu".如果想要在标题中显示更多的信息,我们可以对它进行一些设置.由于Emacs的可扩展性,这种修改实 ...

  10. Reference在Essay写作中的最佳占比是多少？

    很多同学在写完Essay作业后 就觉得大功告成了 并不是很注重参考文献 导致查重率过高 面临抄袭.取消成绩. 甚至被退学的情况 或者在essay写作中勉强标出几处 非常随意的在后面列出 其实这是很不正 ...