CSS3模仿影碟光盘图片旋转动画效果

CSS3模仿影碟光盘图片旋转动画效果

知识点分析：

backface-visibility: hidden;

backface-visibility:hidden的作用是：用于定义当元素不面向屏幕时是不可见的。

通过该样式我们可以使一个元素在翻转之后消失，此时我们可以把另一个元素放在它的背面，从而实现翻转效果。

backface-visibility: visible|hidden;

visible 背面是可见的。

hidden 背面是不可见的。

mix-blend-mode: overlay;        // 叠加

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

可取的值有哪些：

{

  mix-blend-mode: normal;         // 正常

  mix-blend-mode: multiply;       // 正片叠底

  mix-blend-mode: screen;         // 滤色

  mix-blend-mode: overlay;        // 叠加

  mix-blend-mode: darken;         // 变暗

  mix-blend-mode: lighten;        // 变亮

  mix-blend-mode: color-dodge;    // 颜色减淡

  mix-blend-mode: color-burn;     // 颜色加深

  mix-blend-mode: hard-light;     // 强光

  mix-blend-mode: soft-light;     // 柔光

  mix-blend-mode: difference;     // 差值

  mix-blend-mode: exclusion;      // 排除

  mix-blend-mode: hue;            // 色相

  mix-blend-mode: saturation;     // 饱和度

  mix-blend-mode: color;          // 颜色

  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;

  mix-blend-mode: inherit;

  mix-blend-mode: unset;

}

除去 initial 默认、inherit 继承 和 unset 还原这 3 个所有 CSS 属性都可以取的值外，还有另外的 16 个具体的取值，对应不同的混合效果。

html:

		<div class="artwork">
			<img src="./img/art1.jpg" alt="">
		</div>

css:

		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
			}
			body{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.artwork{
				display: inline-block;
				width: 15em;
				overflow: hidden;
				border-radius: 50%;
				box-shadow: 0 0.3em 0.7em rgba(0,0,0,0.25);
				margin: 1em;
				transform: translate3d(0,0,0);
				backface-visibility: hidden;
				position: relative;
			}
			/* 绘制光盘上的高光效果 */
			.artwork::before{
				content: '';
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: url('./img/shine.png') center no-repeat;
				background-size: cover;
				mix-blend-mode: overlay;
				position: absolute;
				/* 层的叠放顺序这个设置很重要，不然，运动的时候，高光效果出不来 */
				z-index: 2;
			}
			/* 绘制光盘后面的投影效果 */
			.artwork::after{
				content: '';
				padding: 0.5em;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 10;
				transform: translate(-50%,-50%);
				/* 内阴影 */
				box-shadow: inset 0 0.2em 0.2em rgba(0,0,0,0.25);
			}
			.artwork img{
				display: block;
				width: 100%;
				height: auto;
				border-radius: 50%;
				animation: spin 3s linear infinite;
			}
			@-webkit-keyframes spin {
				to{
					transform: rotate(360deg);
				}
			}
			@keyframes spin {
				to{
					transform: rotate(360deg);
				}
			}
		</style>