`

CSS3前端技术总结

阅读更多

--------------通用注意事项---------------------

1.网页设计应该先清除浏览器默认的样式

{

    padding: 0;

    margin:0;

}

 

--------------场用样式-------------------------

1.text-shadow文字阴影

2.border-radius圆角

3.border-image边框图片

4.box-shadow盒子阴影

5.first-line匹配第一行文本

6.first-letter匹配第一个字符

7.E[foo^="bar"]前缀

8.E[foo$="bar"]后缀

9.E[foo*="bar"]通配

10. E:nth-child(n)/(odd)/(even)匹配第一个/奇数个/偶数个元素

11.table-layout表格布局,默认为automatic,一般为fixed

12.empty-cells空单元格是否隐藏边框和背景,默认为shou

13.border-collapse为表格设置合并边框模型,建议为collapse

14.E:enabled/disabled/checked不用状态下的样式

15.list-style-type设置不同的列表样式

16.vertical-align定义文本的垂直对齐方式

17.text-indent定义文本的首行缩进

18.line-height定义文本行高

19.font-stretch定义是否横向拉伸变形字体

20.text-overflow定义省略文本的处理方式

21.word-wrap定义文本超过边界时,是否断开换行

22.box-orient定义盒子内部流动布局方向

23.resize自由缩放效果

24.outline元素激活时的外轮廓线

25.content设置元素的内容

26.columns定义多列布局

27.columns-gap多列布局的边框

28.transform动画效果

29.rotate()旋转动画

30.scale()缩放动画

31.translate()移动动画

32.skew()倾斜函数

33.matrix()矩阵变形动画

34.transform-originCSS变形的原点,默认中心点

35.transition-duration动画过渡的时间

36.animationCSS动画

37.animation-name动画名称

38.animation-duration动画时间

39.animation-timing-function动画播放方式

40.animation-delay动画开始播放时间

41.animation-iteration-count动画播放次数

42.animation-direction动画播放方向

 

分享到:
评论

相关推荐

    前端,可视化大屏,纯css3+svg动画实现流转动画

    总结来说,这个项目展示了如何通过现代前端技术,如CSS3和SVG,结合数据可视化理念,创建一个具有动态流转动画的可视化大屏。这不仅可以提升用户体验,还能帮助决策者更好地理解和解析大量数据。

    前端css学习ppt,总结详细

    随着技术的发展,CSS3带来了许多新的特性和功能,这些功能为前端开发者提供了更大的灵活性和创造力。以下便是对CSS3学习PPT中提到的知识点的详细解读。 1. CSS3选择器 - CSS3引入了更多类型的选择器,以便更精确地...

    前端体验设计——HTML5+CSS3终极修炼

    本书聚焦于HTML5与CSS3这两项核心前端技术,旨在帮助读者掌握最新的Web设计与开发方法,全面提升技术水平与设计视野。 #### 二、核心知识点解析 ##### 1. HTML5基础与进阶 - **语义化标签**:HTML5引入了许多新的...

    CSS3炫酷个人简历网站前端模板vW9.zip

    总结来说,"CSS3炫酷个人简历网站前端模板vW9"是一款结合了前沿技术与美观设计的优秀模板,它集响应式布局、丰富的视觉效果和可定制化于一身,为个人简历网站的创建提供了强大支持,同时也为开发者提供了一个高效、...

    html5+css3立体3D点击眼睛游戏功能

    总结来说,"html5+css3立体3D点击眼睛游戏功能"展示了HTML5、CSS3和JavaScript的协同工作,创造出一个互动性强、视觉效果出色的3D游戏。HTML5提供基础的页面结构和多媒体支持,CSS3负责丰富的视觉效果和动画,而...

    黑马前端css笔记.zip

    总结,"黑马前端css笔记.zip"包含了CSS3的重要知识点,如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术(Flexbox和Grid)以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要,能帮助他们...

    淘宝首页web前端课设(HTML+css+js)

    本web前端课设主要用到html,css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容,没有了解的同学可以先去看看做成功的页面效果...

    Arctext弧形文字效果插件(CSS3&jQuery)

    "Arctext弧形文字效果插件(CSS3&jQuery)"正是这样一款工具,它结合了现代Web开发中的两种关键技术——CSS3和jQuery,来实现文字沿弧线排列的动态效果,为网站增添独特的视觉吸引力。 首先,让我们深入了解一下CSS...

    前端项目-css3-animate-it.zip

    【前端项目-css3-animate-it.zip】是一个专注于前端开发的资源包,主要利用CSS3和jQuery技术来实现元素在进入浏览器视口时的动画效果。这个项目对于提升网站用户体验和视觉吸引力有着显著的作用,尤其适用于现代网页...

    Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-美化网页.pdf

    4. **任务小结**:总结本课内容,巩固所学知识。 【教学资源】 1. **装有SublimeText3的电脑**:提供编写和测试代码的环境。 2. **教学课件PPT**:辅助教学,展示实例和讲解内容。 3. **教材**:《Web前端技术项目...

    Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip

    这份名为"Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip"的压缩包文件包含了全面的Web前端学习资源,适合期末复习和备考。以下是基于该压缩包文件可能包含的知识点的详细说明: 1. HTML...

    前端项目-css-loader.zip

    总结来说,"前端项目-css-loader"是一个利用webpack的`css-loader`实现的纯CSS加载动画示例。它展示了如何通过模块化的CSS处理技术,仅用一个div元素就能创建出具有视觉吸引力的加载效果。这不仅简化了代码结构,也...

    纯CSS3制作3D旋转线条球体动画特效.zip

    【标题】"纯CSS3制作3D旋转线条球体动画特效.zip"的资源是一个利用纯CSS3技术实现的3D旋转线条球体动画效果。在现代网页设计中,CSS3的引入极大地丰富了网页的表现力,它允许开发者通过声明性的语法创建复杂的动画和...

    HTML5CSS3 3D环形图片墙 伴随旋转动画

    总结来说,“HTML5CSS3 3D环形图片墙 伴随旋转动画”是一个集HTML5新特性、CSS3 3D变换、动画、响应式设计于一体的复杂网页项目。它展示了现代Web开发的技术实力,也体现了设计师和开发者对于用户体验的追求。通过...

    6个Web前端纯CSS3实现的单多选选择框(六)

    在本文中,我们将深入探讨如何使用纯CSS3技术在Web前端实现美观且功能完善的单选和多选选择框。在标题“6个Web前端纯CSS3实现的单多选选择框(六)”中,我们可以推测这是一个系列教程的第六部分,专注于通过CSS3...

    前端web结课作业 小米商城 纯HTML+CSS

    【标题】:“前端Web结课作业 - 小米商城 纯HTML+CSS” 这个项目是基于前端Web技术实现的小米商城的模拟页面,主要采用了HTML和CSS两种基础语言进行开发。HTML(HyperText Markup Language)是网页内容的结构化标记...

    css做一个3D房子.rar

    总结来说,纯CSS3实现3D房子的关键在于熟练掌握3D变换和透视原理,以及灵活运用这些技术进行元素的定位和造型。通过不断实践和调试,我们可以创造出各种复杂的3D场景,丰富网页的视觉表现力。这个案例对于想要深入...

    web前端笔试面试总结+js+css

    - 对HTML5新特性、CSS3、ES6等现代前端技术有深入了解。 - 掌握响应式布局、跨设备兼容性处理。 - 熟悉前端框架,如React、Vue或Angular。 - 理解前端性能优化原理和实践,如首屏加载、异步加载等。 - 熟悉版本...

Global site tag (gtag.js) - Google Analytics