CSS
文章平均质量分 85
对前端网页特效的学习
努力做一只合格的前端攻城狮
这个作者很懒,什么都没留下…
展开
-
弹性盒子布局
弹性盒子布局弹性盒子的优势基本概念容器属性项目属性flex-grow属性flex-shrink属性align-self属性圣杯布局练习弹性盒子的优势Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌原创 2021-10-17 11:12:08 · 604 阅读 · 0 评论 -
CSS中过渡效果(transition)
CSS中过渡效果(transition)过渡(无继承性)1、transition-property属性2、transition-duration属性3、transition-timing-function属性4、transition-delay属性5、transition属性兼容性练习总结过渡(无继承性)CSS3提供了强大的过渡属性,它可以在不使用Flash动画或者JavaScript脚本的情况下,为元素从一种样式转变为另一种样式时添加效果,例如渐显、渐弱、动画快慢等。1、transition-pro原创 2021-10-19 19:15:24 · 7617 阅读 · 1 评论 -
CSS中变形效果-transform(平移、旋转、缩放、倾斜)
CSS中变形效果-transform(平移、旋转、缩放、倾斜)CSS3实现变形的优势2-D变形平移translate()1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin3-D变形1、旋转rotate3d()2、视距perspective3、transform-style(用于保存元素的3D 空间4、backface-visibility(定义元素在不面对屏幕时是否可见5、3D转换方法(位移,缩放)兼容性CSS3实现变形的优势1、无需加载额外的文原创 2021-10-20 10:12:16 · 16417 阅读 · 4 评论 -
HTML5滚动效果设置
HTML5滚动效果设置滚动标签marquee的三级目录滚动标签marquee标签:创建一个滚动的文本字幕,应用于文本、图片。marquee的三级目录原创 2021-10-18 11:15:22 · 877 阅读 · 0 评论 -
CSS-DIV页面布局
CSS-DIV页面布局DIV的概念CSS中的块元素和行内元素页面布局方法CSS的定位机制浮动属性常见的浮动布局清除浮动定位属性在页面布局中常用的CSS属性Div+CSS常见错误总结DIV的概念DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS,那么它在网页中的效果和使用 是一样的。DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码注意:标签可以用来组合其它的HTML元素,但不原创 2021-10-12 10:44:05 · 3609 阅读 · 0 评论 -
CSS(层叠样式表cascading style sheet)
CSS(层叠样式表cascading style sheet主要作用使用方法三级目录主要作用(1)对页面的外观进行美化(2)统一网站页面的风格(3)实现内容和样式的分离,适合团队开发使用方法(1)行内嵌入式:给标签添加style属性,用来设置样式, 只对当前嵌入的标签有效。如:<p style="color: cyan; font-size: 45px;">中国</p>(2)页面嵌入式:在页面中使用定义不同的样式规则,如下:// An highlighted bloc原创 2021-10-04 22:25:13 · 1044 阅读 · 1 评论 -
多媒体嵌入
多媒体嵌入前言视频音频嵌入技术概述浏览器对HTML5中video和audio元素的支持在HTML5中,video标签的使用在HTML5中,audio标签的使用视频音频文件的兼容性问题调用网络音频视频文件练习前言 在网页设计中,多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天,音频和视频技术已经被越来越广泛的应用在网页设计中,比起静态的图片和文字,音频和视频可以为用户提供更直观、丰富的信息。&nb原创 2021-10-16 22:38:20 · 1139 阅读 · 0 评论 -
CSS动画效果(animation属性)解析
CSS动画效果(animation属性)解析动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性基础练习总结动画与变形和过渡的区别在CSS3中, 过渡 和 变形 只能设置元素的变换过程,并不能对过程中的某一环节进行精确控制,例如 过渡 和原创 2021-10-21 16:20:45 · 4697 阅读 · 1 评论 -
CSS3滤镜效果-filter属性
CSS3滤镜效果-filter属性滤镜的实现:filter属性常用的滤镜函数1、模糊效果:blur(number)2、设置图像的亮度:brightness(number)3、图像的对比度:contrast(number)4、阴影效果:drop-shadow(args1 args2 args3 args4)5、图像的灰度转换:grayscale(number)6、图像颜色反转:invert(number)7、图像的不透明度:opacity(number)8、图像转换为棕褐色:sepia(number)9、图像原创 2021-10-23 21:42:34 · 1566 阅读 · 2 评论 -
盒子模型解析
盒子模型盒子模型盒子的特性1、外边距属性2、内边距属性3、边框属性4、背景属性盒子模型进行网页布局的重要的属性,一个页面由多个盒子组成,每个盒子的内容都不相同盒子的特性(1)外边距(margin):盒子与其他元素之间的额距离(2)内边距(padding):也称为填充距离,内容和边框之间的距离(3)边框(border)1、外边距属性外边距属性作用margin-top上外边距margin-right右外边距margin-bottom下外边距margin原创 2021-10-11 10:01:57 · 1431 阅读 · 3 评论 -
HTML5画布的使用
HTML5画布的使用什么是画布画布的使用方法1、创建画布2、获取画布3、准备画笔4、确定初始位置5、连线端点6、描边线的样式1、宽度2、描边颜色3、端点形状线的路径1、重置路径2、闭合路径3、填充路径圆的绘制方法笑脸图形绘制小练习火柴人绘制小练习总结:什么是画布在网页中,我们把用于绘制图形的特殊区域也称为“画布”,网页设计师可以在该区域义绘制自定的图形样式。画布的使用方法1、创建画布使用HTML5中的canvas标签可以在网页中创建画布。基本语法格式:<canvas id="画布名称"原创 2021-10-24 20:37:32 · 3294 阅读 · 0 评论 -
CSS中的单位
CSS中的单位长度单位视口相对长度单位绝对长度单位角度单位时间单位频率单位特殊布局单位长度单位长度单位简介em相对于当前对象内文本的字体尺寸ex相对于字符“x”的高度。通常为字体高度的一半ch数字“0”的宽度rem相对于根元素(即html元素)font-size计算值的倍数视口相对长度单位视口相对长度单位简介vw相对于视口的宽度。视口被均分为100单位的vwvh相对于视口的高度。视口被均分为100单位的vhvm相原创 2021-10-17 17:33:21 · 559 阅读 · 0 评论 -
盒子模型-高度塌陷问题
盒子模型-高度塌陷问题使用margin-top时造成塌陷使用margin-top时造成塌陷解决方案1、给父元素添加边框属性,让父元素的边框颜色和浏览器的背景颜色一样。如下:2、给父元素添加浮动属性(float)3、溢出隐藏4、给父元素设置display:table;5、给父元素添加position:fixed;6、给父类添加伪元素使用margin-top时造成塌陷使用margin-top造成的塌陷是由于当标签出现父子关系,给子元素添加margin-top属性,让它距离父盒子顶部50px时,却出现父元素距原创 2021-10-22 20:36:51 · 1225 阅读 · 0 评论