css:
/* Created by TopStyle Trial - www.topstyle4.com */
.ren_header{
width: 100px;
height: 100px;
background: black;
border-radius: 100px 100px 100px 100px;
margin-left:100px;
}
.ren_hand1{
width: 25px;
height: 170px;
background: black;
border-right: red solid 2px;
border-radius:50px 0px 20px 20px;
position: absolute;
margin-left:48px;
}
.ren_hand2{
width: 25px;
height: 170px;
background: black;
position: absolute;
border-radius:0px 50px 20px 20px;
margin-left:225px;
border-left: red solid 2px;
}
.ren_body{
width: 150px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
margin-left:75px;
}
.ren_jiao1{
width: 50px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
border-radius: 0px 0px 10px 10px;
margin-left:90px;
margin-top:150px;
}
.ren_jiao2{
width: 50px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
margin-left:160px;
margin-top:150px;
border-radius: 0px 0px 10px 10px;
}
.ren_qunzi{
width: 50px;
height: 15px;
background: rgba(0,0,0,0);
border:50px solid #f00;
border-color:rgba(0,0,0,0) rgba(0,0,0,0) #000 rgba(0,0,0,0);
border-width: 90px;
/**border-style: black dashed;*/
margin-left:35px;
position: absolute;
}
html:
<div class="ren_header"></div>
<div class="ren_hand1"></div>
<div class="ren_body"></div>
<div class="ren_hand2"></div>
<div class="ren_jiao1"></div>
<div class="ren_jiao2"></div>
<div class="ren_qunzi"></div>
分享到:
相关推荐
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
本文将深入探讨“简单的CSS3地图位置标记动画特效”这一主题,了解如何利用CSS3来创建动态、引人注目的地图标记。 首先,让我们了解CSS3的关键帧动画(@keyframes)。这是实现动画效果的基础。通过定义动画的不同...
本项目“CSS3地图位置标记动画特效”聚焦于使用CSS3来创建动态的地图定位标记,为用户提供更加生动、直观的交互体验。在这款特效中,开发者利用了CSS3的特性,如伪类、变换(transform)、过渡(transition)和关键...
【纯CSS3地图位置标记动画特效】是一种利用CSS3特性实现的交互式地图效果,它在网页中可以显示动态的位置标记,为用户带来更生动、直观的地理信息展示。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,...
通过实践这些CSS3的例子,你将掌握现代网页设计的关键技巧,并能创建出更具吸引力和交互性的网页。无论是新手还是经验丰富的开发者,深入理解和熟练运用CSS3都是提升设计能力的必备步骤。在学习过程中,不断尝试和...
单纯css3做的各种炫丽按钮,特效按钮,会呼吸的按钮,颜色渐变, 直接通过css3绘制出特殊效果,使用css的动画技术实现的简单例子
本主题聚焦于"css样式表的一些例子",特别是与ASP(Active Server Pages)技术的结合应用。 标题中的"css样式表的一些例子"意味着我们将探讨CSS的实际应用,包括但不限于选择器的使用、属性设置、布局控制、盒模型...
而CSS3则是层叠样式表的升级,提供了丰富的样式控制和布局解决方案,让网页设计更加灵活多变。 在HTML5中,新增的语义化元素如、、、和等,帮助开发者更好地组织页面内容,提高搜索引擎优化(SEO)的效果。同时,...
css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子
2. **渐变背景**:CSS3引入了线性渐变和径向渐变,允许设计师创建动态、丰富的背景效果。比如,`background-image: linear-gradient(to right, red, yellow);`会创建一个从左到右由红色渐变为黄色的按钮。 3. **...
css-spinners, 使用CSS和最小HTML标记制作的简单CSS微调器和 throbbers CSS微调器使用CSS和最小HTML标记制作的简单CSS加载指示器。 所有加载指示器都设计为使用最小标记:<div class="loading-indicator"> Loading.....
本文将深入探讨Qt控件的CSS样式例子及其应用。 首先,让我们理解QtCSS的基本概念。QtCSS允许我们通过定义样式表来改变窗口小部件(QWidget)及其子类的外观,如按钮(QPushButton)、标签(QLabel)、文本框...
《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发历程 及其未来方向,熟悉网页设计流程、掌握...
本篇文章将深入探讨CSS注释的写法,并通过一个例子来展示如何有效地管理CSS注释。 首先,CSS注释的语法是使用两个斜杠(//)或者一个星号紧跟一个斜杠(/* */)来开启和结束。单行注释使用//,而多行注释使用/* 和 ...
用CSS编写样式,模仿谷歌的标记!很详细哦!
在本实例中,CSS3的transform属性被用于实现3D立方体的旋转效果,通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有: 1. `perspective`:定义观察者与3D...
CSS3(层叠样式表第三版)则是用于定义网页外观和布局的样式语言,其特点和知识点包括: 1. 选择器增强:增加了类选择器(.class)、ID选择器(#id)、属性选择器([attr=value])等,更精确地控制样式应用。 2. ...
6. **动画与过渡**:CSS3引入了动画(`animation`)和过渡(`transition`),使得元素动态效果的实现变得简单。例子会展示如何创建平滑的滑动、淡入淡出效果等。 7. **伪类和伪元素**:如`:hover`、`:active`、`:...
【CSS信封例子-Css-Letter】是一个展示如何利用CSS技术来创建逼真的信封效果的项目。这个项目旨在帮助开发者和网页设计师更好地理解和运用CSS在网页设计中的灵活性和创意性。下面将详细介绍这个项目涉及的主要知识...