CSS3相关内容

*学习笔记

浏览器内核前缀

IE Trident -ms-

Firefox Gecko -moz-

Opera Presto -o-

Chrome Webkit -webkit-

Safari Webkit -webkit

Opera、Chrome Blink

浏览器前缀

css3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀

样式过度 transition属性

应用格式：transition : property duration delay timing-function

property 规定设置过度效果的css属性名称

duration 规定过渡效果完成时间

delay 定义效果何时开始（可延迟（数值为正）也可提前）

timing-function 用于设置过渡的方式。默认值为ease 逐渐慢下来

其他值：linear 正常 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速

元素变形transform属性

translate：位移 transform:translate(100px,0)

scale：缩放,值是一个比例值，正常大小为1 transform:scale(2)

rotate：旋转 transform: rotate(60deg)

skew：斜切 transform:skew(-30deg,10deg)

transform注意事项：

1.变形操作不会影响到其他元素

2.变形操作只能添加给块元素，不能添加给内联元素

3.可以复合写法 transform:translate(100px,0) scale(2) rotate(60deg) skew(-30deg,10deg) 执行顺序是从后到前

4.transform-origin可以决定旋转基点

animation动画

animation-name：设置动画的名字

animation-duration：动画持续的时间

animation-delay：动画延迟时间

animation-iteration-count：动画的重复次数，默认值为1，infinite无限次数

animation-timing-function：动画的运动形式

注：1.运动结束后，默认情况下会停留在起始位置

2.@keyframes : form/0%，to/100%

如：

<style>

.div1{width: 300px;height: 300px;border: 1px solid black;margin: 30px auto;}

.div2{width: 100px;height: 100px;background-color: brown;

animation-name: mybox;animation-duration: 3s;

}

@keyframes mybox{

from{transform: translate(0,0);}

to{transform: translate(200px,0);}

}*/

@keyframes mybox{

0%{transform: translate(0,0);}

25%{transform: translate(200px,0);}

50%{transform: translate(200px,200px);}

75%{transform: translate(0,200px);}

100%{transform: translate(0,0);}

}

</style>

</div>

扩展

animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见。

none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效。

backwards：在延迟的情况下，让0%在延迟前生效

forwards：在运动结束之后，停留在结束位置

both：backwards和forwards同时生效

animation-direction：定义是否应该轮流返向播放动画

alternate：一次正向一次反向

reverse：永远都是反向，从100%~0%

normal（默认值）：永远都是正向

引用animation.css(https://animate.style/)

css添加类animate__animated一个元素,以及任何的动画的名字(不要忘记animate__前缀!)

3D操作

transform:

rotateX()：正值向上翻转

rotateY()：正值向右翻转

translateZ()：正值向前，负值向后

scale()：立体元素的厚度

加上perspective（景深）高屏幕多远的距离区观察元素，值越大幅度越小

transform-origin: center center -50px；（Z轴只能写数值）

transform-style：3D空间 flat（默认值2d） preserve-3d(3d，产生一个三维空间)

backface-visibility：背面隐藏（设置透明度时可用） hidden，visible

立方体：

*{margin: 0;padding: 0;}

ul{list-style: none;}

.box{width: 300px;height: 300px;border: 1px solid black;margin: 30px auto;perspective: 200px;perspective-origin: top;}

.box ul{width: 100px;height: 100px;background-color: brown;margin: 100px;position: relative;transform-style: preserve-3d;transform-origin: center center -50px;}

.box ul li{width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;

color: cornsilk;font-size: 26px;backface-visibility: hidden;opacity: 0.5;}

.box ul li:nth-child(1){background-color: brown;left: 0;top: 0;}

.box ul li:nth-child(2){background-color: rgb(42, 165, 97);left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}

.box ul li:nth-child(3){background-color: rgb(177, 221, 17);left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg)}

.box ul li:nth-child(4){background-color: rgb(70, 79, 211);left: 0px;top: -100px;transform-origin: bottom;transform: rotateX(90deg)}

.box ul li:nth-child(6){background-color: rgb(70, 79, 211);left: 0px;top: 0px;transform: translateZ(-100px) rotateY(180deg)}

.box ul li:nth-child(5){background-color: slateblue;left: 0px;top: 100px;transform-origin: top;transform: rotateX(-90deg)}

.box:hover ul{transform: rotateY(360deg) ;transition: 2s;}

<ul>

</ul>

</div>

css3渐变

线性渐变->linear-gradient(是background-image的值)：linear-gradient(to right,red,blue) 常用

径向渐变->radial-gradient

字体图标 font-face

阿里巴巴矢量图标库图标库http://www.iconfont.cn/

自定义字体图标：https://icomoon.io/app 在线生成字体图标

好处：

1.可以非常方便的改变大小和颜色 font-size ， color

2.放大后不会失真

3.减少请求次数和提高加载速度

4.简化网页布局

5.减少设计师和前端工程师的工作量

6.可使用计算机没有提供的字体

使用@font-face{}

文字阴影text-shadow：

x y blur color

text-shadow: 5px 5px 10px gray,6px 6px 8px seagreen;

用逗号隔开可以设置多阴影

盒子阴影box-shadow :

x y blur spread color inset

box-shadow: 5px 5px 10px 5px gray inset,6px 6px 8px seagreen;

、默认是外阴影，如果设置outset不起作用，可选值只有inset为内阴影