HTML/CSS/动画
这周学了下CSS3的动画,做了一个摆动的动画 代码如下:
<head>
<title></title>
<style type="text/css">
ul
{
margin-top: 100px;
margin-left: 300px;
}
li
{
float: left;
border: 1px solid transparent;
height: 600px;
width:80px;
list-style: none;
}
.c1
{
width: 5px;
height: 300px;
border: 1px solid;
margin: 300px auto;
background-color: saddlebrown;
}
.c2
{
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid;
margin: -300px auto;
background: black;
}
@keyframes left
{
0%
{
transform:rotate(80deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left
{
animation-name:left;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes left1
{
0%
{
transform:rotate(40deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left1
{
animation-name:left1;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes left2
{
0%
{
transform:rotate(20deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left2
{
animation-name:left2;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes right
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(-0deg);
}
100%
{
transform:rotate(-80deg);
}
}
#right
{
animation-name:right;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
@keyframes right1
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(-40deg);
}
}
#right1
{
animation-name:right1;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
@keyframes right2
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(-20deg);
}
}
#right2
{
animation-name:right2;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
</style>
</head>
<body>
<ul>
<li id="left">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="left1">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="left2">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li >
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right2">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right1">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right">
<div class="c1"></div>
<div class="c2"></div>
</li>
</ul>
</body>
</html>
转载于:https://www.cnblogs.com/bellow/p/4493011.html
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 ...
- html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
- html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...
最新文章
- 5.6 matlab曲线拟合案例(股票预测问题、算法的参数优化问题)
- WIF基本原理(2)基于声明的标识模型
- spring ref historydesign philosophy
- 助力 .NET MAUI Community Toolkit
- 如何有效地遍历Java Map中的每个条目?
- POJ 3020 Antenna Placement(无向二分图的最小路径覆盖)
- ×××计算机信息系统安全保护条例
- 使用ajaxfileupload.js上传文件成功之后,没有执行success方法
- 收到谷歌实习邀请 “比被清华录取还激动”
- TurboMail邮件系统图片签名档功能
- iOS-企业级开发者账号发布流程
- SpringMVC实现全局异常处理器
- 宽带认证计费系统的认证技术主要有哪些
- cubeIDE开发, UART的CubeMX及HAL库实现原理及底层分析
- ipad上html语言编辑,在 iPad 上键入和编辑文本的小技巧
- RabbitMQ消息队列工作原理及集成使用
- 蓝色:九针串口 ,大头在上从左往右引脚分布:
- 没有美术基础学游戏建模走的通吗?
- 用Python制作掷硬币工具
- 七年级期末复习寒假(语文第一学期)