纯css布局实现留声机播放动画
代码语言:html
所属分类:动画
代码描述:纯css布局实现留声机播放动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background: #333642; } .turntable{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 310px; height:280px; background: #9CD8BD; border-radius: 5%; box-shadow: inset 0 0 10px rgba(255,255,255,0.7); } .record { position: absolute; left: 35px; top: 35px; width: 200px; height: 200px; background: black; border-radius: 50%; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .record::before { content: ''; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 180px; height: 180px; background: repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px); border-radius: 50%; } .overlay { content: ''; left: 35px; top: 35px; position: absolute; width: 200px; height: 200px; background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.35), 60%, transparent); border-radius: 50%; } .inner { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 55px; height: 55px; background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #F796A8), to(#F796A8)); background: linear-gradient(white, white 50%, #F796A8 50%, #F796A8); border-radius: 50%; } .inner::before { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; background: black; border-radius: 50%; } .inner::after { content: '100 Days'; width: 55px; text-align: center; font-family: sans-serif; font-size: 8px; position: absolute; left: 50%; top: 10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .arm-holder { position: absolute; width: 40px; height: 40px; background.........完整代码请登录后点击上方下载按钮下载查看
网友评论0