怎么使用CSS画

2023-06-08 18:06:49 660人浏览泡泡鱼

摘要

这篇文章给大家分享的是有关怎么使用CSS画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。今天小颖给大家分享一个用CSS画的爱心，底下有代码和制作过程，希望对大家有所帮助。第一步：先画一个正方形。如图：<!D

这篇文章给大家分享的是有关怎么使用CSS画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

今天小颖给大家分享一个用CSS画的爱心，底下有代码和制作过程，希望对大家有所帮助。

第一步：

先画一个正方形。如图：

怎么使用CSS画

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>css画桃心</title>    <style media="screen">        .heart-body {            width: 500px;            margin: 100px auto;            position: relative;        }        .heart-shape {            position: relative;            width: 100px;            height: 100px;            background-color: #f70e0e;        }    </style></head><body>    <div class="heart-body">        <div class="heart-shape"></div>    </div></body></html>

第二步：

将利用伪元素before和 :after，在正方形的左边和上边各画一个正方形，然后再利用border-radius: 50%;属性，修饰下这两个正方形，然后就得到了两个圆,如图所示：

怎么使用CSS画

.heart-shape:before,        .heart-shape:after {            position: absolute;            content: '';            width: 100px;            height: 100px;            background-color: #ffc0cb;        }        .heart-shape:before {            left: -45px;        }        .heart-shape:after {            top: -45px;        }

利用border-radius: 50%; 属性：

.heart-shape:before,        .heart-shape:after {            position: absolute;            content: '';            width: 100px;            height: 100px;            -WEBkit-border-radius: 50%;                        -moz-border-radius: 50%;                        -o-border-radius: 50%;                        border-radius: 50%;            background-color: #ffc0cb;        }

第三步：

类名为：heart-shape的div 利用transfORM: rotate(45deg); 属性将他们旋转45度，如图所示：

怎么使用CSS画

.heart-shape {            position: relative;            width: 100px;            height: 100px;            background-color: #f70e0e;            -webkit-transform: rotate(45deg);                        -moz-transform: rotate(45deg);                        -ms-transform: rotate(45deg);                        -o-transform: rotate(45deg);                        transform: rotate(45deg);        }

小颖把圆的背景色和正方形的背景色没给统一的颜色，是为了大家更好的看到明显的效果图，接下来小颖将其背景色设置成统一的，最终的爱心就出来了，如图所示：

怎么使用CSS画

.heart-shape:before,        .heart-shape:after {            position: absolute;            content: '';            width: 100px;            height: 100px;            -webkit-border-radius: 50%;                        -moz-border-radius: 50%;                        -o-border-radius: 50%;                        border-radius: 50%;            background-color: #f70e0e;        }

感谢各位的阅读！关于“怎么使用CSS画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: 怎么使用CSS画

本文链接: https://lsjlt.com/news/255059.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341