HTML5+CSS3 4

html5图像标签

<img>标签      定义网页中的图像      <img src="路径" alt="图片无法显示时展示的文字"/>

<figure>标签和<figcaption>标签      网页中添加插图     

<figure>

<figcaption>文字</figcaption>

<img.....>

</figure>

css背景设置

background-color    背景颜色    red/#FF0000/rgba(255,0,0,0.5)    预定义颜色/十六进制颜色/红绿蓝透明度

background-image    背景图片    url    直接应用地址

background-repeat    背景平铺重复方向    repeat/no-repeat/repeat-x/repeat-y    横纵向平铺/不平铺/横向平铺/纵向平铺

background-attachment    背景图像随对象内容滚动还是固定    scroll/fixed    随对象滚动/固定

background-position    对象的背景图像位置    length|length或者position|position    length:百分数|2.5cm   position:top/center/buttom|left/center/right

background-size    背景图像尺寸    length/percentage/cover/contain    宽,高/以父元素的百分比设置宽高/完全覆盖/完全适应内容区域

盒阴影

{box-shadow:inset|5px|4px|10px|4px|#000}

投影方式内投影默认外投影|x轴偏移阴影在对象右边5px|y轴...|阴影模糊半径,边缘模糊|阴影扩展半径,延伸扩大4px|阴影颜色

css3渐变

线性渐变 background-image:liner-gradient left/100deg,#FF0000 0%,........    自左向右/100度向外发散渐变(圆),渐变颜色 颜色边界,.....

径向渐变background-image:radial-gradient 100px,#FF0000 10%,......    圆心坐标,(默认渐变椭圆)渐变颜色 颜色边界,.....

重复渐变 两种渐变前加repeating

css圆角边框

border-radius: 9px 9px 9px 9px (四个边角内切圆左上右上左下右下)

css3过渡

transition:property duration timimg-function delay;

property     应用过渡的属性名称    none/all/property    没有属性的获得过渡/所有获得默认/自定义

duration    过渡用时    time值(3s)

timing-function    过渡效果的时间曲线    ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(n,n)    默认,慢到快最后慢结束/匀速/慢速开始/慢速结束/慢速开始和结束/自定义(0<n<1)

delay    等待时间    time值(1s)默认0

css3变形

transform:none/rotate(angle)/skew(x-angle,y-angle)/scale(x,y)/translate(x,y);    默认,无/旋转角度/倾斜角度/缩放/移动右下为正    2D

元素变形原点    transform-origin:left/right/center/length/%|top/center/buttom/length/%|length

rotate3d(x,y,z,angle)    旋转轴旋转角度    类似2D    3D

perspective(100px)    透视(深度)

@keyframes

@keyframes animationname{

 0%/from{

  动画状态

  }

 100%/to{

  动画状态

  }

}

animation  

annimation:name duration timing-function delay iteration-count direction fill-mode plat-state;     

名称 时间 速度曲线 延迟 播放次数默认1infinite无限 逆向播放normal正常alternate轮流反向播放 是否正在运行running默认正在播放 动画时间之外的状态 none默认不改变forwards保持最后一个属性值

猜你喜欢

转载自www.cnblogs.com/zxy117/p/11063128.html