web前段进阶
文章平均质量分 87
适合有一定前段基础的人使用
编程学渣ズ
学海无涯,努力不躺平
展开
-
web前端进阶<7>:3d图像翻转效果
这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端、霸气上档次的:前面我也给大家制作过一个很常见的3d旋转相册:(168条消息) web前端进阶:<2>转换的补充、动画和小案例_编程学渣ズ的博客-CSDN博客_前端动画小案例https://blog.csdn.net/aiwanchengxu/article/details/124586701这个小案例是网上非常常见的一个小原创 2022-12-05 20:26:30 · 1862 阅读 · 0 评论 -
web前端进阶:<6>一个自我简介的小程序
回顾一下上一期我们讲的内容,讲了3d的一个小案例和动画的基本操作,我们要实现3d效果必须要打开透视和3d空间,一般会配合定位一起使用,而且定位和3d空间的属性一般放在一起,而透视可以加载body上;还有一点就是这个过渡效果可能有些基础不是很好的小伙伴有点问题哈,这里我也简单分析一下,就是通过鼠标悬停,我们先让图片铺满这个大盒子,然后当鼠标放上去的时候我们再将它改小就可以了,最好设置一下overflow为hidden,这样溢出取得文字就看不到了。后面还会有很多好玩的小程序或只是哦,大家觉得不错就关注一波吧~原创 2022-09-08 19:02:00 · 653 阅读 · 0 评论 -
web前段进阶:<5>关于移动适配
上一期我们讲到了弹性布局,我们再来巩固一下,什么是弹性布局?display:flex? 其实我们不仅要掌握用法,还要知道特性,这种布局呢,是会动态改变盒子的宽度的,而且默认不换行,也就是说如果我们给的盒子太多,也不会换行,那么就会产生一个压缩盒子的效果,如何解决呢?也简单,只需要使用flex-wrap:wrap;就可以解决了,这就是弹性盒子的特性,弹性改变盒子和宽度和有规律的布局:好了,那么这一期我们来讲讲移动适配,既然是移动,那就是移动设备,想常见的手机,iPad一些小屏设备,之前我们都是原创 2022-05-14 21:44:40 · 201 阅读 · 0 评论 -
web前段进阶:<4>弹性布局小案例
在这之前,我们先回顾一下上一期的知识点,之前我们讲了帧动画,就是利用动画里面一个均分动画时长的属性: animation-timing-function: steps(N);我们可以根据精灵图的人物的个数来分N;然后了解了一下什么是弹性布局,这是浏览器推荐用的一种布局方式,有四个部分,水平方向的主轴,垂直方向的侧轴,父级叫弹性容器,子级叫弹性盒子;还有几种布局方式,均分、靠边、居中等,那么这一期接着讲;我们可以发现就只可以按照水平方向排列太单一了,如果我们想要垂直方向排列怎么办,这里还有几个属性:原创 2022-05-08 19:23:49 · 886 阅读 · 0 评论 -
web前段进阶:<3>逐帧动画和弹性布局
回顾一下上一期我们讲的内容,讲了3d的一个小案例和动画的基本操作,我们要实现3d效果必须要打开透视和3d空间,一般会配合定位一起使用,而且定位和3d空间的属性一般放在一起,而透视可以加载body上;动画实现的步骤分为定义和使用,我们使用#keyframe 名称{}来定义动画,有两种方式一种是from to,一种是百分比;使用动画的属性为animation:动画名称、动画时长、速度曲线、延迟时间、循环次数、动画方向、停止状态;学完动画的基本操作之后,我们来了解一个好玩的:也就是逐帧动画,其实就是将原创 2022-05-07 08:03:49 · 526 阅读 · 0 评论 -
web前端进阶:<2>转换的补充、动画和小案例
想要做好一个精美的网页还是要多练习一下转换,这一期我呢就带大家做一个3d立体魔方,对于大家学习3d和动画还是不错的;1、那么我们回顾一下上一期的知识点,关于遮罩,我们就要想到定位,一般我们使用子绝父相,然后将遮罩的盒子放在top:0;left:0;的位置,更换背景色为渐变:background-image: linear-gradient( transparent, rgba(0,0,0,.4) );就可以了;还记得3d转换的两个重要属性原创 2022-05-05 19:42:49 · 332 阅读 · 0 评论 -
web前段进阶:<1>平面变换和3d变换
这一个专栏同样也是给有一定基础的人看的,我们主要实现css的美化效果,包含各种变换、动画,当然我们后面还会介绍如何制作一张精美的网页,还有流行的布局方式,总而言之,就是属于前段进阶的学习,大家如果想要自己的网页像现在的电商网页那样精美,那就好好的将本专栏的知识点学好,一步一个脚印的将我们的小项目做好就可以,好,废话不多说,我们开始;1、首先,我介绍一个使用字体图标的方法给大家,我们经常在电商网站看到各种各样的图标,如果要我们去用ps抠,天哪,不可想像的麻烦;现在,我告诉大家,不需要,我们可以到阿原创 2022-05-04 22:33:35 · 561 阅读 · 0 评论