zoukankan      html  css  js  c++  java
  • 纯css 制作简单的爱心

    网页中我们用到爱心❤的地方不少,如看到一篇喜欢的文章给他点个赞,表白你喜欢的女孩,给他比个小心心什么的。

    今天用纯css写一个简单的爱心。

    简单思路如下:

    1.先做一个盒子,里面包含两个小盒子

    2.两个小盒子弄成一样大小的长方形

    3.通过border-radius、transform,进行调整,整合成一个爱心

    代码如下:

    HTML部分:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title> 爱心</title>
        </head>
        <body> 
            <div class="contain">
                <div class="right"></div>
                <div class="left"></div>
                
            </div>
        </body>
    </html>

    css部分:

     .contain{
                    width: 300px;
                    height:300px;
                    margin:100px auto;
                }
                .left{
                   float: left;
                    width: 150px;
                    height: 228px;
                    background: red;
                    border-radius: 100px 100px 0 0;
                    transform:translateX(-95px) rotate(45deg);
                    
                }
                .right{
                    float: left;
                    width: 150px;
                    height: 228px;
                    background: red;
                    border-radius: 100px 100px 0 0;
                    transform: rotate(-45deg);
                }

    注:因各浏览器对css3支持不一的关系,所以需要在transform前加各种浏览器识别前缀,我这偷了个懒就没详细写上了。

    -ms-transform:rotate(7deg); //-ms代表ie内核识别码
    -moz-transform:rotate(7deg); //-moz代表火狐内核识别码
    -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
    -o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码
    transform:rotate(7deg); //统一标识语句。

    最后一句最好还是写上,符合w3c标准。

     



  • 相关阅读:
    js 正则表达式 test match exec三个方法的异同
    网页使用MD5加密
    解决Google地图和字体api无法加载的问题(转)
    Javascript 的addEventListener()及attachEvent()区别分析
    get与post的区别
    清除浮动的几种方法
    zoom属性(IE私有属性)
    class,id和name的区别
    深夜偷精之反射函数
    jQuery和js区别
  • 原文地址:https://www.cnblogs.com/smile-xin/p/11352330.html
Copyright © 2011-2022 走看看