本例主要运用 Css3 中 transform
属性的 rotate
方法对 Div 层实现旋转和 before
、after
伪类以及 border-radius
圆角属性对元素进行绘制。
HTML代码
- <body>
- <h1>I LOVE YOU</h1>
- <div id="heart"></div>
- </body>
Css代码
- body{background: #FFEDCC}
- #heart{
- background: tomato; /** tomato为颜色值(西红柿红)**/
- position: absolute; /** 绝对定位 **/
- width: 20rem;
- height:20rem;
- top:50%;
- left:50%;
- margin: -10rem 0 0 -10rem; /** 上边和右边距分别为-(width和height的一半) **/
- transform: rotate(45deg);
- /** 用Css3中的transform属性的rotate方法实现顺时针旋转45度,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转 **/
- -ms-transform:rotate(45deg);
- -webkit-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- -o-transform:rotate(45deg);
- }
- #heart:after{
- content: "";
- border-radius: 50%;
- width: 20rem;
- height: 20rem;
- background-color:#0000FF;
- position: absolute;
- left:0;
- top:-50%;
- }
- #heart:after{
- z-index:-1;
- content:"";
- width:20rem;
- height:20rem;
- border-radius:50%;
- background:tomato;
- position:absolute;
- top:0px;
- left:50%;
- }
2016年05月10日 17:58 沙发
不错,很好看
2017年07月09日 14:34 板凳
好看的勒!