CSS完成手机微信扫码殊效

日期:2021-03-04 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

 手机微信扫码实际效果以下所示:

下面是具体实际效果:(能够自身挪动电脑鼠标,尝试实际效果)
(因为篇数长度,沒有加适配性前缀,演试自然环境为谷歌访问器。)

如今就1个1个实际效果独立演试:

演试demo的HTML內容为:


拷贝编码
编码以下:

<div class="moyu">魔芋</div>

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();
}
}