CSS动画实现星星闪烁效果
一闪一闪亮晶晶,用来做背景很棒哦~
html部分
<div class="container"><div class="star star1"></div><div class="star star2"></div><div class="star star3"></div></div>
CSS部分
body { overflow: hidden; }
.container {position : relative;top : 0;left : 50%;transform: translateX(-50%);width : 1920px;height : 600px;background : url(images/bg1.jpg) repeat
}.star {position : absolute;top : 0;left : 50%;transform: translateX(-50%);width : 1920px;height : 500px;animation: star 2.5s ease-in infinite;
}.star1 {background: url(images/bg_star_1.png) no-repeat center center;}.star2 {background: url(images/bg_star_2.png) no-repeat center center; animation-delay: .8s;
}.star3 {background: url(images/bg_star_3.png) no-repeat center center; animation-delay: 1.7s;
}@keyframes star {10% {opacity: 0;}90% {opacity: 1;}
}
animation是个宝藏
CSS动画实现星星闪烁效果相关推荐
- css动画结束闪烁,CSS秘密花园: 闪烁动画
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
- html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
- 【译】CSS动画 vs JS动画
原文地址 目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
- Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
- 前端技术周刊 2019-01-07:CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画 我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
最新文章
- 面试官:如何做 API 接口防刷??
- STL——内存基本处理工具
- 拿到腾讯字节快手offer后,他的LeetCode刷题经验在GitHub上收获1.3k星
- 有关java的读书软件吗_我手机没JAVA,能用什么读书软件、
- wps文字退格会删掉文字_WPS第二行文字前面有大量空白,按退格不会动,只是把上一行末尾的字去掉。...
- 华为5720设置静态路由不通_如何设置静态路由与网关?一文了解清楚
- Show Attend and Tell的词表
- nodejs的事件循环1
- 高中计算机网络安全教案,浙教版高中信息技术教案信息安全
- html盒模型中border的写法,HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手...
- 【codevs1869】硬币购物,背包+神奇的容斥原理
- Under the Hoods of Cache Fusion, GES, GRD and GCS
- 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S,请你把其循环左移K位后的序列输出。
- android_98_自定义DragLayout
- linux脚本 取日期格式,PowerShell中使用Get-Date获取日期时间并格式化输出的例子
- display 常用属性
- 学之思开源考试系统搭建
- 图 邻接矩阵幂的含义 离散数学定理14.11
- 数学四大思想八大方法_中考数学专题五,四种数学思想方法,第3个比较难掌握...
- CRC码的编码、解码(循环冗余校验码)