码迷,mamicode.com
首页 > 其他好文 > 详细

8.27

时间:2018-08-27 18:46:09      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:就是   border   方向   注意   box   转换   阴影   多个   属性   

边框:border

border-width

border-color

border-style

border-radius   圆角

技术分享图片

box-shadow:x y r color;

x 是正负数 正数说明阴影往右;

y 为正数 阴影往下;

r 就是阴影的范围;

color 就是阴影的颜色。

技术分享图片

2d空间

平移:translate

缩放:scale

旋转:rotate

拉伸:skew

 transform:转换,我们如果需要给元素添加2d效果,先给元素添加transform属性。

上面的四种方法是transform的属性值。

(注意:各个浏览器的版本问题。浏览器兼容的本质:是浏览器自己内核决定的。)

1. translate()

技术分享图片

translate()方法有两个参数,分别是x轴和y轴。

2. rotate()旋转  参数里的单位是deg,就是角度的意思,不是弧度。

技术分享图片

如果出现多个效果的时候

技术分享图片

技术分享图片

3.scale()缩放

两个参数,一个是决定水平方向,一个是决定上下的。

技术分享图片

如果是一个参数,xy都是一样的,等比例。

4. skew()拉伸 

技术分享图片

 过渡 transition

transition 后面跟的值有哪些?  过渡的属性  过渡花费的时间  过渡的速度  过渡延迟

技术分享图片

技术分享图片

animation 动画

@keyframes 定义动画。

chrome 的内核是 webkit 火狐的内核前缀是moz  ie的内核前缀是ms

过渡和动画不能放在一起使用。

8.27

标签:就是   border   方向   注意   box   转换   阴影   多个   属性   

原文地址:https://www.cnblogs.com/jihongtao/p/9542753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!