利用css3的 transform-origin 画一颗爱心

时间 2019-12-06

标签利用 css3 css transform origin 一颗爱心栏目 CSS 繁體版

原文原文链接

首先是基础css(去除margin,padding),而且设置背景色.css

*{margin:0;padding: 0;}
body{font-size: 12px;background:#886565;font-family: "微软雅黑";}

2:建立一个容器,里面就是放内容的code

.heart{position:relative;width: 100px;height:80px;background:blue;margin: 100px auto;}

效果图以下:orm

接下来:it

.heart:before{position: absolute;content: "";left:50px;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

让红色部分以左下角为基点,逆时针旋转45度.加入下面代码:io

transform-origin: left bottom;transform:rotate(-45deg);

接下来再画一个红色圆柱:form

.heart:after{position: absolute;content: "";left:0;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

效果图以下:class

让第二个圆柱以右下角为基点,顺时针旋转45度,加入下面的代码:容器

transform-origin: right bottom;transform:rotate(45deg);

效果图以下:基础

哇哈哈,爱心已经出来了,如今把容器的背景色去掉:transform