CSS 魔法系列：纯 CSS 绘制各种图形《系列五》-變量-匯編語言學習筆記

CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

2023-09-10 阅读 24 评论 0

摘要：　　我们的网页因为CSS而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来CSS在图形绘制中的创新使用。

　　我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。

您可能感兴趣的相关文章

CSS3 在网页设计中的20佳惊艳应用
推荐12个漂亮的 CSS3 按钮实现方案
推荐10个非常优秀的 CSS3 开发工具
分享50个漂亮的 CSS3 最佳应用示例
24款非常实用的 CSS3 工具终极收藏

css画正方形、

Egg

#egg {display:block;width: 126px;height: 180px;background-color: red;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

Pac-Man

#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;
}

Talk Bubble

#talkbubble {width: 120px;height: 80px;background: red;position: relative;-moz-border-radius:    10px;-webkit-border-radius: 10px;border-radius:         10px;
}
#talkbubble:before {content:"";position: absolute;right: 100%;top: 26px;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;
}

12 Point Burst

#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;
}
#burst-12:before, #burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;
}
#burst-12:before {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);
}
#burst-12:after {-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);
}

8 Point Burst

#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20eg);
}
#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);
}

您可能感兴趣的相关文章