一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
方法/步骤首先，先在<body></body>中加入门
然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]
div{
margin:0
padding:0
}
.door{
width:450px
height:450px
position:relative
background:#a1a1a1
}
.door .leftDoor,.door .rightDoor{
position:absolute
width:224px
height:400px
top:57px
top:50px
background:#d1d1d1
}
.door .leftDoor{
left:0
border-right:1px solid #999
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:leftDoor 5s 1
-moz-animation:leftDoor 5s 1
-o-animation:leftDoor 5s 1
animation:leftDoor 5s 1
-webkit-transform-origin: 0% 40%
-moz-transform-origin: 0% 40%
-o-transform-origin: 0% 40%
transform-origin: 0% 40%
}
.door .rightDoor{
right:0
border-left:1px solid #999
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1)
-webkit-animation:rightDoor 5s 1
-moz-animation:rightDoor 5s 1
-o-animation:rightDoor 5s 1
animation:rightDoor 5s 1
-webkit-transform-origin: 100% 40%
-moz-transform-origin: 100% 40%
-o-transform-origin: 100% 40%
transform-origin: 100% 40%
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg)
}
}
@-moz-keyframes leftDoor {
0%,100% {
-moz-transform-origin: 0% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(70deg)
}
}
@-o-keyframes leftDoor {
0%,100% {
-o-transform-origin: 0% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(70deg)
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(70deg)
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%
}
0{
-webkit-transform:perspective(0) rotateY(0)
}
100% {
-webkit-transform:perspective(600px) rotateY(-70deg)
}
}
@-moz-keyframes rightDoor {
0%,100% {
-moz-transform-origin: 100% 40%
}
0{
-moz-transform:perspective(0) rotateY(0)
}
100% {
-moz-transform:perspective(600px) rotateY(-70deg)
}
}
@-o-keyframes rightDoor {
0%,100% {
-o-transform-origin: 100% 40%
}
0{
-o-transform:perspective(0) rotateY(0)
}
100% {
-o-transform:perspective(600px) rotateY(-70deg)
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%
}
0{
transform:perspective(0) rotateY(0)
}
100% {
transform:perspective(600px) rotateY(-70deg)
}
}
5
这里的动画主要用到的是rotate和perspective
6
如果想要动画点击后才开门，可以加入一个按钮，然后js控制
transition使用为鼠标指针的滑过状态设置一些动画效果。图标在1秒内匀速旋转360度。
.close:hover::before{
-webkit-transform:rotate(360deg)
transform:rotate(360deg)
-webkit-transition:-webkit-transform 1s linear
transition:transform 1s linear
}
