CSS3背景与边框相关样式 CSS3中的变形处理 CSS3中的动画功能
2017-06-14 00:00
169 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
/*背景与边框相关样式
1.1指定背景的显示范围 background-clip属性
1.2指定背景图像的绘制起点 background-origin属性 利用background-origin属性来指定绘制时从边框的左上角开始绘制，或者从内容的左上角开始绘制
1.3指定背景图像的尺寸 background-size属性 例:background-size:40px 20px;40px为背景图片的宽度，20px为背景图像的高度
可以将background-size属性指定为contain关键字，这将把原始图像在维持纵横比的前提下自动放大或缩小，以使原始图像的宽度或高度完全等于元素的宽度或高度
可以将background-size属性指定为cover关键字，这会使原始图像在维持纵横比的前提下将背景图像自动缩放到填满元素内部，
如果元素的长宽比例与原始图像的长宽比例不一致，那么多余部分将被剪去
1.4新增的用于平铺背景图像的选项 space与round space选项在水平方向或垂直方向平铺背景图像时并不裁剪图像超出背景的部分，
也不会调整背景图像尺寸，而是自动调节图像与图像之间的间距
而round选项在水平方向或垂直方向平铺背景图像时同样不会裁剪掉图像超出背景的部分，而是会自动调整背景图像的尺寸
1.5使用渐变色背景
background:linear-gradient(to bottom,orange,black);
1.6绘制放射性渐变
background-image:radial-gradient(orange,black);
1.7使用图像边框
border-image:url(图像文件路径) A B C D (ABCD参数表示当浏览器自动把边框所使用到的图像进行分割时的上边距、右边距、下边距以及左边距)
使用border-image属性来指定边框宽度border-image:url(图像文件路径) A B C D/border-width
指定元素4条边中图像的显示方法border-image:url(图像文件路径) A B C D/border-width topbottom leftright (topbottom表示元素的
上下两条边中图像的显示方法 leftright表示元素的左右两条边中显示的方法
*/
/*div{*/
/*background-color: black;*/
/*border: dashed 15px green;*/
/*padding:30px;*/
/*color: white;*/
/*font-size: 30px;*/
/*font-weight: bold;*/
/*}*/
/*div.div1{*/
/*-moz-background-clip: border;*/
/*-webkit-background-clip: border;*/
/*}*/
/*div.div2{*/
/*-moz-background-clip: padding;*/
/*-webkit-background-clip: padding;*/
/*}*/
div#hh{
width: 500px;
height: 500px;
border: 1px solid blue;
background: #339933;
background-image: url("border.png"),url("clock_34_bj.jpg");
background-repeat: no-repeat,repeat-x;
background-position: 30% 50%,50%;
}
div#ss{
width: 300px;
height: 300px;
background: linear-gradient(30deg,orange,black);/*30deg定义渐变线的角度为30度*/
background: linear-gradient(to bottom,orange 20%,black 70%);/*从div元素的顶端往下20%一直渐变到离元素底端30%*/
background: linear-gradient(to bottom,orange 0%,red 25%,yellow 50%,green 75%,black 100%);/**/
}
div#ff{
width: 400px;
height: 200px;
background-image: radial-gradient(orange,black);
background-image: radial-gradient(at left top,orange,black);/*可以通过关键字指定渐变起点位置 从左上角向外扩散*/
background-image: radial-gradient(ellipse closest-side at 130px 50px,orange,black);/*closest-side可渐变到离渐变起点最近的一条边*/
background-image: radial-gradient(circle 130px at 130px 50px,orange 0%,red 25%,yellow 50%,green 75%,black);
/*指定多个渐变中间点 添加红色、黄色及绿色中间点*/
}
div#cc{
width: 200px;
height: 200px;
background-image: url("clock_34_bj.jpg");
border: solid 5px;
border-image: url("border.png") 30 15 15 15 /5px stretch repeat;
}
</style>
</head>
<body>
<!--<div class="div1">示例文字1</div>-->
<!--<div class="div2">示例文字2</div>-->
<div id="hh">示例文字</div>
<div id="ss">示例文字</div>
<div id="ff">示例文字</div>
<div id="cc">示例文字</div>
<br>
</body>
</html>//CSS3变形处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
/*CSS3中的变形处理
1.1缩放 scale scale(0.5)缩小一半 scale(0.5,2)(水平方向缩小一半，垂直方向放大一倍)
1.2倾斜 skew(30deg,30deg)表示水平方向倾斜30°，垂直方向倾斜30°
1.3移动 translate(50px,50px)表示水平方向上移动50px,垂直方向上移动50px
指定变形的基准点 transform-origin属性，可以改变变形的基准点
3D旋转变形方法的使用示例如下：
*/
/*div{*/
/*width: 300px;*/
/*margin: 150px auto;*/
/*background-color: yellow;*/
/*text-align: center;*/
/*transform: rotate(45deg);*/
/*transform: scale(0.5,2);*/
/*transform: skew(30deg,30deg);*/
/*transform:rotate(45deg) scale(0.5,2) translate(30px,30px) ;*/
/*}*/
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*display: inline-block;*/
/*}*/
/*div#a{*/
/*background-color: pink;*/
/*}*/
/*div#b{*/
/*background-color: green;*/
/*transform: rotate(45deg);*/
/*!*修改变形基准点*!*/
/*transform-origin: left bottom;*/
/*transform: rotateX(30deg) rotateY(45deg) rotateZ(60deg);*/
/*}*/
div{
width: 300px;
height: 100px;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<div id="div">示例文字</div>
<input type="button" value="绕X轴旋转" onclick="rotateX()">
<input type="button" value="绕Y轴旋转" onclick="rotateY()">
<input type="button" value="绕Z轴旋转" onclick="rotateZ()">
<script>
var n,rotINT,rotXINT,rotYINT,rotZINT;
var div=document.getElementById("div");
function rotateX() {
n=0;
clearInterval(rotXINT);
rotXINT=setInterval("startXRotate()",10);
}
function startXRotate() {
n=n+1;
div.style.transform="rotateX(" + n +"deg)";
if(n==180){
clearInterval(rotXINT);
n=0;
}
}
function rotateY() {
n=0;
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate()",10);
}
function startYRotate() {
n=n+1;
div.style.transform="rotateY(" + n +"deg)";
if(n==180){
clearInterval(rotYINT);
n=0;
}
}
function rotateZ() {
n=0;
clearInterval(rotZINT);
rotZINT=setInterval("startZRotate()",10);
}
function startZRotate() {
n=n+1;
div.style.transform="rotateZ(" + n +"deg)";
if(n==180){
clearInterval(rotZINT);
n=0;
}
}
</script>
</body>
</html>//ＣＳＳ３动画功能
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
/*CSS3中的动画功能
transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能
transition:property duration timing-function (property表示对哪个属性进行平滑过渡
duration表示在多久时间内完成属性值的平滑过渡 timing-function表示通过什么方法进行平滑过渡)
transition-delay属性，该属性指定变换动画特效延迟多久后开始执行 或在第四个参数中写延迟时间
*/
/*Animation
Animation功能与transitions功能相同，都是通过改变元素的属性值来实现动画效果。它们的区别在于：使用transitions功能时只能通过
指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；Animations通过定义
多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
使用Animations功能的时候，通过如下所示的方法来创建关键帧的集合
@keyframes 关键帧集合名{创建关键帧的代码}
40%{
本关键帧中的样式代码
}
创建好关键帧的集合之后，在元素的样式中使用该关键帧的集合，代码类似如下：
div#cc:hover{
animation-name: mycolor; //指定关键帧集合的名称
animation-duration: 5s;//指定完成整个动画所花费的时间
animation-timing-function: linear;//指定实现动画的方法
linear在动画开始时与结束时以同样速度进行改变
ease-in动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out动画开始时速度很快，然后速度沿曲线值进行放慢
ease动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
animation-iteration-count//用于指定动画的执行次数，可指定为infinite（无限次）
animation-direction//用于指定动画的执行方向
}
*/
div#aa{
background-color: #ffff00;
/*transition: background-color 1s linear 1s;*/
width: 300px;
color: #000000;
/*同时平滑过渡多个属性值*/
transition: background-color 1s linear,color 1s linear,width 1s linear;
}
div#aa:hover{
background-color: #00ffff;
color: #ffffff;
width: 800px;
}
img{
position: absolute;
top:70px;
left: 0;
transform: rotate(0deg);
transition: left 1s linear,transform 1s linear;
}
div#bb:hover img{
position: absolute;
left:30px;
transform: rotate(720deg);
}
div#cc{
position: absolute;
background-color: yellow;
top:500px;
width: 500px;
}
@keyframes mycolor {
0%{
background-color: red;
transform: rotate(0deg);
}
40%{
background-color: darkblue;
transform: rotate(30deg);
}
70%{
background-color: yellow;
transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
}
}
@keyframes aaa {
0%{
width:100px;
height: 100px;
}
100%{
width: 500px;
height: 500px;
}
}
div#dd{
background-color: red;
width: 500px;
height: 500px;
-webkit-animation-name: aaa;
-moz-animation-name: aaa;
-o-animation-name: aaa;
animation-name: aaa;
animation-duration: 5s;
animation-timing-function: ease;
}
div#cc:hover{
animation-name: mycolor;
animation-duration: 5s;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*网页的淡入效果*/
@keyframes fadein {
0%{
opacity: 0;
background-color: white;
}
100%{
opacity: 1;
background-color: white;
}
}
body{
animation-name: fadein;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div id="aa">示例文字</div>
<div id="bb">
<img src="border.png" alt="*">
</div>
<div id="cc">dddd</div>
<div id="dd">dddd</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3系列三（与背景边框相关样式 、变形处理、动画效果）
- CSS3背景与边框相关样式
- 背景、边框样式及变形处理
- css3背景与边框相关样式
- CSS3背景与边框相关样式
- chrome的input默认样式黄色背景以及选中加粗的边框处理
- CSS3之边框样式（动画过渡）
- CSS3下不一样的阴影、背景和圆角边框样式
- css3 背景图 边框样式
- CSS3——新增背景属性和边框样式
- 【CSS3】与背景相关的样式--慕课网【学习总结】
- 8.HTML5 CSS3 背景、边框与补丁相关属性
- CSS3学习系列之背景相关样式（二）
- css3背景、边框、和补丁相关属性
- CSS3学习笔记之与背景相关的样式
- CSS3学习（六）盒子、背景、边框新样式
- CSS3之边框样式（动画过渡）