美文网首页程序员
css3的基础知识总结

css3的基础知识总结

作者: WEB攻程狮 | 来源:发表于2017-09-16 20:49 被阅读0次

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-keyframes
0%{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轴的位置

欢迎加入
前端学习交流群:461593224

作者: MGT360124
链接:http://www.imooc.com/article/19813
来源:慕课网

相关文章

  • 2019-06-03

    css基础知识 完善 表单: 框架集 ie6png图片的修复 css3过渡动画: 例如 css3 阴影 : 语法:...

  • 前端需要掌握的技术

    基础知识HTML5audio、video、cancas 本地存储的了解CSS3选择器 、常规样式属性、css3的变...

  • css3的基础知识总结

    css3的兼容性 -webkit 为chrome和Safari的兼容前缀-moz 为Firefox的兼容前缀-ms...

  • CSS3基础知识总结

    1. 圆角 border-radius 单位可以为百分比或具体值(50%,5px) 1)border-radius...

  • CSS3之@font-face

    基础知识 @font-face虽然是CSS3模块,但是IE4时代开始就已经支持了它,只不过跟现在CSS3的功能相比...

  • 怎么提高自己初中数学的教学能力

    1,自己要总结基础知识,自己要去总结基础知识,自己要定个计划,把初中数学的基础知识给总结出出来。 2,自己要多讲课...

  • 01_CSS3

    基础知识 选择器 CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQu...

  • CSS3学习

    第3章基础知识3.1选择器CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器...

  • PHP从入门到精通

    一、PHP学习教程 PHP学习前期,首要的WEB前端基础知识,比如:html5、css3、java、jquery有...

  • CSS3实现超炫3D翻书效果(一)

    基础知识储备 -transform:CSS3新增的变形功能,其优点是全过程不改变DOM性能更高。在transfor...

网友评论

    本文标题:css3的基础知识总结

    本文链接:https://www.haomeiwen.com/subject/utwysxtx.html