HTML虚拟货币OTC充值界面

Bitget下载

注册下载Bitget下载,邀请好友,即有机会赢取 3,000 USDT

APP下载   官网注册

相信很多小伙伴对黑胶唱片的动态效果的实现方法非常好奇,今天我们就从四个方面讲解如何用CSS3去实现这个效果。

纯干货!CSS3实现黑胶唱片效果

transform属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

纯干货!CSS3实现黑胶唱片效果

▶️ Translate函数

定义元素偏移方向以及偏移距离的大小。

● translateX(x)

定义X轴转换,即仅在水平方向移动,正值向右移动,负值向左移动,原理如下图:

纯干货!CSS3实现黑胶唱片效果

元素向右移动了30px

● translateY(y)

定义Y轴转换,即仅在垂直方向移动,也就是下面正方体的前后移动,正值垂直方向向下,负值垂直方向向上,原理如下图:

纯干货!CSS3实现黑胶唱片效果

元素向下移动了30px

● translate(x,y)

定义2D转换,即水平方向和垂直方向同时移动,原理如下图:

纯干货!CSS3实现黑胶唱片效果

元素分别向右、向下移动了30px

▶️ Scale函数

定义元素放大或缩小的大小。

● scaleX(x)

通过设置X轴值来定义缩放转换,效果如下图:

纯干货!CSS3实现黑胶唱片效果

沿着X轴缩小0.8倍

● scaleY(y)

通过设置y轴值来定义缩放转换,效果图如下图:

纯干货!CSS3实现黑胶唱片效果

沿着Y轴缩小0.8倍

● scale(x,y)

定义2D缩放转换,默认值为1,当大于1时,元素放大,当小于1大于0时,元素缩小。效果如下:

纯干货!CSS3实现黑胶唱片效果

沿着X和Y轴缩小0.8倍

▶️ Rotate函数

定义元素按规定角度进行旋转。将元素看做成一个正方体。

纯干货!CSS3实现黑胶唱片效果

● rotateX(angle)

定义沿着X轴的3D旋转:

纯干货!CSS3实现黑胶唱片效果

第一张为俯视图,第二张是3D视图

沿X轴顺时针旋转30度,它俯视图的宽度应该为(width*cos(pi/6))。

● rotateY(angle)

定义沿着y轴的3D旋转:

纯干货!CSS3实现黑胶唱片效果

第一张为俯视图,第二张是3D视图

沿Y轴顺时针旋转30度,它俯视图的长度度应该为(height*cos(pi/6)) 。

● rotateZ(angle)

定义沿着z轴的3D旋转:

纯干货!CSS3实现黑胶唱片效果

沿着z轴顺时针旋转30度,它的长度和宽度是不变的,就相当于你转动了一个方形的转盘,它的方向沿着顺时针方向转30度。

● rotate(angle)

定义2D旋转,正值顺时针,负值逆时针,使元素旋转,但是不变形:

纯干货!CSS3实现黑胶唱片效果

俯视图和3D视图相同,它是2D旋转,即在平面旋转,效果和rotateZ(angle)相似。

▶️ transform-origin属性

transform-origin 属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

语法:


transform-origin:x-axis y-axis z-axis;

默认值:


transform-origin 50% 50% 0

注释:该属性必须与 transform 属性一同使用。

transition属性

transition 属性是一个简写属性,用于设置四个过渡属性:

● transition-property

● transition-duration

● transition-timing-function

● transition-delay

注释:请始终设置 transition-duration 属性,否则时长为0,就不会产生过渡效果。

语法:


transition:property duration timing-function delay;

纯干货!CSS3实现黑胶唱片效果

▶️ transition-property 属性

语法:


transition-property: none | all | property;

纯干货!CSS3实现黑胶唱片效果

▶️ transition-timing-function 属性

属性规定过渡效果的速度曲线。

语法:


transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

纯干货!CSS3实现黑胶唱片效果

animation属性

animation 属性是一个简写属性,用于设置六个动画属性:

● animation-name

● animation-duration

● animation-timing-function

● animation-delay

● animation-iteration-count

● animation-direction

注释:请始终规定 animation-duration 属性,否则时长为0,就不会播放动画了。

语法:


animation:name duration timing-function delay iteration-count direction;

纯干货!CSS3实现黑胶唱片效果

▶️ animation-iteration-count 属性

语法:


animation-iteration-count: n | infinite;

纯干货!CSS3实现黑胶唱片效果

▶️ animation-direction 属性

定义是否应该轮流反向播放动画。

语法:


animation-direction: normal | alternate;

纯干货!CSS3实现黑胶唱片效果

▶️ animation-play-state属性

animation-play-state 属性规定动画正在运行还是暂停。

* 注意:若不设置animation-play-state页面加载后就执行,且没有定义animation-iteration-count动画的播放次数,播放一次就结束。

