相信很多小伙伴对黑胶唱片的动态效果的实现方法非常好奇，今天我们就从四个方面讲解如何用CSS3去实现这个效果。
transform属性
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
▶️ Translate函数
定义元素偏移方向以及偏移距离的大小。
● translateX(x)
定义X轴转换，即仅在水平方向移动，正值向右移动，负值向左移动，原理如下图：
元素向右移动了30px
● translateY(y)
定义Y轴转换，即仅在垂直方向移动，也就是下面正方体的前后移动，正值垂直方向向下，负值垂直方向向上，原理如下图：
元素向下移动了30px
● translate(x,y)
定义2D转换，即水平方向和垂直方向同时移动，原理如下图：
元素分别向右、向下移动了30px
▶️ Scale函数
定义元素放大或缩小的大小。
● scaleX(x)
通过设置X轴值来定义缩放转换，效果如下图：
沿着X轴缩小0.8倍
● scaleY(y)
通过设置y轴值来定义缩放转换，效果图如下图：
沿着Y轴缩小0.8倍
● scale(x,y)
定义2D缩放转换，默认值为1，当大于1时，元素放大，当小于1大于0时，元素缩小。效果如下：
沿着X和Y轴缩小0.8倍
▶️ Rotate函数
定义元素按规定角度进行旋转。将元素看做成一个正方体。
● rotateX(angle)
定义沿着X轴的3D旋转：
第一张为俯视图，第二张是3D视图
沿X轴顺时针旋转30度，它俯视图的宽度应该为（width*cos(pi/6)）。
● rotateY(angle)
定义沿着y轴的3D旋转：
第一张为俯视图，第二张是3D视图
沿Y轴顺时针旋转30度，它俯视图的长度度应该为（height*cos(pi/6)） 。
● rotateZ(angle)
定义沿着z轴的3D旋转：
沿着z轴顺时针旋转30度，它的长度和宽度是不变的，就相当于你转动了一个方形的转盘，它的方向沿着顺时针方向转30度。
● rotate(angle)
定义2D旋转，正值顺时针，负值逆时针，使元素旋转，但是不变形：
俯视图和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；
▶️ transition-property 属性
语法：
transition-property: none | all | property;
▶️ transition-timing-function 属性
属性规定过渡效果的速度曲线。
语法：
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
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；
▶️ animation-iteration-count 属性
语法：
animation-iteration-count: n | infinite;
▶️ animation-direction 属性
定义是否应该轮流反向播放动画。
语法：
animation-direction: normal | alternate;
▶️ animation-play-state属性
animation-play-state 属性规定动画正在运行还是暂停。
* 注意：若不设置animation-play-state页面加载后就执行，且没有定义animation-iteration-count动画的播放次数，播放一次就结束。
语法：
animation-play-state：paused | running；
默认值：
animation-play-state: running；
@keyframes规则
通过 @keyframes规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
* 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
语法：
@keyframes animationname {@keyframes-selector {css-styles;}}
完整代码：
<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>
快运用上面的知识点去实现黑胶唱片效果吧，相信你一定可以完成的很棒～
,
