<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; float: left; margin-left: 20px; } .box1 { position: relative; background: url(https://www.zhangxinxu.com/study/image/selection.gif); } .box1>p { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: calc(100% - 2px); width: calc(100% - 2px); background-color: #fff; } .box2 { background: repeating-linear-gradient( 135deg, transparent, transparent 4px, #000 4px, #000 8px ); overflow: hidden; animation: move 1s infinite linear; } .box2>p { height: calc(100% - 2px); margin: 1px; background-color: #fff; } @keyframes move { from { background-position: -1px; } to { background-position: -12px; } } .box3 { background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y, linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y, linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x, linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x; background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px; background-position: 0 0, 100% 0, 0 0, 0 100%; animation: move2 1s infinite linear; } .box3>p { margin: 1px; } @keyframes move2 { from { } to { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%; } } .box4 { background: linear-gradient(0deg, #f0e, #fe0); -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y, linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y, linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x, linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x, linear-gradient(0deg, #fff, #fff) no-repeat; -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px; -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px; overflow: hidden; animation: move3 1s infinite linear; } .box4>p { height: calc(100% - 2px); margin: 1px; background-color: #fff; } @keyframes move3 { from { } to { -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px; } } </style> </head> <body> <div class="box box1"> <p>测试测试</p> </div> <div class="box box2"> <p>测试测试</p> </div> <div class="box box3"> <p>测试测试</p> </div> <div class="box box4"> <p>测试测试</p> </div> </body> </html>
示例如下：
.box { 100px; height: 100px; float: left; margin-left: 20px }
.box1 { position: relative; background: url(“https://www.zhangxinxu.com/study/image/selection.gif”) }
.box1>p { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: calc(100% – 2px); calc(100% – 2px); background-color: rgba(255, 255, 255, 1) }
.box2 { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 1) 4px, rgba(0, 0, 0, 1) 8px); overflow: hidden; animation: 1s linear infinite move }
.box2>p { height: calc(100% – 2px); margin: 1px; background-color: rgba(255, 255, 255, 1) }
@keyframes move { 0% { background-position: -1px } 100% { background-position: -12px } }
.box3 { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 6px, rgba(230, 10, 10, 1) 6px) left top / 1px 12px repeat-y, linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgba(15, 10, 232, 1) 0) right top / 1px 12px repeat-y, linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(9, 243, 47, 1) 0) left top / 12px 1px repeat-x, linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(250, 214, 72, 1) 0) left bottom / 12px 1px repeat-x; animation: 1s linear infinite move2 }
.box3>p { margin: 1px }
@keyframes move2 { 0% { } 100% { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100% } }
.box4 { background: linear-gradient(0deg, rgba(255, 0, 238, 1), rgba(255, 238, 0, 1)); -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
linear-gradient(0deg, #fff, #fff) no-repeat; -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px; -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px; overflow: hidden; animation: 1s linear infinite move3 }
.box4>p { height: calc(100% – 2px); margin: 1px; background-color: rgba(255, 255, 255, 1) }
@keyframes move3 { 0% { } 100% { -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px } }
测试测试
测试测试
测试测试
测试测试