语法:


animation-play-state:paused | running;

默认值:


animation-play-state: running;

纯干货!CSS3实现黑胶唱片效果

@keyframes规则

通过 @keyframes规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

* 注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

语法:


@keyframes animationname {@keyframes-selector {css-styles;}}

纯干货!CSS3实现黑胶唱片效果

完整代码:


<html><head>

<meta charset="utf-8">

<script src="jquery.min.js" type="text/javascript"></script>

<title>H5黑胶唱片效果</title>

<style>

@-webkit-keyframes soundPaying { from {

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }

}

@keyframes soundPaying { from {

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }

}

.cover.SE_ {

cursor: pointer;

position: relative;

float: left;

width: 180px;

height: 180px;

background: url(jp.png) center no-repeat;

background-size: 100%

}

.cover.SE_::before {

content: '';

position: absolute;

right: 0;

top: 0;

width: 18px;

height: 18px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAA51BMVEUGBgYAAAAAAADh4eHT09PBwcEAAAC2trbl5eUAAAAAAAC6urrHx8fm5ubk5OT9/f339/f19fXv7+/h4eHs7Oza2trd3d3k5OTMzMy6urrk5OTc3Ny2trbk5OTg4OCtra1ISEjPz88NDQ3v7+/39/fv7+/l5eX19fXn5+fV1dXS0tLFxcXn5+fAwMDg4ODBwcHR0dHi4uLe3t7h4eHMzMzCwsLY2Ni1tbXJycne3t7S0tLKysrg4OCgoKDZ2dmNjY2AgIDe3t7Pz8/////19fX09PTs7Oz39/f6+vr5+fnx8fHw8PDv7+/BEK5NAAAAQ3RSTlMCAASBhYsGjoALCY2Jemrx5NG4srGDfHVwZ2JdU0YpHw4KB97azcvKyry2pJ6dm5iWjYqJgmloWVFOST45MygmGhcQS+x9PgAAANpJREFUGNM1z9dywjAQhWGhldzt0FsgBNJ77z1HNmnv/zzRLvCPNKP9Zm+kapx6HuZ5MZ4uBr4fRRQRUdTbkNGfz5yovddoXlHkzZNSQ7qow7d2TL2pYnqlzjYwd94uaSz0QKfAX1VVQLNTKG7dtIHfsvxxaJjuklqAc678xo7paqZHcw58OTcHWuZWaGKyfUh1a56E9H2W7rJsnWX9mRLa7Nvw5PDgKLTXE16qsY1sGoapvXkPVhQkb6PB4O4lnmkPTErrJInjOJEd+bZgEGgtwiQmiQitdPn+B3YeGfBlRw3fAAAAAElFTkSuQmCC) center no-repeat;

background-size: 100%

}

.cover.SE_::after {

content: '';

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

width: 24px;

height: 24px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMAgBwPy8SPdm5VRwPjfW3Ql2wAAACDSURBVBjTYwCDzdYMMMC0QlCwSwHCZp4oCASSBmCOuiAYFIEVXRRMffcuTFAWpNBcUOQdEDgKFgM5EwXPgThvBCWBqkASECkFBi7BPAjnmeACBg7BOAjnqWADw0bBd1AgKM1giOAIo3BQlKEYgGI0iqXIzkF3KMILaJ5DeBszQBBBBQBsk3H1FEaVjAAAAABJRU5ErkJggg==) center no-repeat;

background-size: 100%

}

