css3---2D效果 ---3D效果
CSS3边框: CSS3圆角:border-radius(**px 或 **%) 属性——创建边框线的圆角 CSS3盒子阴影:box-shadow属性——创建阴影
box-shadow:30px 0px gray; 值有3个时,表示距离左侧、距离上侧、影子颜色
box-shadow:30px 30px 10px gray; 值有4个时,表示距离左侧、距离上侧、虚化的像素、影子颜色;
box-shadow:30px 30px 10px gray inset; 值有5个时,表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转. border-image属性——可以允许使用图片作为边框. 此属性在IE和QQ等浏览器中并不兼容
border-image:url(images/border.png) 30 30 round; 图像平铺(重复),以填补该地区。
border-image:url(images/border.png) 30 30 stretch; 图像被拉伸以填补该地区。 背景图片大小:background-size(宽px或% 高px或% )属性——可以规定背景图片的尺寸。
背景图片定位:background-origin属性——规定背景根据边框定位还是根据文本定位
background-origin:border-box; 根据边框定位
background-origin:content-box; 根据文本进行定位 多重背景图片:background-image属性——可以规定多张不相同的图片叠加出现效果,最好使用矢量图。写法中使用逗号隔开引用图片即可。
background-image:url(images_tupian/bg_flower.gif), url(images_tupian/3.jpg); 文本阴影:text-shadow属性——可以向文本应用阴影效果
text-shadow:10px 10px 5px yellow; 四个值:分别代表距离左侧、距离上侧、模糊程度及阴影颜色 文本自动换行:word-wrap属性——允许文本强制文本进行换行,这意味着会对单词进行拆分..值:break-word:允许对单词进行拆分换到下一行。
word-wrap:break-word; 允许对单词进行拆分换到下一行。 CSS3 转换:
2D转换:transform属性——变形、转换
transform:rotate(**deg); 进行旋转,括号内部写旋转角度,默认顺时针旋转
允许负值,元素将进行逆时针旋转
transform:translate(宽px , 高px); ——从当前位置进行移动,括号内为x,y值
允许负值,将反方向移动
transform:scale(2,4);——改变原始尺寸,按照倍数变化,括号内为width、height的倍数
transform:skew(30deg,0deg);——水平、垂直方向进行扭转,括号内是水平扭转角度、垂直扭转角度 3D转换:transform属性——变形、转换
内置方法: transform:rotateX(180deg)——沿水平X轴进行垂直的翻转,括号内写转动度数
transform:rotateY(120deg);opacity:0.1;——沿垂直Y轴进行水平的翻转,括号内写转动度数;opacity:0.1透明度!
2D转换跟3D转换的区别:2D转换仅仅在于平面,文字可以看出并没有反过来。
3D转换是相当于镜面效果的,进行了前后空间(涉及到了Z轴)的占用进行的翻转。
鼠标指上变颜色!
鼠标点击变效果!
鼠标指上变大小!
div 给所有的div设置样式
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
} #aa:hover 鼠标指上aa变颜色
{
background-color:#F39;} #bb{ 给bb设置个过渡时间
transition:1s;
}
#bb:hover 鼠标指上bb变颜色
{
background-color:#F39;} #bg
{
width:200px;
height:200px;
border:1px solid red;
position:relative;
margin-left:200px;}
#tb
{
position:relative;
left:0px;
top:0px;
transition:0.7s;}
#tb:hover 鼠标指向变
{
left:-200px;}
#tb:active
{
left:-400px;}
#kuan 想给kuan设置一些样式
{
width:200px;
height:200px;
border:1px solid blue;
position:relative;
transition:1s;}
#kuan:hover 鼠标放上变 宽 和 高
{
width:400px;
height:150px;}
<style type="text/css">
body
{
min-width:900px;}
#datu
{
width:800px;
height:500px;
position:relative;
margin:30px auto;
overflow:hidden;}
#ta
{
margin-left:0px;
transition:0.7s;}
.lr
{
position:absolute;
top:230px;
width:32px;
height:32px;
z-index:;}
#left
{
left:10px;
}
#right
{
right:10px;
} <style>
<script type="text/javascript">
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(a<=-3200)
{
tu.style.marginLeft="0px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
shi =window.setTimeout("huan()",3000);
}
var shi =window.setTimeout("huan()",3000); function pause()
{
window.clearTimeout(shi);
} function conti()
{
shi = window.setTimeout("huan()",3000);
} function dong(ad)
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(ad==-1)
{
if(a==0)
{
tu.style.marginLeft=-3200+"px";
}
else
{
tu.style.marginLeft= (a+800)+"px";
}
}
else
{
if(a==-3200)
{
tu.style.marginLeft=0+"px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
}
} </script>
css3---2D效果 ---3D效果的更多相关文章
- CSS3新特性2D、3D效果讲解
希望这篇博客可以对你有所帮助,如果有什么技术上的问题,希望我们可以做进一步的交流,如果你觉得我哪里阐述的不正确或者你有更好的更透彻的理解,也可以联系我,我在这里随时等着你. 对于css/html是每个 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- transition过渡2D、3D效果
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...
- 灵感闪现 篇 (一) 2d场景 3d 效果
中途打断一下 ,框架文档的 更新. 另开一篇主题为 灵感闪现的 板块. 在工作生活中,总有发现新事物或新东西 而让自己突然 灵感闪现的时候,那么这个时候,我必须要抓住,并尽快把 这份灵感实现下来. 之 ...
- css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...
- CSS3 2D、3D转换
2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE h ...
- 2D和3D效果
<style type="text/css"> #div1{ width: 200px; height: 200px; background-color:#aaa; c ...
- CSS3—— 2D转换 3D转换 过渡 动画
2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————> ————> 移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并 3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...
- 3d效果的图片轮播
CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...
随机推荐
- wifipineapple外接SD卡
通过SSH或者web访问URL, http://172.16.42.1:1471 输入帐号:root 密码:pineapplesareyummy(默认账号密码) ssh连接:ssh root@172 ...
- MySQL中的insert ignore into, replace into用法总结
MySQL replace into 有三种形式: 1. replace into tbl_name(col_name, ...) values(...) 2. replace into tbl_na ...
- Excel如何固定表头,任意一行
在日常Excel操作中,有时候内容比较多,需要将表头固定才能方便查看.那么,该如何固定表头呢?或者说如何固定任意一行我们制定的呢?下面以Excel2013进行详细的步骤讲解. 首先打开需要操作的Exc ...
- Jmeter笔记:响应断言详解
转自:http://www.51testing.com/html/80/n-2430180.html 平时我们使用jmeter进行性能测试时,经常会用到断言.jmeter提供了很多种断言,本来想全都写 ...
- [转]Visual Studio 2010 中安装Qt 5.1
截至目前(2013年7月12日)为止,Qt 的最高版本为Qt5.1,在该版本中已经将Qt Creator与Qt Lib集成在一个文件夹中,因此安装的时候较为方便,只需安装一个即可.因为Qt具有超强的可 ...
- springboot本地读取resources/images没问题,上传到云服务器打成jar包就读取不到问题
//String watermarkfileName = this.getClass().getClassLoader().getResource("images/watermark.png ...
- Centos7安装SVN服务器
1.关闭防火墙systemctl stop firewalld.service 2.安装svn服务器yum install subversion 3.创建放置项目project的地方mkdir /sv ...
- Zookeeper之Zookeeper底层客户端架构实现原理(转载)
Zookeeper的Client直接与用户打交道,是我们使用Zookeeper的interface.了解ZK Client的结构和工作原理有利于我们合理的使用ZK,并能在使用中更早的发现问题.本文将在 ...
- OPatch cannot find a valid oraInst.loc file to locate Central Inventory
命令:opatch lsinventory用于查看数据库所打Patch的列表.但运行的时候发现错误: [oracle@bej301441 OPatch]$ opatch lsinventory In ...
- 【九天教您南方cass 9.1】 08 绘制等高线及对其处理
同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...