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:; } }
效果:
淡出就是调整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); } }
(魔芋解释:由于录制gif图片效果不是很好,请见谅。)
弹跳
改变transform:translateY的值
代码如下:
@-webkit-keyframes change { %, %, %, %, %{ -webkit-transform: translateY(); } %{ -webkit-transform: translateY(-px); } %{ -webkit-transform: translateY(-px); } }
弹入透明度结合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();
}
}
翻转
代码如下:
@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;
}
}
闪烁
代码如下:
@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}
震颤
代码如下:
@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}
摇摆:
代码如下:
@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}
摇晃:
代码如下:
@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();
}
}
响铃:
代码如下:
@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。
分享标题:CSS中怎么实现微信扫码特效-创新互联
文章来源:http://scyanting.com/article/goops.html