一、页面布局

完成一个页面的布局的基本步骤
1、先将页面划分行，给每一行起名字
2、按照从外到内，从全局到局部的顺序分析每一行
3、每做一级，都要设置样式，并观察好位置是否正确。
注意:
在行布局时，要注意，尽可能的留下空隙（弹性空间）在需要大范围的自适应时，我们通常会将最后一个容器规划为自适应容器，其内存放可以自适应尺寸的内容。然后将这个容器不浮动，不设置宽度，而是设置外边距将其他浮动的容器所占用的空间让出来。

二、CSS3新增的选择器

1.CSS3 边框

border-radius 边框圆角（从左上角开始的顺时针）
box-shadow 盒子阴影（默认是外阴影）
border-image CSS3 边界图片

2.圆角

 /*边框圆角：从左上角开始的顺时针*//*border-radius: 10px 20px 30px 40px;*/

3.背景

 /*边框透明*/border: 20px solid rgba(0,0,0,0.5);padding: 50px;background-repeat: repeat-x,no-repeat;background-image: url("../../images/zhaosi.png"),url("../../images/b2.jpg");/*背景图片的尺寸cover：保持宽高比的前提下，在能够铺满容器的前提下，保持最小contain：保持宽高比的前提下，在不超出容器的前提下，保持最大*/background-size: auto ,contain;/*用来定义背景图片定位参照的区域*/background-origin: content-box;/*剪裁图片用来定义背景图片和背景颜色的可显示区域范围，超出的部分会被隐藏*/background-clip: content-box ;

4.渐变

         线性渐变background-image: linear-gradient(90deg,red,yellow);重复的线性渐变background-image: repeating-linear-gradient(90deg,red 0,yellow 2px );径向渐变background-image: radial-gradient(shape size at position, start-color, ..., last-color);background-image: radial-gradient(circle at 30% 30%,red 49%,yellow 50%);重复的径向渐变size 参数定义了渐变的大小。它可以是以下四个值：closest-sidefarthest-sideclosest-cornerfarthest-cornerbackground-image: repeating-radial-gradient(circle at 30% 30%,red 0,transparent 10px),repeating-radial-gradient(circle at 70% 30%,green 0,transparent 10px);

5.文本效果

         /*文字阴影*//*text-shadow: h-shadow v-shadow blur color;*/text-shadow: 5px 5px 10px red;/*设置单词显示时的处理*//*要显示省略号，需要：1.要有文字溢出 2.需要超出隐藏 3.设置该属性（三者缺一不可。）*/word-break: keep-all;overflow: hidden;text-overflow: ellipsis;

6.字体

     /*定义字体名称，并加载字体*/@font-face {font-family: '老师的字体';src: url("禹卫书法云墨简体.ttf");}

7.2d效果

         /*过渡效果*/transition: all 1s;/*旋转点 ：定义2d或3d变化的中心点*//*transform-origin: 0 0;*/

          /*translate（）平移rotate（）旋转scale（）缩放skew()拉伸*/transform: translate(100px,100px);transform: rotate(360deg);transform: translate(100px,100px)rotate(90deg);transform: scale(0,0)rotate(3600deg);transform: skew(30deg,0);

8.3d效果

/*视距：观看旋转木马整体*/perspective: 1800px;/*我们实际的3d效果是加在轴之上，为了让连接在轴之上的图片也随之产生立体3d效果*/transform-style: preserve-3d;/*沿x轴旋转45度*/transform: rotateX(-45deg);/*规定动画名称 多久完成 */animation: aa 3s linear infinite;

3d动画效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3d旋转木马效果</title><style>@keyframes aa {0%{transform: rotateY(0deg)rotateX(0deg)rotateZ(0deg);}100%{transform: rotateY(360deg)rotateX(720deg)rotateZ(180deg);}}#wutai{width: 400px;height: 400px;margin: 400px auto;/*表示我们的视角是观看旋转木马的整体*/perspective: 1800px;}#zhou{width: 400px;height: 400px;/*因为图片要呈现复杂的立体效果，因此图片需要绝对定位*//*因此轴需要做相对定位，为图片提供定位的参照物*/position: relative;/*我们实际的3d效果是加在轴之上的，为了让连接在轴上的图片也随之产生立体3d立体效果*//*表示当前元素做3d效果，其子孙元素也可以做3d效果*/transform-style: preserve-3d;/*transform: rotateY(-90deg);*//*表示让3d效果图永久旋转下去*/animation: aa 10s linear infinite;}img{width: 400px;height: 400px;position: absolute;left: 0;top: 0;/*元素整体的透明度*/opacity: 0.5;}</style>
</head>
<body>
<div id="wutai"><div id="zhou"><img style="transform: rotateY(0deg)translateZ(200px)" src="../images/a1.jpg"><img style="transform: rotateY(90deg)translateZ(200px)" src="../images/a2.jpg"><img style="transform: rotateY(180deg)translateZ(200px)" src="../images/a3.jpg"><img style="transform: rotateY(270deg)translateZ(200px)" src="../images/a4.jpg"><img style="transform: rotateX(90deg) translateZ(200px)" src="../images/a5.jpg"><img style="transform: rotateX(90deg)translateZ(-200px)" src="../images/a6.jpg"></div>
</div>
</body>
</html>

截图效果:

web4(css3)相关推荐

HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
了解CSS/CSS3原生变量var (转)
一.变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...

web4(css3)