<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

body{

margin: 600px;

animation:xxx 1.5s infinite;

}

.zuoxin, .youxin{

width: 60px;

height: 100px;

background-color: blue;

display: inline-block;

border-top-left-radius: 60px;

border-top-right-radius: 60px;

}

.zuoxin{

transform:translateX(35px) rotateZ(-45deg);

}

.youxin{

transform:rotateZ(45deg);

}

@keyframes xxx {

50% { transform:scale(2);}

100% {transform:scale(1);}

}

</style>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
      <style>
            body{
                  margin: 600px;
                  animation:xxx 1.5s infinite;  
            }

           .zuoxin, .youxin{
                  width: 60px;
                  height: 100px;
                  background-color: blue;
                  display: inline-block;
                  border-top-left-radius: 60px;
                  border-top-right-radius: 60px;
            }
            .zuoxin{
                  transform:translateX(35px) rotateZ(-45deg);
                  
            }
            .youxin{
                  transform:rotateZ(45deg);
            }
            
            @keyframes xxx {
                  50% { transform:scale(2);}
                  100% {transform:scale(1);}
            }
            
      </style>
<body>
      
            <div class="zuoxin"></div>
            <div class="youxin"></div>
      
</body>
</html>

WIN10 家庭版升级专业版问题

林墨清染

8个回复