css3怎么制作打开的大门动画代码

html-css014

css3怎么制作打开的大门动画代码,第1张

方法/步骤

首先，先在<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

}

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。