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

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

本文主要包含html5 css3培训机构,html5与css3新特性,html5+css3入门经典,html5+css3,html5+css3案例教程等相关知识,佚名希望在学习及工作中可以帮助到您

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

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

</div>

<!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-06-02CSS3属性background-size使用指南
2017-06-02两种CSS3伪类选择器详细介绍
2017-06-02CSS3教程：background-clip和background-origin
2017-06-02css3.0新属性效果在ie下的解决方案
2017-06-02CSS3 特效范例整理
2017-06-025分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2017-06-02css3的图形3d翻转效果应用示例
2017-06-02无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2017-06-02网页切图的CSS和布局经验与要点
2017-06-02CSS3简单实现照片墙

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

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

相关文章

文章分类

最近更新的内容