使用HTML和CSS3绘制基本卡通图案的示例分享

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,绘图等相关知识,佚名希望在学习及工作中可以帮助到您

纯HTML+CSS实现阿童木头像
先上最终效果图：
2015116112152118.png (400×400)

在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>纯CSS漫画</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.outer-circle {
position: absolute;
top: 32px;
left: 44px;
width: 289px;
height: 289px;
border: 4px solid #75BD4F;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.inner-circle {
position: relative;
width: 269px;
height: 269px;
border: 10px solid #F5F910;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #73BF43;
}
.inner-circle div {
position: absolute;
}
.inner-circle-light {
top: 41px;
left: 35px;
&

您可能想查找下面的文章:

2017-08-06CSS3媒体查询(Media Queries)介绍
2017-09-15css绝对定位的绝对好用的居中方法
2017-08-06修改鼠标样式的CSS代码
2017-08-06针对chrome的css hack 使用方法
2017-08-06利用CSS伪元素创建带三角形的提示框的实现方法
2017-08-06css关于position属性的用法详解(绝对定位和相对定位的混淆)
2017-08-06css2.1多重背景和边框效果实现原理及代码(图文介绍)
2017-08-06网页设计中的中国传统色彩速查表颜色值
2017-08-06CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2017-08-06CSS3 选择器基本选择器介绍

使用HTML和CSS3绘制基本卡通图案的示例分享

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容