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/动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【web开发学习笔记】Structs2
- 下一篇： 2017年html5行业报告,云适配发布