css3 有此文章就够了

Posted 2021-04-09 Web自学平台

每天前3位关注的，免费送一套价值580元的全套教材给你！

css3的兼容性

-webkit 为chrome和Safari的兼容前缀
-moz 为Firefox的兼容前缀
-ms 为IE的兼容前缀
-o 为opera的兼容前缀

1，边框

border-radius添加圆角边框
border-radius:50%;为一个圆
box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
border-image:url() 10px 20px no-repeat;

2,颜色

color:rgba();

3,字体

@font-face{font-family:"user-defined";src:url(字体路径);
}p{font-family: "user-defined";font-size: 16px;
}

文本阴影

text-shadow:x-offset y-offset blur color;

4,背景

background-origin: border-box | padding-box | content-box;

背景的起始位置;

background-clip ： border-box | padding-box | content-box | no-clip;

背景的剪切;

background-image:url(),url();

多背景;

5,形变之旋转，扭曲，放缩，位移,-webkit-transform-style:-webkit-preserve-3d;

1,相对于自身的中心点旋转

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);transform:rotate(45deg);

2,相对于自身的中心点扭曲;

-webkit-transform:skew(45deg);
-moz-transform:skew(45deg);transform:skew(45deg);

还有skewY()或者skewX();一个方向上的扭曲变形;
3,相对于原图片的大小进行放缩;

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);transform:scale(0.8);

4,相对于原位置的位移translate(50%,50%);

-webkit-transform:translate(50%,50%);
-moz-transform:translate(50%,50%);transform:translate(50%,50%);

5,设置元素的中心点tranform-origin:left top;

-webkit-transform-origin:left top;
-moz-transform-origin:left top;transform-origin:left top;

css3中进行形变的旋转，扭曲，放缩，位移都是相对于自身的中心点进行的形变;

6,动画

过渡属性transition

transition-property:height;指定过渡动画的css属性;transition-duration:2s;指定完成过渡动画所需的时间;transition-timing-function:ease-in;指定动画的执行函数;transition-delay:2s;指定开始动画的延迟时间；

div{height:200px;-webkit-transition-property:height;-webkit-transition-duration:2s;-webkit-transition-timing-function:ease-in;-webkit-transition-delay:2s;-moz-transition-property:height;-moz-transition-duration:2s;-moz-transition-timing-function:ease-in;-moz-transition-delay:2s;transition-property:height;transition-duration:2s;transition-timing-function:ease-in;transition-delay:2s;
}div:hover{heihgt:400px;
}

7,@keyframes关键帧,以@keyframes开头，后跟动画名称加上{}

@keyframes round{//@-webkit-keyframes //@-moz-keyframes0%{background-color:red;}50%{background-color:green;}100%{background-color:yellow;}
}

8,动画的调用

animate-name属性主要是用来调用@keyframes定义好的动画,animation-name:调用的动画名
span{
animation-name:round;
-webkit-animation-name:round;
-moz-animation-name:round;//动画名称
-ms-animation-name:round;//动画名称
-o-animation-name:round;//动画名称
-webkit-animation-duration:5s;//动画持续时间
-webkit-animation-timing-function:ease-out;//动画执行的函数
-webkit-animation-delay:0.2s;//动画的延迟时间
-webkit-animation-iteration-count:infinite||数值//动画执行的次数
-webkit-animation-direction:normal || alternate//奇次和偶次运动方向相反
-webkit-animation-play-state:runing ||paused//属性主要用来控制元素动画的播放状态
-webkit-animation-fill-mode:none||forwards||backwards||both;//用来控制动画执行到最后一帧时的状态
}

设置3D场景

//perspective远景透视图
-webkit-perspective:800; //3D物体距离屏幕的距离
-webkit-perspective-origin:50% 50%;//3D元素基点基于X,Y轴的位置

结语

感谢 · 转发欢迎大家留言