概述
文字卡片
div.card{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 06px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header{
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container{
padding: 10px;
}
<divclass="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
图片卡片
div.polaroid{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 06px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container{
padding: 10px;
}
<divclass="polaroid">
<img src="rock600x400.jpg"alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
圆角图片
border-radius: 8px;
椭圆形图片:
border-radius: 50%;
响应式图片
响应式图片会自动适配各种尺寸的屏幕。
max-width: 100%;
height:auto;
图片 Modal(模态)
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on SmallerScreens */
@media only screen and (max-width:700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>图片模态框</h2>
<p>本实例演示了如何结合CSS和JavaScript 来一起渲染图片。</p><p>
首先，我们使用 CSS来创建modal 窗口 (对话框),默认是隐藏的。<p>
<p>然后，我们使用JavaScript来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg"src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg"alt="Northern Lights, Norway" width="300"height="200">
<!-- The Modal -->
<div id="myModal"class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// 获取模态窗口
var modal =document.getElementById('myModal');
// 获取图片模态框，alt属性作为图片弹出中文本描述
var img =document.getElementById('myImg');
var modalImg =document.getElementById("img01");
var captionText =document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 获取<span>元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];
// 点击<span>元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
按钮动画--------------------------------------------------------
.button {
display:inline-block;
border-radius:4px;
background-color: #f4511e;
border:none;
color:#FFFFFF;
text-align: center;
font-size: 28px;
padding:20px;
width:200px;
transition: all 0.5s;
cursor:pointer;
margin:5px;
}
.button span {
cursor:pointer;
display:inline-block;
position:relative;
transition: 0.5s;
}
.button span:after {
content:'»';
position:absolute;
opacity:0;
top: 0;
right:-20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity:1;
right: 0;
}
</style>
</head>
<body>
<h2>按钮动画</h2>
<button class="button"style="vertical-align:middle"><span>Hover</span></button>
</body>
</html>
按钮动画 -波纹效果-----------------------------------------------
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>按钮动画 -波纹效果</h2>
<buttonclass="button">Click Me</button>
</body>
</html>
点击时添加 "压下"效果:------------------------------------
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color:#3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>按钮动画 -"按压效果"</h2>
<buttonclass="button">Click Me</button>
</body>
</html>
简单的分页--------------------------------------------------
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active){background-color: #ddd;}
</style>
</head>
<body>
<h2>分页间隔</h2>
<ulclass="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
CSS3box-sizing 属性可以设置 width和 height属性中包含了 padding(内边距)和 border(边框)。
默认情况下，元素的宽度与高端计算方式如下：
width(宽)+ padding(内边距) + border(边框)=元素实际宽度
height(高)+ padding(内边距) + border(边框)=元素实际高度
这就意味着我们在设置元素的 width/height时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在width/height中)。
使用 CSS3 box-sizing属性
所有元素使用 box-sizing是比较推荐的：
* {
box-sizing: border-box;
}
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3的一种新的布局模式。
CSS3 弹性盒（ Flexible Box或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flexitem)组成。
弹性容器通过设置 display属性的值为flex或inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
<divclass="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
CSS3 多媒体查询@media参考
响应式 Web设计 - Viewport
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
创建响应式网格视图
首先确保所有的 HTML元素都有box-sizing 属性且设置为 border-box。
确保边距和边框包含在元素的宽度和高度间。
* {
box-sizing: border-box;
}
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
响应式 Web设计 -图片
img {
width: 100%;
height: auto;
}
注意在以上实例中，图片会比它的原始图片大。我们可以使用max-width 属性很好的解决这个问题。
img {
max-width: 100%;
height: auto;
}
网页中添加图片
img {
width: 100%;
height: auto;
}
响应式 Web设计 -视频(Video)
video {
width: 100%;
height: auto;
}
使用 max-width属性
video {
max-width: 100%;
height: auto;
}
****************************************************
二 HTML5 浏览器支持
将 HTML5元素定义为块元素
HTML5 定了 8个新的 HTML语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS的 display属性值为 block:
实例
header, section, footer, aside,nav, main, article, figure { display: block; }
****************************************************
三 为 HTML添加新元素
<script>
document.createElement("myHero")
</script>
<style>
myHero { display: block; background-color: #ddd; padding: 50px; font-size:30px; }
</style>
<myHero>我的第一个新元素</myHero>
JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。
Internet Explorer 浏览器问题
你可以使用以上的方法来为 IE浏览器添加 HTML5元素，但是：
Internet Explorer 8 及更早 IE版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher创建的 "HTML5Enabling JavaScript", " shiv"来解决该问题:
<!--[if lt IE 9]>
<scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE浏览器的版本小于 IE9时将读取 html5.js文件，并解析它。
注意：国内用户请使用本站静态资源库（Google资源库在国内不稳定）：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
针对IE浏览器html5shiv是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
完美的 Shiv 解决方案
<title>渲染HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
html5shiv.js 引用代码必须放在 <head>元素中，因为 IE浏览器在解析 HTML5新元素时需要先加载该文件。
****************************************************
我们可以开始使用这些语义元素吗?
以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
header, section, footer, aside, nav, article, figure
{
display: block;
}
Internet Explorer 8 及更早IE版本中的问题
IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>,<aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/
下载后，将以下代码放入的网页中：
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素
****************************************************
作为列表项标记的图像
ul{list-style-image: url('sqpurple.gif');}
上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。
如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下：
浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：
实例
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
例子解释：
- ul:
- 设置列表样式类型为没有删除列表项标记
- 设置填充和边距0px（浏览器兼容性）
- ul中所有li:
- 设置图像的URL，并设置它只显示一次（无重复）
- 您需要的定位图像位置（左0px和上下5px）
- 用padding-left属性把文本置于列表中
- 元素的宽度和高度
- 浏览器的兼容性问题
- 一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
- IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
- 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
实例2 - 图像的透明度 - 悬停效果
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */ //IE8和更早版本使用
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
CSS 媒体类型
@mediascreen,print{p.test {font-weight:bold;}
| 媒体类型 | 描述 |
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| | 用于打印机。 |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
在div中使用图片创建边框
图像平铺（重复）来填充该区域。
-webkit-border-image:url(border.png) 30 30round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30round; /* Opera */
border-image:url(border.png) 30 30 round;
图像被拉伸以填充该区域。
-webkit-border-image:url(border.png)30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30stretch; /* Opera */
border-image:url(border.png) 30 30stretch;
盒子阴影
-moz-box-shadow:1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0,.5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
CSS3 创建多列
column-count 属性指定了需要分割的列数。
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari andChrome */
column-count:3;
CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。
-webkit-column-gap:40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
CSS3 列边框指定了列与列间的边框样式
column-rule-style属性指定了列与列间的边框样式：
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
column-rule-width属性指定了两列的边框厚度:
-webkit-column-rule-width:1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
column-rule-color属性指定了两列的边框颜色：
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
column-rule 属性是column-rule-*所有属性的简写。
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
指定元素跨越多少列
-webkit-column-span:all; /* Chrome, Safari, Opera */
column-span: all;
指定列的宽度
.newspaper
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari andChrome */
}
由用户指定一个div元素尺寸大小：
div
{
resize:both;
overflow:auto;
}
CSS3 外形修饰（outline-offset）
规定边框边缘之外 15 像素处的轮廓：
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
响应式图片
img {
max-width: 100%;
height: auto;
}
图片滤镜
-webkit-filter:grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
CSS3 2D转换
CSS3transform 属性
| 值 | 描述 |
|
| none | 定义不进行转换。 |
|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16个值的 4x4 矩阵。 |
|
| translate(x,y) | 定义 2D 转换。 |
|
| translate3d(x,y,z) | 定义 3D 转换。 |
|
| translateX(x) | 定义转换，只是用 X 轴的值。 |
|
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
|
| translateZ(z) | 定义 3D 转换，只是用 Z轴的值。 |
|
| scale(x[,y]?) | 定义 2D 缩放转换。 |
|
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
|
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
|
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
|
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D缩放转换。 |
|
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
|
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
|
| rotateX(angle) | 定义沿着 X 轴的 3D旋转。 | 测试 |
| rotateY(angle) | 定义沿着 Y 轴的 3D旋转。 | |
| rotateZ(angle) | 定义沿着 Z 轴的 3D旋转。 | |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y轴的 2D 倾斜转换。 | |
| skewX(angle) | 定义沿着 X 轴的 2D倾斜转换。 | |
| skewY(angle) | 定义沿着 Y 轴的 2D倾斜转换。 | |
| perspective(n) | 为 3D 转换元素定义透视视图 |
translate()方法，类似于margin移动
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
transform:translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9*/
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
rotate()方法 div旋转
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
scale()方法，变大缩小div
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：//宽带是原始大小的两倍，高度是原始大小的三倍。
-ms-transform:scale(2,3);/* IE 9 */
-webkit-transform:scale(2,3); /* Safari */
transform:scale(2,3); /* 标准语法 */
skew()方法， 不好掌握
该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。利用matrix()方法旋转div元素30°
transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
ransform-origin 属性设置旋转元素的基点位置：
transform:rotate(45deg);
transform-origin:20%40%;
-ms-transform:rotate(45deg); /* IE 9 */
-ms-transform-origin:20%40%; /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20%40%; /* Safari and Chrome */
-moz-transform:rotate(45deg); /* Firefox */
-moz-transform-origin:20%40%; /* Firefox */
-o-transform:rotate(45deg); /* Opera */
-o-transform-origin:20%40%; /* Opera */
transform-style 属性让转换的子元素保留3D转换：3D空间中的指定如何嵌套元素
transform: rotateY(45deg);
transform-origin:50% 50% 100px;
-webkit-transform: rotateY(70deg); /* Safari andChrome */
-webkit-transform-origin:50% 50% 100px; /* Safariand Chrome */
-moz-transform: rotateY(70deg); /* Firefox */
-moz-transform-origin:50% 50% 100px; /* Firefox */
-o-transform: rotateY(70deg); /* Opera */
-o-transform-origin:50% 50% 100px; /* Opera */
perspective 属性
多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
注意：perspective属性只影响 3D转换元素。
提示:请与perspective-origin属性一同使用该属性，这样您就能够改变 3D元素的底部位置。
#div1
{
position:relative;
height:150px;
width:150px;
margin:50px;
padding:10px;
border:1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position:absolute;
border:1px solid black;
background-color: red;
transform:rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safariand Chrome */
}
perspective-origin 属性
perspective-origin 属性定义 3D元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D元素的底部位置。
定义时的perspective-Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
#div1
{
position:relative;
height:150px;
width: 150px;
margin:50px;
padding:10px;
border:1px solid black;
perspective:150;
perspective-origin:10% 10%;
-webkit-perspective:150;/* Safari and Chrome */
-webkit-perspective-origin:10% 10%; /* Safari and Chrome */
}
#div2
{
padding:50px;
position:absolute;
border:1px solid black;
background-color:red;
transform:rotateX(45deg);
-webkit-transform:rotateX(45deg); /* Safari and Chrome */
}
backface-visibility属性
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
div
{
position:relative;
height:60px;
width:60px;
background-color:red;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg);/* Firefox */
}
#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
CSS3 3D 转换
transform: rotateY(70deg);
transform-origin:50% 50% 100px;
-webkit-transform: rotateY(70deg); /* Safari andChrome */
-webkit-transform-origin:50% 50% 100px; /* Safariand Chrome */
rotateX()方法，
围绕其在一个给定度数X轴旋转的元素。
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /*Safari and Chrome */
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
transform:rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
CSS3 过渡
如果未指定的期限，transition将没有任何效果，因为默认值是0。
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width2s, height 2s, transform 2s;
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /*Chrome, Safari, Opera */
transform: rotate(180deg);
}
| 属性 | 说明 | CSS |
| transition | 此属性是 transition-property、transition-duration、transition-timing-function、transition-delay的简写形式。 | 3 |
| transition-property | 设置用来进行过渡的 CSS 属性。 | 3 |
| transition-duration | 设置过渡进行的时间长度。 | 3 |
| transition-timing-function | 设置过渡进行的时序函数。 | 3 |
| transition-delay | 指定过渡开始的时间。 | 3 |
简写的 transition属性：
width:100px;
transition: width1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
div:hover
{
width:200px;
}
CSS3 动画
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。当在@keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
指定至少这两个CSS3的动画属性绑定向一个选择器：
| 属性 | 描述 | CSS |
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
用关键词 "from"和 "to"，为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
@keyframes myfirst
{ //定义一个动画
from {background: red;} //开头动画
to {background: yellow;} //当动画完成
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s infinite;
-webkit-animation:mymove 5s infinite;
//animation复合属性。检索或设置对象所应用的动画特效。//infinite无限次重复
-webkit-animation:myfirst 5s infinite; /*Safari and Chrome */
}
| 值 | 描述 | 测试 |
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-direction检索或设置对象动画在循环中是否反向运动
| 值 | 描述 | 测试 |
| normal | 默认值。动画按正常播放。 | 测试 » |
| reverse | 动画反向播放。 | 测试 » |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | 测试 » |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
animation-play-state属性暂停动画：
| 值 | 描述 | 测试 |
| paused | 指定暂停动画 | 测试 » |
| running | 指定正在运行的动画 | 测试 » |
用百分比来规定变化发生的时间
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst5sinfinite;
//animation复合属性。检索或设置对象所应用的动画特效。//infinite无限次重复
-moz-animation:myfirst 5s infinite; /*Firefox */
-webkit-animation:myfirst 5s infinite; /*Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera*/
}
@keyframes myfirst
{ //定义一个动画
0% {background:red; ; width:300px ; top:0px; }
25% {background:yellow; ; width:300px ; top:0px; }
50% {background:blue; ; width:300px ; top:0px; }
100% {background:green; ; width:300px ; top:0px;}
}
@-moz-keyframesmyfirst /* Firefox */
{
0% {background:red; ; width:300px ; top:0px;}
25% {background:yellow; ; width:300px ; top:0px; }
50% {background:blue; ; width:300px ; top:0px; }
100% {background:green; ; width:300px ; top:0px;}
}
@-webkit-keyframesmyfirst /* Safari and Chrome */
{
0% {background:red; ; width:300px ; top:0px;}
25% {background:yellow; ; width:300px ; top:0px; }
50% {background:blue; ; width:300px ; top:0px; }
100% {background:green; ; width:300px ; top:0px; }
}
@-o-keyframesmyfirst /* Opera */
{
0% {background:red; ; width:300px ; top:0px; }
25% {background:yellow; ; width:300px ; top:0px; }
50% {background:blue; ; width:300px ; top:0px; }
100% {background:green; ; width:300px ; top:0px; }
}
改变背景色和位置：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safariand Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframesmyfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
运行myfirst动画，设置所有的属性：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframesmyfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
简写的动画 animation属性
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinitealternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2sinfinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2sinfinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinitealternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframesmyfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframesmyfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframesmyfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
背景颜色逐渐地从红色变化到蓝色：
#myDIV {
width:300px;
height:200px;
background: red url('smiley.gif') no-repeat top left/5px 5px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{background: blue bottom right/20px 20px;}
}
/* Standard syntax */
@keyframes mymove {
50%{background: blue bottom right/20px 20px;}
}
background-position动画
#myDIV {
width:300px;
height:200px;
border:1px solid black;
background-image:url('smiley.gif');
background-position: top left;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{background-position: center;}
}
/* Standard syntax */
@keyframes mymove {
50%{background-position: center;}
}
background-size动画
#myDIV {
width:300px;
height:200px;
border:1px solid black;
background-image: url('smiley.gif');
background-size: 20px 20px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{background-size: 125px 125px;}
}
/* Standard syntax */
@keyframes mymove {
50%{background-size: 125px 125px;}
}
border动画
#myDIV {
width:300px;
height:200px;
border: 1pxsolid black;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{border: 15px solid lightblue;}
}
/* Standard syntax */
@keyframes mymove {
50%{border: 15px solid lightblue;}
}
border-bottom-color动画
#myDIV {
width:300px;
height:200px;
border:15px solid black;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{border-bottom-color: lightblue;}
}
/* Standard syntax */
@keyframes mymove {
50%{border-bottom-color: lightblue;}
}
border-spacing动画
table,th,td {
border:1px solid black;
}
#myTABLE {
border-spacing: 2px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation:mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50%{border-spacing: 20px;}
}
/* Standard syntax */
@keyframes mymove {
50%{border-spacing: 20px;}
}
css动画效果 刷新自动显示播放完成自动返回
设置1
div{background-color} //div盒子
animation-name：myani； //绑定动画
animation-duration：1s； //动画播放时间
animation-timing-function：ease //缓动过渡这是默认由快到慢
animation-duration：1s； //指定过渡时间
animation-iteration-count：2；（2次）或者infinite；（无限次）//循环播放
animation-direction：alternate；//播放方向交替
animation-fill-mode：forwards；//结束后不返回
速写
需要带前缀 opera：-webkit-
火狐： -moz-
chrome： -ms-
-o-
animation： myani 1s ease 2 alternate 0s both；
秒数 缓动样式 次数 交替延迟
设置2
css里@keyframes my //调用动画 需要加上前缀
0%，或者100%{background-color：本身颜色} //设置开始
50% {background-color：要设置的颜色} //设置动画
100% {background-color：本身颜色} //设置结束
css过度效果 手动触发
设置1
div『width height background-color
transition-property：background-color； 指定过渡样式或者all
transition-duration：1s； 指定过渡时间 』
transition-timing-function：ease 缓动过渡这是默认由快到慢
transition-timing-function：linear 缓动过渡这是匀速过渡
transition-timing-function：ease-out缓动过渡这是减速运动
transition-timing-function：ease-in 缓动过渡这是加速运动
transition-timing-function：ease-in-out 这是先加速后减速运动
transition-delay：1s，2s,3s； 延迟过渡 秒数与设置的一一对应
设置2
div：hover『background-color color margin padding』
速写1.
transition：background-color 1s ease 0s，color 1s ease 0s；
属性 1秒过渡 默认缓动延迟单独给每个属性设置
速写2
transition ：all 1s ease 0s ；所有属性缓动效果设置一样
线性渐变 -从上到下
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
background: -webkit-linear-gradient(red,blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue);/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red,blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
线性渐变 -从左到右
background:-webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red,blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red ,blue); /* 标准的语法（必须放在最后）*/
线性渐变 -对角
background: -webkit-linear-gradient(left top,red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottomright, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottomright, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottomright, red , blue); /* 标准的语法（必须放在最后）*/
带有指定的角度的线性渐变：
background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 -6.0 */
background: -o-linear-gradient(0deg, red,blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, red,blue); /* Firefox 3.6 - 15 */
background: linear-gradient(0deg, red, blue);/* 标准的语法（必须放在最后） */
使用多个颜色结点
background: -webkit-linear-gradient(red,green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green,blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red,green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green,blue); /* 标准的语法（必须放在最后） */
或者
background: -webkit-linear-gradient(red10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red 10%,green 85%, blue 90%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red 10%,green 85%, blue 90%); /* Firefox 3.6 - 15 */
background: linear-gradient(red 10%, green85%, blue 90%); /* 标准的语法（必须放在最后） */
带有透明度的渐变
background: -webkit-linear-gradient(left,rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right,rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right,rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
重复的渐变
background:-webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 -6.0 */
background:-o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0*/
background:-moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15*/
径向渐变 -颜色结点均匀分布（默认情况下）
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。
径向渐变 -颜色结点均匀分布
background: -webkit-radial-gradient(red, green,blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0*/
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15*/
background:radial-gradient(red, green, blue); /*标准的语法（必须放在最后） */
径向渐变 -颜色结点不均匀分布
background:-webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera11.6 - 12.0 */
background: -moz-radial-gradient(red 5%,green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /*标准的语法（必须放在最后） */
设置形状
shape 参数定义了形状。它可以是值 circle或 ellipse。其中，circle表示圆形，ellipse表示椭圆形。默认值是 ellipse。
background:-webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /*标准的语法（必须放在最后） */
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
closest-side：
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%,closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%,closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background:radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /*标准的语法（必须放在最后） */
重复的径向渐变
background:-webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 -6.0 */
background: -o-repeating-radial-gradient(red,yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
background:-moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15*/
background: repeating-radial-gradient(red,yellow 10%, green 15%); /*标准的语法（必须放在最后） */
2D转换之移动
<div></div>
<style>
div{
width:200px;
height:200px;
background:#090;
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
2D 转换之旋转默认以中心点旋转
<style>
div{
width:200px;
height:200px;
background:#090;
margin:100px auto;
/* 改变旋转的中心点 中心点在左上角*/
transform-origin:top left;
}
div:hover{
transform:rotate(45deg); /* deg 表示度数 */
}
</style>
2D 转换之缩放
<style>
div{
width:200px;
height:200px;
background:#090;
margin:100px auto;
/* 改变旋转的中心点 中心点在左上角*/
}
div:hover{
/*transform:scale(0.5); x轴 和Y轴都是缩放0.5倍*/
transform:scale(0.5,2);
/* transform:scaleX(0.5); */ /*X轴方向缩放0.5 倍*/
}
</style>
2D 转换之斜切
<style>
div{
width:200px;
height:200px;
background:#090;
margin:100px auto;
/* 改变旋转的中心点 中心点在左上角*/
}
div:hover{
/*transform:skewX(8deg); */ x轴方向斜切
transform:skewY(8deg); Y轴方向斜切
}
</style>
2D 制作三角形 鼠标悬浮after用法
<style>
div{
width:200px;
height:40px;
margin:100px auto;
border:1px solid #333;
position: relative;
}
div:after{
content:'';
width:12px;
height:12px;
display:block;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
position:absolute;
top:50%;
right: 12px;
transform:translate(-50%,-50%) rotate(45deg);
}
div:hover{
border: 1px solid blue;
}
div:hover:after{
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}
</style>
2D 动画
<style>
div{
width:200px;
height:100px;
border: 1px solid #00f;
background:#f90;
margin:100px auto;
border-radius:15px;
transition:all 0.5s ease 0s;
}
div:hover{
width: 300px;
height: 150px;
background:#f30;
}
</style>
2D 图像圆形并旋转
<style>
img{
border: 1px solid green;
display:block;
margin: 100px auto;
border-radius:50%;
transition:all 1s;
}
img:hover{
transform:rotate(360deg);
}
</style>
2D 鼠标移动到图上图片放大
<div>
<imgsrc="banner.jpg" alt="" width="200px"height="200px">
</div>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #666;
margin: 100px auto;
overflow:hidden;
}
div img{
transition:all 0.5s;
cursor:pointer;
}
divimg:hover{
transform:scale(1.1);
}
</style>
抽奖
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8" />
<title>转盘</title>
<style>
/* 给最外层 相对定位指针绝对定位 那么旋转转盘时指针不会旋转如果最外层也有图片并且比转盘大，那么设置转盘的margin会边界传到给最外层， 就需要给最外层溢出隐藏，最外层有宽和高指针才能定位*/
#content{
width:1024px;
height:1024px;
margin:0auto;
/* overflow:hidden;*/
position:relative;
}
#zhuan{
background:url('1.jpg') no-repeat;
width:1024px;
height:1024px;
transition:all 3s ease 0s;
}
#img{
position:absolute;
top:290px;
right: 390px;
cursor:pointer;
}
</style>
<scriptsrc="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(e){
$('#img').click(function(e){
// 求得随机的旋转度数
var num = Math.floor(Math.random()*3600);
$('#zhuan').css('transform','rotate('+num+'deg)');
//度数取模360 求得真实指向的度数
num%=360;
//等到转盘转完后3000毫秒才执行下面的判断
setTimeout(function(){
//根据转出来的度数弹出对话框
if(num<=30*1){
alert('免单300');
}else if(num<=30*2){
alert("面单500");
}else{
alert("message");
}
},3000);
});
});
</script>
</head>
<body>
<divid="content">
<divid="zhuan"></div>
<imgid="img" src="2.png">
</div>
</body>
</html>
3D旋转X轴
<div><img src="1.jpg" alt=""width="200px" height="200px"></div>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
perspective:400px; /* 透视效果 必须给父元素添加*/
}
img{
transform-origin:bottom;/*改变图片旋转方式 默认以中心旋转*/
transition:all 0.5s;
}
div:hover img{
transform:rotateX(60deg);/*x轴旋转60度 添加透视功能后才有立体感*/
}
</style>
3D旋转X轴打开的盒子
<div id="content">
<divid="face1"></div>
<divid="face2"></div>
</div>
<style>
#content{
width:200px;
height:200px;
margin:100px auto;
border:1px solid blue;
/* 设置相对定位让图片相对于盒子*/
position:relative;
}
#face1,#face2{
width:200px;
height:200px;
background:url('0.jpg') no-repeat;
/* 设置绝对定位图片才能重合*/
position:absolute;
top: 0px;
left:0px;
border:1px solid #666;
border-radius:50%;
}
#face2{
background:url('1.jpg') no-repeat;
/* 动画效果 */
transition:all 1s;
/* 改变图片旋转中心点 */
transform-origin:bottom;
}
#content:hover #face2{
/* 图片旋转角度 */
transform:rotateX(180deg);
}
</style>
3D旋转☞Y轴一分钱专享
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8" />
<title>转盘</title>
<style>
#content{
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid blue;
/* 相对定位 让图片以这个盒子做绝对定位 */
position:relative;
}
#face1,#face2{
/* 图片的大小 */
width: 300px;
height: 300px;
/* 以图片的左下角定位显示图片 */
background:url('1.png') no-repeat left bottom;
/* 绝对定位把图片合在一起 */
position:absolute;
top:0px;
left: 0px;
border: 1px solid #666;
border-radius:50%;
/* 图片旋转过去后就隐藏起来 */
backface-visibility:hidden;
/* 过渡动画 */
transition:all 1s;
}
/* 把底下的图片调到上面 */
#face1{
z-index:1;
}
#face2{
/* 第二个盒子定位第二个图片 */
background-position:-300px bottom;
/* 最下面的图片 需要事先旋转180度 等转过来后就是正的 rotate不指定XY则是顺时针或逆时针旋转*/
transform:rotateY(180deg);
/* 动画效果 */
}
#content:hover #face1{
/* 图片旋转角度 */
transform:rotateY(180deg);
}
#content:hover #face2{
/* 图片旋转角度 */
transform:rotateY(0deg);
}
</style>
</head>
<body>
<divid="content">
<divid="face1"></div>
<divid="face2"></div>
</div>
</body>
</html>
1.<!DOCTYPE html> <!-- html5-->
2.<meta charset=utf-8> <!-- html5可以不加引号 -->
3.<header> <!-- 定义头部 -->
<hgroup>导航相关数据</hgroup>
<!--定义文件中一个区块的相关信息-->
</header>
7.<nav>菜单</nav> <!-- 定义菜单 -->
8.<article> <!-- 定义文章 -->
<h1>标题:PHP100视频-HTML5专题教程</h1>
发布日期:<time>19:00</time> <!-- 定义时间 -->
<timedatetime="2013-2-14">情人节</time><!-- 定义时间但页面不显示datetime内容-->
<p>测试相关内容</p>
</article>
9. <footer> <!-- 定义页面底部 -->
<address>上海徐汇区-创恩教育-PHP100中文网</address>
<!--定义地址 -->
</footer>
10.
<!--浏览器不支持html5标签的解决办法 js创建标签-->
<script type="text/javascript">
document.createElement('article');
document.createElement('nav');
document.createElement('header');
</script>
最后
以上就是单纯紫菜为你收集整理的css3的全部内容，希望文章能够帮你解决css3所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复