纯css布局实现甜点效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现甜点效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #81d4fa; width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; overflow: hidden; -webkit-perspective: 1000px; perspective: 1000px; } #donut { width: 50vmin; height: 50vmin; position: relative; border-radius: 50%; cursor: pointer; -webkit-backface-visibility: visible; backface-visibility: visible; } #donut:focus #topPart { -webkit-transform: rotate(720deg); -ms-transform: rotate(720deg); transform: rotate(720deg); } #donut:focus #topPart #donutTop { background-color: #7b3333; } #donut:focus #glow { -webkit-box-shadow: 0vmin 0vmin 10vmin 0vmin #bd7272, inset 0vmin 0vmin 10vmin -1vmin #bd7272; box-shadow: 0vmin 0vmin 10vmin 0vmin #bd7272, inset 0vmin 0vmin 10vmin -1vmin #bd7272; } #topPart { -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; width: 100%; height: 100%; position: absolute; z-index: 1; will-change: transform; } #glow { width: 70%; height: 70%; background-color: transparent; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; -webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -webkit-box-shadow: 0vmin 0vmin 10vmin 0vmin #e6a0b5, inset 0vmin 0vmin 10vmin -1vmin #e6a0b5; box-shadow: 0vmin 0vmin 10vmin 0vmin #e6a0b5, inset 0vmin 0vmin 10vmin -1vmin #e6a0b5; } #shadowTop { width: 100%; height: 100%; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0