先看看效果图:
css code复制内容到剪贴板
- #loader1,
- #loader1:before,
- #loader1:after {
- background: #f2fa08;
- -webkit-animation: load1 1s infinite ease-in-out;
- animation: load1 1s infinite ease-in-out;
- width: 1em;
- height: 4em;
- }
- #loader1:before,
- #loader1:after {
- position: absolute;
- top: 0;
- content: '';
- }
- #loader1:before {
- left: -1.5em;
- }
- #loader1 {
- text-indent: -9999em;
- margin: 50px 50px;
- position: relative;
- float: left;
- font-size: 11px;
- -webkit-animation-delay: 0.16s;
- animation-delay: 0.16s;
- }
- #loader1:after {
- left: 1.5em;
- -webkit-animation-delay: 0.32s;
- animation-delay: 0.32s;
- }
- @-webkit-keyframes load1 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 0 #f2fa08;
- height: 4em;
- }
- 40% {
- box-shadow: 0 -2em #f2fa08;
- height: 5em;
- }
- }
- @keyframes load1 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 0 #f2ff08;
- height: 4em;
- }
- 40% {
- box-shadow: 0 -2em #f2ff08;
- height: 5em;
- }
- }
-
以上就是本文的全部内容,希望对大家的学习有所帮助。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
CSS知识点总结
css知识点总结一、什么是CSS?二、CSS的主要作用是什么2.1 CSS布局2.1.1 盒子模型欢迎使用Ma...
[阅读全文]
-
css的基础知识
初识css1、什么是css。css是英文Cascading Style Sheet的缩写,意思是层叠样式表。作用...
[阅读全文]
-
-
CSS总结
CSS总结css基础知识CSS:层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的...
[阅读全文]
-
6-css样式
背景颜色background-color背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb背景图片bac...
[阅读全文]
-
-
前端工程化的意义
工程化不是某个具体的工具,工程化的核心是对项目整体的规划和架构解决的问题&带来的价值1.每次开启新项目,...
[阅读全文]
-
-
-
-
css2zj
标签分类男标签(块标签):独占一行,eg:div hn p ul ol li dt…可以设置宽高,如果不设,则默...
[阅读全文]
网友评论