13518219792
网站建设资讯

NEWS

网站建设资讯

CSS中怎么实现微信扫码特效

CSS中怎么实现微信扫码特效 ，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、成都网站制作、网站建设、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

代码如下:

魔芋

CSS： 

div { 
width:px; 
height:px; 
background: red; 
margin:px; 
color:#fff; 
line-height:px; 
font-size:px; 
text-align:center; 
}

代码如下:

moyu { 
-webkit-animation: change s ease; 
animation: change s ease; 
} 
@-webkit-keyframes change { 
%{ 
opacity:; 
} 
%{ 
opacity:; 
} 
} 
@keyframes change { 
%{ 
opacity:; 
} 
%{ 
opacity:; 
} 
}


效果：

CSS中怎么实现微信扫码特效


淡出就是调整opacity从1到0.
淡入-从下
说明：就是加是transform 的translate

代码如下:

moyu { 
-webkit-animation: change s ease infinite; 
animation: change s ease infinite; 
} 
@-webkit-keyframes change { 
%{ 
opacity:; 
-webkit-transform:translateY(-px); 
transform:translateY(-px); 
} 
%{ 
opacity:; 
-webkit-transform:translateY(px); 
transform:translateY(px); 
} 
} 
@keyframes change { 
%{ 
opacity:; 
-webkit-transform:translateY(-px); 
transform:translateY(-px); 
} 
%{ 
opacity:; 
-webkit-transform:translateY(px); 
transform:translateY(px); 
} 
}

CSS中怎么实现微信扫码特效


（魔芋解释：由于录制gif图片效果不是很好，请见谅。）

弹跳

改变transform:translateY的值

代码如下:

@-webkit-keyframes change { 
%, 
%, 
%, 
%, 
%{ 
-webkit-transform: translateY(); 
} 
%{ 
-webkit-transform: translateY(-px); 
} 
%{ 
-webkit-transform: translateY(-px); 
} 
}

CSS中怎么实现微信扫码特效

弹入透明度结合transform:scale

代码如下:


@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: scale(.);
}
%{
opacity:;
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale();
}
}


转入

代码如下:


@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: rotate(-deg);
}
%{
opacity:;
-webkit-transform: rotate();
}
}

CSS中怎么实现微信扫码特效

翻转

代码如下:


@keyframes change {
%{
transform: perspective(px) rotateY();
animation-timing-function: ease-out;
}
%{
transform: perspective(px) translateZ(px) rotateY(deg);
animation-timing-function: ease-out;
}
%{
transform: perspective(px) rotateY(deg) scale(.);
animation-timing-function: ease-in;
}
%{
transform: perspective(px) scale();
animation-timing-function: ease-in;
}
}

CSS中怎么实现微信扫码特效

闪烁

代码如下:


@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}

CSS中怎么实现微信扫码特效


震颤

代码如下:


@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}

CSS中怎么实现微信扫码特效


摇摆：

代码如下:


@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}

CSS中怎么实现微信扫码特效


摇晃：

代码如下:


@keyframes change{
%{
transform: translateX();
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX();
}
}

CSS中怎么实现微信扫码特效


响铃：

代码如下:


@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。


本文标题：CSS中怎么实现微信扫码特效
文章出自：http://njwzjz.com/article/gihpch.html

其他资讯