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/gihpch.html