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 · 287 阅读 · 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 · 929 阅读 · 0 评论 -
CSS特效——蛇形边框
CSS特效——蛇形边框一、设计思路先设置好基本的轮廓，之后通过背景图片设置成两半颜色，再设置，鼠标经过之后的变色，最后设置一下动画，注意时间的推迟。二、详细步骤初始化和基本框架<div class="outbox"> <div class="inbox"> HANDSOME <span class="borders"></span> <span class=原创 2021-04-28 14:32:48 · 798 阅读 · 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 · 380 阅读 · 0 评论 -
css特效——音波加载
音波加载文章目录音波加载一、搭建思路二、步骤代码style="--num:1" 对于这个不懂的话下面有讲解。定义一个先下后上的动画三、CSS函数var()四、效果展示接上一篇的内容一、搭建思路首先，造一个大的盒子outbox，接着往里面填充10个小盒子span。设置他们的布局，先让大盒子绕X轴旋转一定的角度，达到斜俯视的效果，更像3D.接着，将小盒子按顺序缩小，做成套环的样子，最后，设置动画效果，让每个小的盒子 都按向上后下的动画动起来，在按顺序延迟一定的秒数。这样就成了联动效果。二、步原创 2021-04-26 20:10:07 · 706 阅读 · 0 评论 -
CSS特效——图片分层悬停
CSS特效——图片分层悬停为了实现以后可以直接拿来使用，这里就把他做成模块了。文章目录CSS特效——图片分层悬停一、制作思路二、相关步骤三、完整代码四、效果展示一、制作思路首先是一个大盒子来包裹所有的内容.outbox，在设置一个包裹img的盒子.imgbox，里面放置所有的img，为了好看在加上一个span，来体现更好的过度。其次，将所有的img叠加到一起，将所有的样式设置好。最后就是动画了，当鼠标经过最外层大盒子时，先将imgbox绕X，Z轴旋转，达到平面到立体的过程，再将每个img沿各个轴移原创 2021-04-25 14:31:32 · 455 阅读 · 0 评论