用css3拼凑出来的桃心

最新推荐文章于 2023-03-13 19:10:25 发布

原创最新推荐文章于 2023-03-13 19:10:25 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#after #transform #旋转 #before #设置

html5&&css3 专栏收录该内容

37 篇文章

订阅专栏

demo地址：http://codepen.io/tianzi77/pen/qdWjdJ
先定义图片旋转起点transform-origin，
然后改变旋转角度transform：rotate（xdeg）
最后实现2个图片拼成好看的桃心，用：before和：after进行连接。
content设置为空。
样式代码：

<style type="text/css">
        #heart {
            position: relative;    
            width: 500px;    
            height: 90px;
            }
            #heart:before,#heart:after{    
                position: absolute;    
                content: "";    
                left: 50px;    
                top: 0;    
                width: 50px;    
                height: 80px;    
                background: orange;    
                -moz-border-radius: 50px 50px 0 0;    
                border-radius: 50px 50px 0 0;    
                -webkit-transform: rotate(-45deg);       
                -moz-transform: rotate(-45deg);        
                -ms-transform: rotate(-45deg);         
                -o-transform: rotate(-45deg);            
                transform: rotate(-45deg);    
                -webkit-transform-origin: 0 100%;       
                -moz-transform-origin: 0 100%;        
                -ms-transform-origin: 0 100%;        
                 -o-transform-origin: 0 100%;            
                 transform-origin: 0 100%;
                 }
                 #heart:after{    
                    left: 0;    
                    -webkit-transform: rotate(45deg);       
                    -moz-transform: rotate(45deg);        
                    -ms-transform: rotate(45deg);         
                    -o-transform: rotate(45deg);            
                    transform: rotate(45deg);    
                    -webkit-transform-origin: 100% 100%;       
                    -moz-transform-origin: 100% 100%;        
                    -ms-transform-origin: 100% 100%;         
                    -o-transform-origin: 100% 100%;            
                    transform-origin :100% 100%;
                 } 

    #xiaozhe{
        position: absolute;
        left: 33px;
        top: 19px;
        font-family: "微软雅黑";
        font-weight: bolder;
        text-shadow:1px 1px 1px yellow;
        color: green;
        font-size: 27px;
        margin: 0 auto;
    }
    #xiaozhe:hover{
        transform:scale(1.1,1.1);
        cursor: pointer;
    }
</style>

内容代码：

    <div id="heart">
    </div>
    <span id="xiaozhe">小哲</span>