css3 transition effect(其它效果)

最新推荐文章于 2025-04-11 09:21:40 发布

JerryVon

最新推荐文章于 2025-04-11 09:21:40 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/jerryvon/article/details/8755548

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一系列使用CSS3实现的动画效果，包括淡入淡出、卡片翻转等，并详细展示了每种效果的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理了一些其它动画，用的模板为flip模板，只不过CSS3不同

/***************** 淡入淡出 ********************/
.effect5 .back {
    -webkit-transform: rotate3d(1,0,0,0);
}
.effect5.show .front{
-webkit-animation: effect5Front 0.6s linear forwards;
}
@-webkit-keyframes effect5Front{
0% { opacity: 1; }
100% { opacity: 0; }
}
/***************** 向左边推入 ********************/
.transition.effect6 { overflow: hidden; }
.effect6.show .front,
.effect6.show .back{
-webkit-animation-duration: 0.4s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
.effect6.show .front{
-webkit-animation-name: effect6Front;
}
.effect6.show .back {
-webkit-animation-name: effect6Back;
}
@-webkit-keyframes effect6Front{
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes effect6Back{
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(0px); }
}
/***************** 从某个角落盖上原来的图片 ********************/
.effect7 .front{ z-index: 1; }
.effect7 .back{ z-index: 2; }
.effect7.show .back{
-webkit-animation: effect7Back 0.4s ease-out forwards;
}
@-webkit-keyframes effect7Back{
0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; }
100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
}
/***************** 插扑克牌效果1 ********************/
.effect8 .back {
    -webkit-transform: rotate3d(1,0,0,0);
}
.effect8 .front {
    z-index: 1;
}
.effect8 .back {
    z-index: 1;
}
.effect8.show .front{
-webkit-animation: effect8Front 0.8s ease-in-out forwards;
}
@-webkit-keyframes effect8Front{
0% { -webkit-transform: translateX(0); z-index: 3;}
50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
51% { z-index: 1;}
100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}
/***************** 插扑克牌效果2 ********************/
.effect9 .back {
    -webkit-transform: rotate3d(1,0,0,0);
}
.effect9.show .front,
.effect9.show .back{
-webkit-animation-duration: 0.8s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform-origin: 0% 100%;
}
.effect9.show .front{
-webkit-animation-name: effect9Front;
}
.effect9.show .back {
-webkit-animation-name: effect9Back;
}
@-webkit-keyframes effect9Front{
0% { z-index: 3;}
50% { -webkit-transform: rotateZ(-75deg); z-index: 3;}
51% { z-index: 1;}
100% { -webkit-transform: rotateZ(0deg); z-index: 1;}
}
@-webkit-keyframes effect9Back{
0% { z-index: 1;}
50% { -webkit-transform: rotateZ(20deg); z-index: 1;}
51% { z-index: 3;}
100% { -webkit-transform: rotateZ(0deg); z-index: 3;}
}
/***************** 淡出效果2 ********************/
.effect10 .back {
    -webkit-transform: rotate3d(1,0,0,0);
}
.effect10.show .front{
-webkit-animation: effect10Front 0.4s ease-in-out forwards;
}
@-webkit-keyframes effect10Front{
0% { opacity:1; }
100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; }
}
/***************** effect11 ********************/
.effect11 .back {
    -webkit-transform: rotate3d(1,0,0,0);
}
.effect11.show .front{
-webkit-transform-origin: 0% 100%;
}
.effect11.show .front{
-webkit-animation: effect11Front 1s ease-in-out forwards;
}
@-webkit-keyframes effect11Front{
0% { z-index: 3; -webkit-animation-timing-function : ease-in }
20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out }
21% { z-index: 1; }
40% { -webkit-transform: rotateZ(370deg); z-index: 1; }
60% { -webkit-transform: rotateZ(356deg); z-index: 1; }
80% { -webkit-transform: rotateZ(360deg); z-index: 1; }
95% { -webkit-transform: rotateZ(359deg); z-index: 1; }
100% { -webkit-transform: rotateZ(360deg); z-index: 1; }
}
/***************** 中心点扩散显示(mask) ********************/
.effect12 .back{
  -webkit-transform: rotate3d(1,0,0,0);
}
.effect12 .back {
-webkit-mask-image: url(../../assets/circle-mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
-webkit-mask-size: 1500px;
-webkit-animation-duration: 1s;
}
.effect12.show .back{
-webkit-animation-name: iris;
z-index:3;
}
@-webkit-keyframes iris {
0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-mask-size: 1500px; }
}