2020.3.16-----2020.3.22周报
程序员文章站
2024-03-20 11:24:28
...
这周主要学习了css3的动画,做了两个demo。大致也了解了过渡效果。
transform（转换）：改变元素形状、尺寸和位置
transition（过渡）：元素从一种样式逐渐改变为另一种的效果
animation（动画）：通过CSS3的@keyframes（关键帧）规则，可以创建动画
rotate（deg）：旋转给定的角度，正值为顺时针，负值为逆时针
下面是具体属性：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
.block{
width:100px;
height:100px;
background-color: rgb(240, 123, 13);
border-radius: 50%;
border-bottom: 5px rgb(245, 209, 143) solid;
border-top: 5px rgb(34, 207, 238) solid;
border-left: solid rgb(204, 34, 238) 5px;
border-right: solid rgb(238, 34, 119) 5px;
margin: 20% 50%;
color:black;
animation: myfirst 1s;
position: relative;
animation-direction:alternate;
animation-iteration-count: infinite;
transition-property: all;
transition-duration: 1s;
}
@-moz-keyframes myfirst{
0% {background:red;}
12.5%{background: blue;}
25% {background:yellow;}
37.5%{background: seashell;}
50% {background:purple;}
62.5%{background: teal;}
75%{background: violet;}
87.5%{background: whitesmoke;}
100% {background:rgb(75, 250, 5);}
}
.block:active{
transform: rotate(-135deg) scale(1.5) ;
transition:all 1s linear;
}
.demoimg{
width:100px;
height:100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>