htmlcss特效（html+css怎么做出这样的效果）

本文目录

• html+css怎么做出这样的效果
• HTML+css效果
• html 5 和css 能做出什么特效
• 请教HTML中的CSS特效问题
• html怎么css设置的文本特效

html+css怎么做出这样的效果

css可以用hover实现。移动端的点击会显示hover的样式效果，所以可以直接用hover实现，如：“div:hover{background-color:green;}”。如果要兼容pc端需要使用js实现，点击的时候动态改变背景颜色。

HTML+css效果

这个是一个纯css写的，其他方法还有很多。

html 5 和css 能做出什么特效

纯静态网页。代码与样式分开。易于被搜索引擎收录。一、准备工作进入到 /home/shiyanlou/ 目录下，新建空白文档：命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：使用 gedit 打开，准备代码：二、编写 HTML填写以下代码：《!doctype html》《html》《head》《meta charset=“utf-8“》《title》Baymax《/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;}

请教HTML中的CSS特效问题

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》《html xmlns=“http://www.w3.org/1999/xhtml“》《head》《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》《title》无标题文档《/title》《script type=“text/javascript“》 function dis(lo) { for(var i=1;i《=3;i++) { if(lo==i) document.getElementById(“di“+lo).style.display=“block“; else document.getElementById(“di“+i).style.display=“none“; } }《/script》《style type=“text/css“》 .index_1{float:left;width:100px;height:200px} .index_2{width:100px;height:100px;background-color:blue} .index_3{width:100px;height:100px;background-color:green} .index_4{width:100px;height:100px;background-color:#9900FF} .index_5{width:200px;height:300px;background-color:gray;display:none} .index_6{width:200px;height:300px;background-color:black;display:none} .index_7{width:200px;height:300px;background-color:yellow;display:none} .index_8{float:left;width:200px;height:300px}《/style》《/head》《body》 《div class=“index_1“》 《div class=“index_2“ onmousemove=“dis(1)“》《/div》 《div class=“index_3“ onmousemove=“dis(2)“》《/div》 《div class=“index_4“ onmousemove=“dis(3)“》《/div》 《/div》 《div class=“index_8“》 《div id=“di1“ class=“index_5“》《/div》 《div id=“di2“ class=“index_6“》《/div》 《div id=“di3“ class=“index_7“》《/div》 《/div》《/body》《/html》

html怎么css设置的文本特效

文本虚拟化效果可以通过css的text-shadow来实现。text-shadow语法:text-shadow：none|none|.例子：.demo{background:#666666;width:440px;padding:30px;font:bold55px/100%“微软雅黑“,“LucidaGrande“,“LucidaSans“,Helvetica,Arial,Sans;color:#fff;text-transform:uppercase;}