使用css排版推特上的星星爆炸效果。

hover效果实现。
我们先贴上雪碧图

此次效果利用到css的steps（）方法，
那steps（）是什么呢。
steps（）阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。
steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。
接下来我们贴上html代码：

<div class="star"></div>

只需要一个块元素即可

接下来贴上css代码：

.star {width: 70px;height: 50px;background: url(twitter_fave.png) no-repeat;background-position: 0 0;}.star:hover {background-position: -3519px 0;transition: background 1s steps(55);}

在hover事件里，使用steps方法逐步移动雪碧图。
在过渡动画里，我们过渡改变background背景，同时在1s钟完成55步的动画操作。
OK，一个动态的星星爆炸效果就完成啦。

使用css排版推特上的星星爆炸效果。相关推荐

完全CSS实现鼠标移上出现层的效果（超简单）
看过许多鼠标事件,都很复杂,太多的文件和繁杂的代码,而且好多都是用js实现,加载速度很慢. 这几天一直在找一种简单的实现效果,完全 CSS编写的效果,现在找到了,非常的少. 这就是完全 CSS实现的层 ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
前端训练营学习笔记——CSS排版、动画和渲染
1 CSS排版 1.1 盒标签.元素和盒的辨析标签Tag:源代码层面,HTML代码中可以书写开始.结束和自封闭标签元素Element:语义层面,一对起止标签表示一个元素,DOM中存储的是元素和其 ...
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画（公开完整源码）
目录:完整源码仅供学习一.效果演示二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载一.效 ...
官方资源帖！手把手教你在TensorFlow 2.0中实现CycleGAN，推特上百赞
铜灵发自凹非寺量子位出品| 公众号 QbitAI CycleGAN,一个可以将一张图像的特征迁移到另一张图像的酷算法,此前可以完成马变斑马.冬天变夏天.苹果变桔子等一颗赛艇的效果. 这行被顶会 ...
排除“使用主题 css 文件要求页上有标头控件。(例如 head runat=server /)”错误...
"使用主题 css 文件要求页上有标头控件.(例如 <head runat="server" />)" 原来,生产环境上部署了Theme. 用下面的 ...
推特上马斯克BTC赠送骗局已获利10枚BTC，价值超55万美元
上月底推特上出现最新的比特币赠品骗局已获利55万美元.该骗局冒充特斯拉创始人马斯克的名义,声称发送比特币可获的更多奖励.一名德国男子信以为真,向该骗局地址发送了10枚比特币,当时价值超过55万美元. ...
比特币在推特上的活跃度正接近2017年水平
Arcane Research数据显示,比特币在推特上的活跃度正在接近2017年的水平.提及比特币的7天平均推文量回到了2017年12月的高位.尽管比特币价格暂时下跌,但推特上活动的增加突显出散户的积 ...

使用css排版推特上的星星爆炸效果。

使用css排版推特上的星星爆炸效果。相关推荐

最新文章

热门文章