<!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. SpringBoot-配置Java方式

    SpringBoot中使用Java方式配置步骤如下: 在类上加入@Configuration注解,代表作为配置类 在该类方法上加入@Bean注解,代表将方法返回的Bean加入Spring容器 在该类中 ...

  2. ACM-Antiprime数

      问题描述: swust打不开,随便找了个博客.... 对于任何正整数x,起约数的个数记做g(x).例如g(1)=1,g(6)=4. 定义:如果某个正整数x满足:对于任意i(0<i<x) ...

  3. TextView标签的属性和跑马灯效果

    text:显示的内容 textSize:文本的大小 textColor:文本的颜色 visibility:可见性  默认可见,invisible:表示不可见,但对控件的显示区域做了保留 gone:隐藏 ...

  4. tomcat中war 和 war exploded的区别

    war和war exploded的区别(转载) 在使用idea开发项目的时候,部署Tomcat的时候通常会出现下边的情况: 是选择war还是war exploded这里首先看一下他们两个的区别: wa ...

  5. P-数学程序猿今天开始写博客了

    ∧          /| /\7          ≤_/      ∧. |      |         /   /      /        〉 |     Z_,<   /      ...

  6. 【转】ASP.NET Core 2.0中的HttpContext

      ASP.NET Core 2.0中的HttpContext相较于ASP.NET Framework有一些变化,这边列出一些之间的区别.   在ASP.NET Framework中的 System. ...

  7. MongoDB Projection

    版权所有,未经许可,禁止转载 章节 MongoDB 入门 MongoDB 优势 MongoDB 安装 MongoDB 数据建模 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB ...

  8. Mapper method 'com.xxxx.other.dao.MyDao.getNo attempted to return null from a method with a primitive return type (int)

    使用myBatis调用存储过程的返回值,提示错误信息: org.apache.ibatis.binding.BindingException: Mapper method 'com.xxxx.othe ...

  9. 代码化UI设计

    最近在阅读Qt 5.9 C++开发指南,为了加深对书本上内容的理解,参照书上的讲解尝试写了一些demo,用于以后工作中查阅,如果涉及侵权请告知,实例程序samp2_3 mydialog.h #ifnd ...

  10. cvthreshold 的运用

    什么是阈值? 最简单的图像分割的方法. 应用举例:从一副图像中利用阈值分割出我们需要的物体部分(当然这里的物体可以是一部分或者整体).这样的图像分割方法是基于图像中物体与背景之间的灰度差异,而且此分割 ...