首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
animated
订阅
carrot0822
更多收藏集
微信扫码分享
微信
新浪微博
QQ
18篇文章 · 0订阅
我写CSS的常用套路
本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动…
❤️❌ 如何用vue制作一个探探滑动组件
一. 功能分析 二. 具体实现 1. 堆叠效果 2. 图片滑动 3. 条件成功后的滑出,条件失败后的回弹 4. 滑出后下一张图片堆叠到顶部 重新堆叠是组件最后一个功能,同时也是最重要和复杂的功能。在我们的代码里,stack-item的排序依赖绑定:style的transform…
从青铜到王者10个css3伪类使用技巧和运用,了解一哈
伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相…
巧用 CSS 实现酷炫的充电动画
循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。 有内味了,如果要求不高,这个勉强也就能够交差了。通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画。但是总…
CSS—形状就该随心所欲
说到div的形状,基本上想到的都是圆形或者方形,这两种形状其实也已经符合了前端95%的应用场景(95%的数据从哪得来的 - - !),但是作为一个不愿随波逐流的程序员,就是要搞事情。 (图片来源于网络)果然限制我们创造的不是想象力,而是兼容性。支持浏览器的版本偏高,如果你是做正…
聊聊苹果营销页中几个有趣的交互动画
前两天在浏览 苹果 16寸 营销页面 的时候,发现了几个比较有意思的交互,心里想着自己虽然是一个穷逼,但是知识是无界限的呀,于是便研究了一波。 一个是屏幕慢慢打开的效果,在屏幕打开的过程中,电脑图片 是在屏幕中固定不动的,直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条…
用60行代码实现一个高性能的圣诞抽抽乐H5小游戏(含源码)
今天圣诞节,先预祝大家节日快乐.既然是圣诞节,那我们就来学点有意思的,用几十行代码来实现一个高性能的抽奖小游戏.也基于此,来巩固我们的javascript基础,以及前端一些基本算法的应用. 由于目前已有很多方案可以实现九宫格抽奖动画,比如使用动态active实现边框动画,用随机…
纯CSS实现简单骨骼动画
某天设计师来找我说,“这个心愿牌傻傻地挂在那不好看,加个动效呗,就左右摆动一下就行,很简单的!”,我一想,行呀,提升用户视觉体验,开搞。 十分钟后,🥶不对呀,这个左右摆动好假,不像现实中风吹的效果。 冷静思考🤔,为啥这个摆动会没有灵魂。于是拿起工卡开始摆动,看看现实中的摆动…
前端动画专题(三):撩人的按钮特效
因为 button 元素可以使用 before/after 伪元素,所以借助伪元素,可以实现动态图中的遮盖层。 为了避免回流重绘,滑箱的运动方向是垂直方向,所以使用scaleY属性。对于动画的方向,需要借助transform-origin改变动画原点。 果冻特效可以分割成 5 …