<!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. JS取整方法

    1.toFixed方法 定义:toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 例如:将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学 ...

  2. Intellij IDEA中配置TFS

    TFS是微软推出的一款研发过程管理利器,C#阵营的VS里做了默认集成,但是对于Java阵营的Intellij IDEA,需要安装插件并进行相应配置才能使用: 1.打开配置 2.搜索并安装插件 3.配置 ...

  3. STM32 MacOS开发

    CLion + STM32CubeMX + STLINK 安装CLion jetbrain官网 汉化补丁 安装homebrew ...略 安装STlink命令工具 $ brew install stl ...

  4. mac搭建nginx

    0.介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler ...

  5. 值得一学的C语言

    P1085 不高兴的津津 #include <stdio.h> int main( ) { int a,b; int max=0; int result; for (int i = 0; ...

  6. python假设一段楼梯共 n(n>1)个台阶，小朋友一步最多能上 3 个台阶，那么小朋友上这段楼 梯一共有多少种方法

    我们先把前四节种数算出来(自己想是哪几类,如果你不会算,那就放弃写代码吧,干一些在街上卖肉夹馍的小生意,也挣得不少) 标号 1    2    3     4 种类 1    2    4     7 ...

  7. REST接口

    全名是Representational State Transfer REST是设计风格而不是标准 建议将JSON格式作为标准响应格式 -------------------------------- ...

  8. Flask—路由的注册方法

    第一种注册方法 from flask import Flask app = Flask(__name__) @app.route("/hello") # 第一种注册方法 def h ...

  9. 八十九、SAP中ALV事件之三，查看事件自带说明

    一.双击REUSE_ALV_GRID_DISPLAY,来到SE37的这个函数模块中,查看IT_EVENT的相关说明,点击后面的显示按钮 二.翻译第一句 三.翻译第二句 四.翻译第三句 五.翻译第四句 ...

  10. kafka创建topic，生产和消费指定topic消息

    启动zookeeper和Kafka之后,进入kafka目录(安装/启动kafka参考前面一章:https://www.cnblogs.com/cici20166/p/9425613.html) 1.创 ...