css波浪音阶，过渡动画案例

css3过渡动画

<style>.box{width: 225px;height: 200px;margin: 50px auto;/*元素在父元素里面水平居中*/}.item{float: left;/*让元素从左到右在一行排列*/width: 10px;height: 100px;background-color: #999;border-radius: 5px;margin:0 2.5px;transform: scale(1,0.2);/*外边距margin:5px 10px;   上下   左右margin-topmargin-bottommargin-leftmargin-right*/}.first{animation: scale 2s linear infinite alternate;}.second{animation: scale 2s 0.3s linear infinite alternate;}.third{animation: scale 2s 0.6s linear infinite alternate;}.fourth{animation: scale 2s 0.9s linear infinite alternate;}.fifth{animation: scale 2s 1.2s linear infinite alternate;}.sixth{animation: scale 2s 1.5s linear infinite alternate;}.seventh{animation: scale 2s 1.8s linear infinite alternate;}.eighth{animation: scale 2s 2.1s linear infinite alternate;}@keyframes scale {0%{transform: scale(1,0.2);background-color: #999;}100%{transform: scale(1,1);background-color: #333;}}</style>

<body><div class="box"><div class="item eighth"></div><div class="item seventh"></div><div class="item sixth"></div><div class="item fifth"></div><div class="item fourth"></div><div class="item third"></div><div class="item second"></div><div class="item first"></div><div class="item second"></div><div class="item third"></div><div class="item fourth"></div><div class="item fifth"></div><div class="item sixth"></div><div class="item seventh"></div><div class="item eighth"></div></div>
</body>

效果图

css波浪音阶，过渡动画案例相关推荐

CSS高级篇——过渡动画
CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画. 举一个最简单的例子: a:link {color: hsl(36,50%,50%); } a:hover ...
【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
用CSS来做一个动画案例
今天来做这么一个案例添加一个动画实现上下渐变滚动的效果首先还是我们HTML部分,一个大盒子装着五个子元素下面别在意,之前写的时候看到有个网站有这么个注解我就复制了下来哈哈哈 <div cl ...
css制作逐帧动画-案例
网页动画图像.Flash 动画和 JavaScript 实现的效果图片,我们用最基础的CSS也能实现.制作一个简单的gif动画图,上图就是效果图. 用CSS3制作动画图,你需要了解两个css属性. 一 ...
【动画消消乐】纯CSS加载/过渡动画学习笔记合集（1-50）
Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍一下 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入 ...
html怎么设置过渡字体,web前端入门到实战：css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

css波浪音阶，过渡动画案例

css3过渡动画

css波浪音阶，过渡动画案例相关推荐

最新文章

热门文章