<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<link?rel="stylesheet"?>
????<title>Document</title>
????<style>
????????.container{
????????????width:?400px;
????????????height:?400px;
????????????background-color:?#ccc;
????????????margin:?100px?auto;
????????????position:?relative;
????????}
????????.container?.part{
????????????box-sizing:?border-box;
????????????width:?360px;
????????????height:?120px;
????????????border-radius:?180px/60px;
????????????border:?18px?solid?#61dafb;
????????????position:?absolute;
????????????left:?20px;
????????????top:?140px;
????????????
????????}
????????.container?.one{
????????????animation:?rubberBand1?1s?linear?infinite;
????????}
????????@keyframes?rubberBand1?{
????????????????from?{
????????????????????transform:?scale3d(1,?1,?1)?rotate(57deg);
????????????????}
????????????????30%?{
????????????????????transform:?scale3d(1.25,?0.75,?1)?rotate(57deg);
????????????????}
????????????????40%?{
????????????????????transform:?scale3d(0.75,?1.25,?1)?rotate(57deg);
????????????????}
????????????????50%?{
????????????????????transform:?scale3d(1.15,?0.85,?1)?rotate(57deg);
????????????????}
????????????????65%?{
????????????????????transform:?scale3d(.95,?1.05,?1)?rotate(57deg);
????????????????}
????????????????75%?{
????????????????????transform:?scale3d(1.05,?.95,?1)?rotate(57deg);
????????????????}
????????????????to?{
????????????????????transform:?scale3d(1,?1,?1)?rotate(57deg);
????????????????}
}
????????.container?.two{
????????????animation:?rubberBand2?1s?linear?infinite;
????????}
????????@keyframes?rubberBand2?{
????????????from?{
????????????????transform:?scale3d(1,?1,?1)?rotate(123deg);
????????????}
????????????30%?{
????????????????transform:?scale3d(1.25,?0.75,?1)?rotate(123deg);
????????????}
????????????40%?{
????????????????transform:?scale3d(0.75,?1.25,?1)?rotate(123deg);
????????????}
????????????50%?{
????????????????transform:?scale3d(1.15,?0.85,?1)?rotate(123deg);
????????????}
????????????65%?{
????????????????transform:?scale3d(.95,?1.05,?1)?rotate(123deg);
????????????}
????????????75%?{
????????????????transform:?scale3d(1.05,?.95,?1)?rotate(123deg);
????????????}
????????????to?{
????????????????transform:?scale3d(1,?1,?1)?rotate(123deg);
????????????}
}
????????.ball{
????????????width:?60px;
????????????height:?60px;
????????????background-color:?#61dafb;
????????????border-radius:?50%;
????????????position:?absolute;
????????????left:?50%;
????????????top:?50%;
????????????margin-top:?-30px;
????????????margin-left:?-30px;
????????}
????</style>
????
</head>
<body>
????<div?class="container">
????????<div?class="part?one"></div>
????????<div?class="part?two"></div>
????????<div?class="part?animated?rubberBand?infinite"></div>
????????<div?class="ball?animated?rubberBand?infinite"></div>
????</div>
</body>
</html>我發現如果你定義了transform,animate.css會把你寫的效果覆蓋，但是加了!important又會沒動畫效果，因為上面的辦法就很笨，給寫了transform的元素自己加動畫，有不有什么好辦法可以解決？然后你們有不有什么更炫酷的做法
1 回答
- 1 回答
- 1 關注
- 1709 瀏覽
添加回答
舉報
0/150
提交
取消