![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css动效
文章平均质量分 64
庇耳拉海莱
这个作者很懒,什么都没留下…
展开
-
使用 transform 实现的 hover 动效 3
在写效果的过程中, 一定要注意使用。调整元素初始的位置, 然后通过。实现动画. 另外复习。原创 2023-01-29 09:15:11 · 321 阅读 · 5 评论 -
使用 transform-origin 实现的 hover 动效 2
思路还是挺简单的, 一般要实现关于边框的效果都是在底层元素设置颜色, 在上层元素遮挡中间部分并且露出边框部分即可, 这个例子也不例外.另外就是标题上写的使用 transform-origin, 因为两个边框分别是从「左下角」和「右上角」出现的.两个边框都是使用伪元素实现的。原创 2023-01-16 09:14:53 · 105 阅读 · 0 评论 -
使用 transform-origin 实现的 hover 动效
时蓝色线条消失并从左向右消失, 所以变换的原点就是元素的。时, 我们希望蓝色线条出现并且从左侧出现, 也就是。然后思考如果让其从左边出现, 右边消失?, 也就是从中间出现然后向两边扩散, 如下图.首先就是思考蓝色线是如何出来的?伪元素, 我们希望没有。然后, 蓝色线其实是。原创 2023-01-07 10:16:22 · 166 阅读 · 0 评论 -
纯 CSS 实现搜索框的展示与隐藏
设置搜索图标.这里多说一嘴,其实这个搜索图标用按钮实现也行,因为按钮会水平垂直居中咱们的🔍图标.但是不好的地方是要通过。选中时展示输入框.结构如下,注意标签的顺序因为会使用到。处于选中状态时,要将输入框显示出来,但是要注意加上。好久没有更新这个动效了,因为自己没有灵感😶…首先是全局样式.元素水平居中,背景色为水平渐变。主要思路就是默认隐藏输入框,然后通过。接下来,设置容器为相对布局,并隐藏。浏览器),因此要上下边距为。📕默认实现隐藏的方法就是设置。的大小相同,但因为。...原创 2022-07-25 19:05:03 · 1832 阅读 · 0 评论 -
Webpack 官网文字滚动特效
先来看看 的效果来看看我自己实现的首先下面的代码确实没有格式化, 而且是被我故意写成这样的. 因为 中的换行符是会被显示出来的. 如下图第一个 是固定宽高, 因为这样才能通过 使超出的子元素隐藏.第二个 和父元素宽度一样(), 才导致了两个 没有在同一行显示, 而是在不同行.首先, 取消 和 的 和 . 并设置 布局使子元素垂直水平居中.设置第一个 才不会换行. 具体 为多少, 这个需要自己手动在浏览器工具里调试.最后一个类 , 帮助第二个 上移 高度从而第二个原创 2022-06-20 16:12:17 · 198 阅读 · 0 评论 -
HTML + CSS 环形文字人物介绍
环形文字人物介绍先看效果(👉完整代码在这里👈)HTML<body> <div class="info"> <img class="info-avatar" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-2f08406908e855f14ca14b0149505bef_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.c原创 2022-05-30 22:46:33 · 966 阅读 · 0 评论 -
简单的 HTML + CSS Loading 效果
简单的 HTML + CSS Loading 效果先看结果HTML<body> <div class="loading"> <span style="--i: 0;"></span> <span style="--i: 1;"></span> <span style="--i: 2;"></span> <span style="--i: 3;"></s原创 2022-05-23 22:04:01 · 981 阅读 · 0 评论 -
仿 OriginOS 无清理项动画
仿 Vivo OriginOS 无清理项动画因为我自己的手机是 vivo 品牌, 其中的一些动画挺有意思的, 就像模仿看看. 先看效果HTML<body> <div class="container flex"> <div class="flex wrapper"> <div class="icons"> <div class="bar upper"></div> <原创 2022-05-02 09:20:54 · 559 阅读 · 0 评论 -
纯 CSS 实现打字机效果
纯 CSS 实现打字机效果先看效果预备知识在学习这个需要了解两个新的 CSS 知识ch 单位ch 是一个相对长度单位, 表示数字 0 的宽度.steps 函数这时 CSS 动画中 animation-timing-function 表示动画进行的一个函数. 它接收两个参数,第一个参数是数字 n, 表示将整个动画分 n 步执行完, 每步耗时相同.第二个参数可选. 待研究????HTML<div class="container flex"> <div原创 2022-02-19 08:59:04 · 3148 阅读 · 0 评论 -
仿 Tailwind CSS 官网首页 一个 button 的变化动画
仿 Tailwind CSS 官网首页 一个 button 的变化动画原创 2022-02-15 21:17:05 · 1099 阅读 · 0 评论 -
Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab
Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab先看效果????第一次做效果,咱就是没写过,所以写来看看,顺便把基础知识练习一下HTML <nav> <div class="container"> <input type="radio" name="nav" id="nav-song" checked> <label for="nav-song">简介</label&原创 2022-02-14 21:43:21 · 1074 阅读 · 1 评论