CSS3做的头像效果，CSS3学习实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS3头像</title>
<style>
.box{margin:30px auto;width:300px;height:300px;background:#ccc;position:relative;overflow:hidden;}
.bg{background:#2e2e2e;position:absolute;width:100%;height:100%;}
.bgL{width:150px;height:100%;overflow:hidden;position:relative;float:left;}
.bgL .main{background:#ccc;position:absolute;width:280%;height:200%;border-radius:150%;top:-100%;right:-230%;}
.bgR{width:150px;height:100%;overflow:hidden;position:relative;float:right;}
.bgR .main{background:#ccc;position:absolute;width:280%;height:200%;border-radius:150%;top:-100%;left:-230%;}
.tieA{background:#fff;position:absolute;right:50%;width:50px;height:55%;top:8%;margin-right:-25px;}
.tieAL{background:#ccc;border-radius:100% 0 0 0;height:60%;right:38%;position:absolute;transform:rotate(170deg);width:25px;}
.tieAR{background:#ccc;border-radius:0 100% 0 0;height:60%;left:38%;position:absolute;transform:rotate(190deg);width:25px;}
.tieB{border-color:#FFF transparent transparent;border-style:solid;border-width:40px;position:absolute;right:50%;top:8%;margin-right:-40px;}
.tieC{background:#FFF;position:absolute;left:50%;width:50px;height:14%;top:170px;border-radius:0 0 45px 45px;margin-left:-25px;}
.tieD{background:#FFF;position:absolute;transform:skew(0deg, -46deg) rotate(-22deg);width:24px;height:50px;left:50%;margin-left:-10px;top:176px;}
.collarL{border-color:transparent transparent #eee;border-style:solid;border-width:58px;position:absolute;transform:rotate(285deg);right:31%;top:-14%;}
.collarR{border-color:transparent transparent #eee;border-style:solid;border-width:58px;position:absolute;transform:rotate(75deg);left:31%;top:-14%;}
</style>
</head>
<body>
<div class="box"><div class="bg"></div><div class="bgL"><div class="main"></div></div><div class="bgR"><div class="main"></div></div><div class="tieA"></div><div class="tieAL"></div><div class="tieAR"></div><div class="tieB"></div><div class="tieC"></div><div class="tieD"></div><div class="collarL"></div><div class="collarR"></div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3做的头像效果，CSS3学习实例

分类

CSS3

描述

一个CSS3做的头像效果，CSS3的学习实例，做的虽然不是太好，但通过这个实例您至少可以学习不少的知识点，CSS3越来越流行，越来越强大，你值得拥有。