css特效
文章平均质量分 72
痞子三分冷ゾジ
这个作者很懒,什么都没留下…
展开
-
CSS特效——HOVER的相关应用(上)
CSS特效——HOVER的相关应用(上) 一、邮件发送 这是靠动画完成,当经过时触发动画,动画将左边的发送图标在一个流程中先向右移动到最右。再回到最初。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2021-05-14 12:06:20 · 184 阅读 · 0 评论 -
CSS特效——旋转相册
CSS特效——旋转相册 一、制作思路 想通过定位的方式将所有的相片叠加到一起,再通过3D旋转将所有的相册拼成一个正方体,最后使用动画是其动起来。附加特效:::可以鼠标经过是,相片的映像层有小变大,由虚变实。 二、步骤详解 1、初始化和基础框架 <div class="outer"> <div class="min"> <img src="image/1.jpeg" alt="javascript:;" class="imgs">原创 2021-05-06 10:10:04 · 786 阅读 · 0 评论 -
CSS特效——蛇形边框
CSS特效——蛇形边框 一、设计思路 先设置好基本的轮廓,之后通过背景图片设置成两半颜色,再设置,鼠标经过之后的变色,最后设置一下动画,注意时间的推迟。 二、详细步骤 初始化和基本框架 <div class="outbox"> <div class="inbox"> HANDSOME <span class="borders"></span> <span class=原创 2021-04-28 14:32:48 · 609 阅读 · 0 评论 -
CSS特效——倒影加载
CSS特效——倒影加载 文章目录CSS特效——倒影加载一、具体思路二、步骤代码1、初始化和HTML2、设置大盒子3、设置大div和伪元素4、设置小div和伪元素5、设置动画6、设置文字三、全部代码1、HTML2、CSS四、知识点1、-webkit-box-reflect2、 linear-gradient()3、box-shadow五、展示图 一、具体思路 和往常一样,我们先做一个大盒子来包裹项目。之后初始化,接下来定义一个span,一个包含div的div, 用div和他的伪元素制作出圆环的效果,加上定位,原创 2021-04-27 12:02:56 · 240 阅读 · 0 评论 -
css特效——音波加载
音波加载 文章目录音波加载一、搭建思路二、步骤代码style="--num:1" 对于这个不懂的话下面有讲解。定义一个先下后上的动画三、CSS函数var()四、效果展示 接上一篇的内容 一、搭建思路 首先,造一个大的盒子outbox,接着往里面填充10个小盒子span。设置他们的布局,先让大盒子绕X轴旋转一定的角度,达到斜俯视的效果,更像3D.接着,将小盒子按顺序缩小,做成套环的样子,最后,设置动画效果,让每个小的盒子 都按向上后下的动画动起来,在按顺序延迟一定的秒数。这样就成了联动效果。 二、步原创 2021-04-26 20:10:07 · 587 阅读 · 0 评论 -
CSS特效——图片分层悬停
CSS特效——图片分层悬停 为了实现以后可以直接拿来使用,这里就把他做成模块了。 文章目录CSS特效——图片分层悬停一、制作思路二、相关步骤三、完整代码四、效果展示 一、制作思路 首先是一个大盒子来包裹所有的内容.outbox,在设置一个包裹img的盒子.imgbox,里面放置所有的img,为了好看在加上一个span,来体现更好的过度。其次,将所有的img叠加到一起,将所有的样式设置好。最后就是动画了,当鼠标经过最外层大盒子时,先将imgbox绕X,Z轴旋转,达到平面到立体的过程,再将每个img沿各个轴移原创 2021-04-25 14:31:32 · 350 阅读 · 0 评论