.cover .needle.SE_ {

position: absolute;

right: 7px;

top: 10px;

display: block;

width: 27px;

height: 109px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABtCAMAAABnceq7AAABlVBMVEUAAAAAAADl5eUAAADm5uYAAAAAAAAAAADm5uYAAADl5eUAAAAAAAAAAAAAAADg4ODKysoAAAAAAAAUFBQAAAAAAADs7OwAAADh4eHe3t7n5+fl5eXz8/P39/f8/Pzw8PDj4+Pg4ODv7+/g4ODq6urh4eHs7Ozr6+vh4eHt7e3MzMzZ2dnm5ubf39/R0dHl5eXj4+OMjIzh4eHr6+vl5eW9vb3p6enk5OSKiorh4eHn5+ccHBzp6ekUFBT////w8PDw8PDh4eH5+fnu7u7t7e3z8/Pf39/Pz8/y8vLs7Ozm5ubf39/q6urt7e3f39/s7Oyfn5/i4uLt7e3r6+vMzMzFxcXs7OzW1tbFxcXt7e2hoaHs7OzIyMitra3j4+Pr6+vr6+tnZ2d3d3fm5uZ+fn7u7u6fn5/s7OwiIiJRUVETExNubm7k5OTs7Ow3Nzfs7OxZWVkjIyPq6urz8/Py8vL////t7e3////s7Ozv7+/19fXw8PDr6+vk5OTn5+fp6enm5ubX19fU1NT5+fng4ODPz8/MzMyqvMvXAAAAdnRSTlMAAocFvwkUDJEQtxYrGyHApCUYNC8oIB74w7+9Ggn+/vzy8ejl393Zz8O9tqqmnp2XkpGLfnlrYl5VRTYuLAP59/Xx6ufl2NPSy8vHube3rq2opqKhm5aWko2IhoODd3RycmlnW1hST0tCQjo5NyooKB0YFRMGlwdhPwAAAgRJREFUSMft01dT20AQB/BclJMi5BLZsZ1gQ0JCILQQSgg9vffee+/9TudTcWzgc7PDADMn3fqBNxj/X3+zq93Z0zYsY3cqGE34bBCz7R5rb2I7Wtaylm06a9+QMVbGbCfz2jAbZt4gZleFfxSzHhkdR+gHE0EFsTHhHUKo46wIsc89Ed6eop6KB0TtFlJ2TUZdf/X0TrDgOTJItwgPIx3vwyCzevp2ggXDSNklGR2c19MLwfZP6akCq2WRjjek3/VbTx/2sWBcT/96RHQe6fgIVvuqp9mTLBhCyvpgtQ49TcBqyCP5c0aEV5COt6V/Cjn2NKw2qqf5XhlhT+slHHsKsV7pY8cuejKcRuyNJ7qxf2PcY5fxf5GVm1jbljbfR4yQ0TC8bhCiIYM+WFgYoIAasu/V6/02YMKo/au/Xr/wEzBuhuW8r0KO5SyDJCw9uWIlO2l2ZlIKIZ+5Jo0ZoWbhdVirhY9TuZgRwyrlX/2HjOQz0FQ10/08sri0tHjzY8qhRC1LfzrHV3L6bUmZlMAkD/lqBlxTNbOwa82yKZhUmTK1bnt3O00styHLJnoW7vKG5LxahVni5h7h1YBzn/FsAUzdb93KrqmalX66ZkOxKxnU/N7X2eC80Xnxi2OBKYVOZi4/M5Ofy+QSdzAs00lDHNOiYArCO6MWhFJD89CAIYSosgxfKLJmNrwaGwAAAABJRU5ErkJggg==) center no-repeat;

background-size: 100%;

-webkit-transition: all .3s;

-o-transition: all .3s;

transition: all .3s;

-webkit-transform-origin: top;

-ms-transform-origin: top;

transform-origin: top;

-webkit-transform: rotateZ(-20deg);

-ms-transform: rotate(-20deg);

transform: rotateZ(-20deg);

}

.cover.playing .img.SE_ {

-webkit-animation-play-state: running;

animation-play-state: running;

}

.cover.playing .needle.SE_ {

-webkit-transform: rotateZ(0);

-ms-transform: rotate(0);

transform: rotateZ(0);

}

.cover .img.SE_ {

position: absolute;

left: 50%;

top: 50%;

margin-top: -59.2px;

margin-left: -59.2px;

width: 118.4px;

height: 118.4px;

border-radius: 50%;

-webkit-animation: soundPaying 7s linear infinite ;

animation: soundPaying 7s linear infinite ;

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

.play-btn.fR_ {

float: left;

cursor: pointer;

margin-top: 70px;

margin-left: 50px;

}

.play-btn .icon.fR_ {

border-radius: 50%;

-webkit-box-shadow:0 4px 8px 0 rgba(252,88,50,.5);

box-shadow:0 4px 8px 0 rgba(252,88,50,.5);

display: inline-block;

vertical-align: middle;

width: 45px;

height: 45px;

margin-right: 20px;

}

.play-btn .play-icon.fR_ {

background: url(play.png) no-repeat 0 0;

background-size: 100%

}

.play-btn .pause-icon.fR_ {

background: url(pause.png) no-repeat 0 0;

background-size: 100%

}

</style>

</head>

<body>

<div class="cover SE_">

<i class="needle SE_"></i>

<img class="img SE_" src="1.jpg" alt="">

</div>

<div class="play-btn fR_" onclick="play(this)" status="pause"><i class="icon play-icon fR_"></i></div>

<script>

function play(obj){

var status=$(obj).attr("status");

if(status=='pause'){

$(obj).find('i').addClass('pause-icon');

$('.cover').addClass('playing');

$(obj).attr("status",'playing')

}else{

$('.cover').removeClass('playing');

$(obj).find('i').removeClass('pause-icon').addClass('play-icon');

$(obj).attr("status",'pause')

}

}

</script>

</body></html>

快运用上面的知识点去实现黑胶唱片效果吧,相信你一定可以完成的很棒~

HTML虚拟货币OTC充值界面文档下载: PDF DOC TXT
文章来源: 肖肖
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至2384272385@qq.com举报,一经查实,本站将立刻删除。