CSS3 初步学习

发布日期:2018-02-09    浏览次数:612

  CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的。

一、CSS3边框

1、圆角border-radius

border-radius:值越大,角越圆;

div
{
    width:100px;
    height:100px;
    background-color:red;
    border-radius:10px;
    border-top-left-radius:20px;
}
  • border-top-left-radius:2em;
  • border-top-right-radius:2em;
  • border-bottom-right-radius:2em;
  • border-bottom-left-radius:2em;

也可以根据上面4个参数,单独设置某个角。

2、阴影box-shadow

div
{
  width:100px;
  height:100px;
  background-color:yellow;
  box-shadow: 10px 10px 5px #d8d8d8;
}

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平向右偏移量;

v-shadow:垂直向下偏移量;

blur:模糊距离;

spread:阴影尺寸;

color:阴影颜色;

inset:改为内阴影;

3、边框图片 border-image

  • border-image-source 用在边框的图片的路径。
  • border-image-slice 图片边框向内偏移。
  • border-image-width 图片边框的宽度。
  • border-image-outset 边框图像区域超出边框的量。
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

二、CSS3 背景

  1、background-size:控制背景图片的大小;

background-size:20px 20px;

  2、background-origin:3个属性可选;

  • padding-box 背景图像相对于内边距框来定位。
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

  3、background-clip:规定背景的绘制区域。

  • padding-box 背景图像相对于内边距框来定位。
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

  另外在CSS3中,background-image:可以设置多张图片了。

background-image:url(1.gif),url(2.gif);

三、过渡transition

  • transition:简写属性,用于在一个属性中设置四个过渡属性。
  • transition-property:规定应用过渡的 CSS 属性的名称。
  • transition-duration:定义过渡效果花费的时间。默认是 0。
  • transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
  • transition-delay:规定过渡效果何时开始。默认是 0。

  其中transition-timing-function过渡时间,有以下几种,你可以规定它过渡的速度。

  • linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
  • ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  • ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  • ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:200px;
    height:200px;
    background-color:#d8d8d8;

}
div:hover
{
    width:300px;
    transition: width 2s;
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

  鼠标移上3D转换360度。

div:hover
{
    transform: rotateY(360deg);
    transition: transform 2s;
}

四、CSS动画

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background-color:#d5d5d5;
    color:white;
    animation:myfirst 5s;
}

@keyframes myfirst
{
    from {margin-left:20px;}
    to {margin-left:520px;transform: rotateY(360deg);}
}

</style>
</head>
<body>
<div>
    飞啊飞
</div>
</body>
</html>

  以上是改变位置,并且一边移动一边旋转的动画。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background-color:#d5d5d5;
    color:white;
    animation:myfirst 5s infinite;
}

@keyframes myfirst
{
    0%   {margin-left:20px;}
    25%  {margin-left:520px;transform: rotateY(360deg);}
    50%  {margin-top:120px;transform: rotateX(180deg);}
    75%  {margin-left:320px;transform: rotateY(360deg);}
    100% {margin-top:0px;transform: rotateX(180deg);}
}

</style>
</head>
<body>
<div>
    飞啊飞
</div>
</body>
</html>

属性自己去查吧。太多。

  • @keyframes 规定动画。
  • animation 所有动画属性的简写属性,除了 animation-play-state 属性。
  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线。默认是 "ease"。
  • animation-delay 规定动画何时开始。默认是 0。
  • animation-iteration-count 规定动画被播放的次数。默认是 1。
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
  • animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
  • animation-fill-mode 规定对象动画时间之外的状态。

五、其他

  • resize:设置用户可以通过拖拉改变元素尺寸;
  • opacity:透明度;IE8旧的浏览器是这个filter:Alpha(opacity=50); 
  • max-height:设置元素的最大高度。
  • max-width:设置元素的最大宽度。
  • min-height:设置元素的最小高度。
  • min-width:设置元素的最小宽度。
  • transform 向元素应用 2D 或 3D 转换。
  • transform-origin 允许你改变被转换元素的位置。
  • transform-style 规定被嵌套元素如何在 3D 空间中显示。
  • perspective 规定 3D 元素的透视效果。
  • perspective-origin 规定 3D 元素的底部位置。
  • backface-visibility 定义元素在不面对屏幕时是否可见。
  • outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

六、2D转换

  • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵;
  • transform-origin:围绕着旋转的原点,可用X、Y百分比;
  • translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素;
  • ----translateX(n) 定义 2D 转换,沿着 X 轴移动元素;
  • ----translateY(n) 定义 2D 转换,沿着 Y 轴移动元素;
  • scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度;
  • ----scaleX(n) 定义 2D 缩放转换,改变元素的宽度;
  • ----scaleY(n) 定义 2D 缩放转换,改变元素的高度;
  • rotate(angle) 定义 2D 旋转的角度(负数逆时针);
  • skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴;
  • ----skewX(angle) 定义 2D 倾斜转换,沿着 X 轴;
  • ----skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴;
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:300px;
    height:240px;
    line-height:28px;
    border:2px solid #dcdcdc;
    transform: rotate(30deg);

}
</style>
</head>
<body>
<div>
    <img style="width:300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" />
    <span style="padding-left:20px;">美丽的花海</span>
</div>
</body>
</html>

七、3D转换

  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵;
  • translate3d(x,y,z) 定义 3D 转化;
  • translateX(x) 定义 3D 转化,仅使用用于 X 轴的值;
  • translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值;
  • translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值;
  • scale3d(x,y,z) 定义 3D 缩放转换;
  • scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值;
  • scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值;
  • scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值;
  • rotate3d(x,y,z,angle) 定义 3D 旋转;
  • rotateX(angle) 定义沿 X 轴的 3D 旋转;
  • rotateY(angle) 定义沿 Y 轴的 3D 旋转;
  • rotateZ(angle) 定义沿 Z 轴的 3D 旋转;
  • perspective(n) 定义 3D 转换元素的透视视图;

  3D可以想象一个立体坐标系在屏幕上,X向右,Y向里,Z向上。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:300px;
    height:240px;
    line-height:28px;
    border:2px solid #dcdcdc;
    transform:rotateX(180deg);

}
</style>
</head>
<body>
<div>
    <img style="width:300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" />
    <span style="padding-left:20px;">美丽的花海</span>
</div>
</body>
</html>

 

本文网址:https://www.wyxxw.cn/blog-detail-1-3-315.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:http://www.cnblogs.com/kissdodog/p/5429970.html 。 转载人:momo