![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5和CSS3提高
文章平均质量分 86
JJ_Smilewang
这个作者很懒,什么都没留下…
展开
-
元素水平垂直居中的方法
我们在制作页面的时候,经常需要把元素进行水平垂直居中,所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法,供大家选择运用。1.行内元素水平垂直居中的方法1.1 水平居中text-align:center; /* 实现行内元素水平居中 */1.2 垂直居中1.2.1单行文本的垂直居中只需要让元素高度和行高相等即可;<style> div { height: 50px; width: 300px;原创 2022-04-21 14:00:00 · 4731 阅读 · 1 评论 -
CSS3的3D转换
本文主要介绍了CSS3中3D位移和3D旋转的相关知识点,以及如何在二维平面上呈现出3D立体效果。原创 2022-04-15 14:00:00 · 1087 阅读 · 1 评论 -
css3动画
动画(animation)一样是CSS3中具有颠覆性的特征之一,可通过设置多个关键帧来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较我们昨天介绍的过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。1. 动画的制作步骤制作动画一共有两步:第一步:先定义动画,设置关键帧第二步:再使用(调用)动画1.1 用keyframes 定义动画(类似定义类选择器)@keyframes 动画名称 { 0%{ width:100px; }原创 2022-04-14 14:00:00 · 352 阅读 · 0 评论 -
CSS3过渡属性
过渡(transition)也是CSS3中具有颠覆性的特征之一,有了这个属性,我们可以在不使用 Flash 动画或 js(JavaScript)的情况下,当元素从一种样式变换为另一种样式时,为元素添加效果。过渡动画: 是从一个状态 渐渐的过渡到另外一个状态。可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。1.语法transition: transition-property transition-duration transition-t..原创 2022-04-13 14:00:00 · 3390 阅读 · 0 评论 -
CSS3的2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果转换(transform)你可以简单理解为变形。在学习2D转换之前,我们需要先了解vscode中的二维坐标系,它和我们数学中的坐标系稍微有点不一样,它是向右为x轴正方向,向下为y轴正方向,如下图所示:1.2D位移 translate所谓的2d位移就是可以通过在x轴、y轴上的位移值,改变物体的位置,有点类似于定位。1.语法transform: translate(x,y);原创 2022-04-12 14:37:46 · 885 阅读 · 2 评论