css3
周朝兵
这个作者很懒,什么都没留下…
展开
-
响应式布局
网页布局 网页布局有很多种方式,一般分为以下几个部分、头部区域、菜单导航区域、内容区域、底部区域。如下图: 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的logo。菜单导航区域包含了一些超链接,可以引导用户点击浏览其它页面。 内容区域分为三种形式: 1、1列:一般用于移动端; 2、2列:一般用于平板设备; 3、3列:一般用于pc端。 底部区域在网页的最下方,一般是包含版权信息和联系...原创 2020-01-14 19:20:17 · 178 阅读 · 0 评论 -
css之3D效果(二)
1、平移 平移有三个方法,分别为: translateX(); translateY(); translateZ(); 它平移的距离是相对于自身平移的,还可以将这三个方法写在一起reanslate3D(x,y,z,px);用一个方法来代替,效果是一样的,好了,我们先来看代码: <!DOCTYPE html> <html lang="en"> <head> &l...原创 2020-01-13 21:01:10 · 150 阅读 · 0 评论 -
css3之3D效果
1、旋转 3D旋转和2D不同的是2D只是平面上的旋转,3D看起来会更加立体些,这里介绍几个方法: 1、rotateX(deg) 2、rotateY(deg) 3、rotateZ(deg) 这三个方法的意思分别为围绕x轴旋转、围绕y轴旋转、围绕z轴旋转,在3D旋转中,会连通坐标轴一起旋转,旋转的顺序不一样时,角度相同也会有很大的差别。这三个方法还可以写成一个,totate3D(x,y,z,deg),...原创 2020-01-13 19:57:05 · 301 阅读 · 0 评论 -
css3弹性盒子
弹性盒子 弹性盒子是css3中的一种新的布局模式,用来适应不同屏幕大小以及设备类型是确保元素拥有恰当的行为的布局方式。引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器和弹性子元素组成,弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。包含了一个或者多个子元素。 以下为弹性盒子中的属性...原创 2020-01-12 20:58:39 · 153 阅读 · 0 评论 -
css3过渡及动画
过渡 在css3中,我们为了添加某种效果可以从一种样式转变到另一种的时候,不需要再和以前一样,为该属性写js,只需要在css中添加属性就可以实现。过渡的意识就是让一个元素从一种样式转逐渐变到另一种样式,可以看见元素转变的过程,让人不会感觉到那么突兀。想要实现这一点,必须规定两项类容: 1、指定要添加效果的css属性 2、指定效果的持续时间 请看如下例子: <!DOCTYPE html>...原创 2020-01-11 18:57:32 · 131 阅读 · 0 评论