纯 Css3 绘制的心型图案

本例主要运用 Css3 中 transform 属性的 rotate 方法对 Div 层实现旋转和 beforeafter 伪类以及 border-radius 圆角属性对元素进行绘制。

最终效果见下图:纯 Css3 绘制的心型图案

HTML代码

  1. <body>
  2.     <h1>I LOVE YOU</h1>
  3.     <div id="heart"></div>
  4. </body>

Css代码

  1. body{background#FFEDCC}
  2. #heart{
  3.     background: tomato;  /** tomato为颜色值(西红柿红)**/
  4.     positionabsolute;  /** 绝对定位 **/
  5.     width: 20rem;
  6.     height:20rem;
  7.     top:50%;
  8.     left:50%;
  9.     margin: -10rem 0 0 -10rem;   /** 上边和右边距分别为-(width和height的一半) **/
  10.     transform: rotate(45deg);
  11.     /** 用Css3中的transform属性的rotate方法实现顺时针旋转45度,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转 **/
  12.     -ms-transform:rotate(45deg);
  13.     -webkit-transform:rotate(45deg);
  14.     -moz-transform:rotate(45deg);
  15.     -o-transform:rotate(45deg);
  16. }
  17. #heart:after{
  18.     content"";
  19.     border-radius: 50%;
  20.     width: 20rem;
  21.     height: 20rem;
  22.     background-color:#0000FF;
  23.     positionabsolute;
  24.     left:0;
  25.     top:-50%;
  26. }
  27. #heart:after{
  28.     z-index:-1;
  29.     content:"";
  30.     width:20rem;
  31.     height:20rem;
  32.     border-radius:50%;
  33.     background:tomato;
  34.     position:absolute;
  35.     top:0px;
  36.     left:50%;
  37.   }

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

目前评论:1   其中:访客  1   博主  0

  1. avatar 寻金笔记 0

    不错,很好看

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: