css特效样式大全,css样式效果

html 5 和css 能做出什么特效

纯静态网页。代码与样式分开。易于被搜索引擎收录。

专业从事成都网站建设、成都网站制作,高端网站制作设计,小程序开发,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务，采用HTML5建站+CSS3前端渲染技术，成都响应式网站建设公司，让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组，与您实时在线互动，随时提供解决方案，畅聊想法和感受。

一、准备工作

进入到 /home/shiyanlou/ 目录下，新建空白文档：

命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：

使用 gedit 打开，准备编辑代码：

二、编写 HTML

填写以下代码：

!doctype html

html

headmeta charset="utf-8"titleBaymax/title/head

body

div id="baymax"

!-- 定义头部，包括两个眼睛、嘴 --

div id="head"

div id="eye"/div

div id="eye2"/div

div id="mouth"/div

/div

!-- 定义躯干，包括心脏 --

div id="torso"

div id="heart"/div

/div

!-- 定义肚子腹部，包括 cover（和躯干的连接处） --

div id="belly"

div id="cover"/div

/div

!-- 定义左臂，包括一大一小两个手指 --

div id="left-arm"

div id="l-bigfinger"/div

div id="l-smallfinger"/div

/div

!-- 定义右臂，同样包括一大一小两个手指 --

div id="right-arm"

div id="r-bigfinger"/div

div id="r-smallfinger"/div

/div

!-- 定义左腿 --

div id="left-leg"/div

!-- 定义右腿 --

div id="right-leg"/div

/div

/body

html

三、添加 CSS 样式

我们已经使用 HTML 定义好「大白」的各个元素，现在就需要利用到 CSS 来绘制它的样式外表。

由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。

然后首先是头部：

body {

background: #595959;

}

#baymax{

/*设置为 居中*/

margin: 0 auto;

/*高度*/

height: 600px;

/*隐藏溢出*/

overflow: hidden;

}

#head{

height: 64px;

width: 100px;

/*以百分比定义圆角的形状*/

border-radius: 50%;

/*背景*/

background: #fff;

margin: 0 auto;

margin-bottom: -20px;

/*设置下边框的样式*/

border-bottom: 5px solid #e0e0e0;

/*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/

z-index: 100;

/*生成相对定位的元素*/

position: relative;

}

效果预览：

赶紧再来添加眼睛和嘴吧！

#eye,

#eye2{

width: 11px;

height: 13px;

background: #282828;

border-radius: 50%;

position: relative;

top: 30px;

left: 27px;

/*旋转该元素*/

transform: rotate(8deg);

}

#eye2{

/*使其旋转对称*/

transform: rotate(-8deg);

left: 69px; top: 17px;

}

#mouth{

width: 38px;

height: 1.5px;

background: #282828;

position: relative;

left: 34px;

top: 10px;

}

css样式 特效

就是隐藏

display:none

当前显示的设置为display:block

一般使用脚本实现

比如你要隐藏的元素为div id="info1"/div

要显示的元素为div id="info2"/div

假设使用jquery控制

代码为以下两句：

$("#info1").hide();

$("#info2").show();

分享几种极具创意的HTML5/CSS3进度条特效

section class="container"

div class="progress"

span style="width: 20%;"span20%/span/span

/div

div class="progress"

span class="green" style="width: 40%;"span40%/span/span

/div

div class="progress"

span class="orange" style="width: 60%;"span60%/span/span

/div

div class="progress"

span class="red" style="width: 80%;"span80%/span/span

/div

div class="progress"

span class="blue" style="width: 100%;"span100%/span/span

/div

/section

从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。

CSS代码：

.progress {

height: 20px;

background: #ebebeb;

border-left: 1px solid transparent;

border-right: 1px solid transparent;

border-radius: 10px;

}

.progress span {

position: relative;

float: left;

margin: 0 -1px;

min-width: 30px;

height: 18px;

line-height: 16px;

text-align: right;

background: #cccccc;

border: 1px solid;

border-color: #bfbfbf #b3b3b3 #9e9e9e;

border-radius: 10px;

background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);

background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);

background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);

background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);

}

.progress span span {

padding: 0 8px;

font-size: 11px;

font-weight: bold;

color: #404040;

color: rgba(0, 0, 0, 0.7);

text-shadow: 0 1px rgba(255, 255, 255, 0.4);

}

.progress span:before {

content: '';

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 1;

height: 18px;

background: url("../img/progress.png") 0 0 repeat-x;

border-radius: 10px;

}

.progress .green {

background: #85c440;

border-color: #78b337 #6ba031 #568128;

background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);

background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);

background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);

background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);

}

.progress .red {

background: #db3a27;

border-color: #c73321 #b12d1e #8e2418;

background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);

background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);

background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);

background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);

}

.progress .orange {

background: #f2b63c;

border-color: #f0ad24 #eba310 #c5880d;

background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);

background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);

background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);

background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);

}

.progress .blue {

background: #5aaadb;

border-color: #459fd6 #3094d2 #277db2;

background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);

background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);

background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);

background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);

}

html5 css3有哪些新特效

html5:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

css3:

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器 多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image