css3动画之——动态的省略号
今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation-timing-function,
animation-delay,animation-iteration-count,animation-direction
上图:(为了对于块元素更明确,我们选用各种强烈对比的颜色)
先上html代码:(非常的简单,就是定义了一个无序列表,但要主要的是再简单的界面,都要作为块级元素,这里就定义了2个div)
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
<link href="css/dots.css" rel="stylesheet">
</head>
<body>
<div class="about"><ul><div id="fountainG"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div></ul>
</div>
</body>
</html>
下面上css3代码:
ul, li { list-style-type: none }
.about { width: 100%; background: #aaa; padding: 20px 0; overflow: hidden }
.about ul { width: 1000px; margin: auto; line-height: 24px ;background:#bbb;}
#fountainG { position: relative; width: 240px; height: 29px;background:#ccc; }/*这个是每个点的自己的块*/
#fountainG li { background:#ddd;position: absolute; top: 0; width: 29px; height: 29px;
-moz-animation: bounce_fountainG 3s linear infinite; -moz-transform: scale(.3);
-moz-border-radius: 19px;
-webkit-animation: bounce_fountainG 1.2s linear infinite;
-webkit-transform: scale(.3); -webkit-border-radius: 19px;
-ms-animation: bounce_fountainG 1.2s linear infinite;
-ms-transform: scale(.3); -ms-border-radius: 19px;
-o-animation: bounce_fountainG 1.2s linear infinite;
-o-transform: scale(.3); -o-border-radius: 19px;
animation: bounce_fountainG 1.2s linear infinite;
transform: scale(.3); border-radius: 19px; }
#fountainG li:first-child { left: 0; -moz-animation-delay: 0.48s; -webkit-animation-delay: 0.48s;
-ms-animation-delay: 0.48s; -o-animation-delay: 0.48s; animation-delay: .48s; }
#fountainG li:nth-child(2) { left: 30px; -moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; }
#fountainG li:nth-child(3) { left: 60px; -moz-animation-delay: 0.72s;
-webkit-animation-delay: 0.72s; -ms-animation-delay: 0.72s; -o-animation-delay: 0.72s; animation-delay: 0.72s; }
#fountainG li:nth-child(4) { left: 90px; -moz-animation-delay: 0.84s;
-webkit-animation-delay: 0.84s; -ms-animation-delay: 0.84s; -o-animation-delay: 0.84s; animation-delay: 0.84s; }
#fountainG li:nth-child(5) { left: 120px; -moz-animation-delay: 0.96s;
-webkit-animation-delay: 0.96s; -ms-animation-delay: 0.96s; -o-animation-delay: 0.96s; animation-delay: 0.96s; }
#fountainG li:nth-child(6) { left: 150px; -moz-animation-delay: 1.08s;
-webkit-animation-delay: 1.08s; -ms-animation-delay: 1.08s; -o-animation-delay: 1.08s; animation-delay: 1.08s; }
#fountainG li:nth-child(7) { left: 180px; -moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; }
#fountainG li:nth-child(8) { left: 210px; -moz-animation-delay: 1.32s;
-webkit-animation-delay: 1.32s; -ms-animation-delay: 1.32s; -o-animation-delay: 1.32s; animation-delay: 1.32s; }
/*这里是定义动画函数,很简单就是从1倍减小到0.3倍。*/@-moz-keyframes bounce_fountainG { 0% {
-moz-transform:scale(1);
background-color:#238d7b;
}100% {
-moz-transform:scale(.3);
background-color:#FFFFFF;
}
}@-webkit-keyframes bounce_fountainG { 0% {
-webkit-transform:scale(1);
background-color:#238d7b;
}100% {
-webkit-transform:scale(.3);
background-color:#FFFFFF;
}
}@-ms-keyframes bounce_fountainG { 0% {
-ms-transform:scale(1);
background-color:#238d7b;
}100% {
-ms-transform:scale(.3);
background-color:#FFFFFF;
}
}@-o-keyframes bounce_fountainG { 0% {
-o-transform:scale(1);
background-color:#238d7b;
}100% {
-o-transform:scale(.3);
background-color:#FFFFFF;
}
}@keyframes bounce_fountainG { 0% {
transform:scale(1);
background-color:#238d7b;
}100% {
transform:scale(.3);
background-color:#bbb;
}
}
为了更清楚的看清出块级之间的关系,截一张无动画效果的图片:(初始状态是.3)
转载于:https://www.cnblogs.com/shixiaomiao/p/4154316.html
css3动画之——动态的省略号相关推荐
- 开发工具与关键技术: 使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换
开发工具与关键技术: HTML CSS3 JQUERY JS 作者:冉启东 撰写时间:2019年1月18日 1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下: ...
- CSS3 实现可爱的动物动态的哈士奇动画
很久以前写的,纯CSS3实现可爱的动物动态的哈士奇动画 ,只有一个html文件,新学CSS3拿来练手,调的很可爱,放上代码分享一下 Dog.html <!DOCTYPE html> < ...
- CSS3 实现圆圈动态发光特效动画的制作
CSS3实现圆圈动态发光特效动画 1.首先建设div大盒子,然后在里面建设小盒子,建设三个小div盒子,代表三个圈圈的标签 2.在样式中建设style样式,并与html的div盒子标签层层对应 代码入 ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
- css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
- CSS3动画(典型模板)
CSS3动画原理: 就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 步骤: 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一,在默认样式 ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- html动画用css还是js,javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉 ...
最新文章
- 基于 Docker 的 MySQL 导入导出数据
- TYVJ P1053 字符串的展开 Label:字符 水
- 项目经理如何参与任务管理
- mysql驱动连接不了mariadb_无法从振动应用程序连接到MySQL / MariaDB数据库
- 图像分类_01图像分类简介:挑战+近邻分类器+CIFAR-10数据集概述
- bfs (宽度搜素)
- C#属性默认值设置(model实体类)
- Linux 克隆虚拟机以及克隆之后引起的“Device eth0 does not seem to be present, delaying initialization”问题解决...
- Android 仿QQ好友列表功能实现
- Cisco交换机密码破解
- K成本中心PO总账科目矛盾报错
- python实现一个web服务器
- ROS中usb摄像头的使用_(usb_cam)
- 浙江大学计算机学院钱沄涛实验室,浙江大学导师介绍--钱沄涛
- 接触C#的第一天和回锅Python的第一天
- Android下QQ空间查看大图特效
- Scrum板与Kanban如何抉择?敏捷工具:plcbpb板与按照kjuaoxnu
- 基于微信小程序的二手汽车拍卖系统
- 支持Linux系统的加密狗
- C++第4章第2题:移位密码-解密