不规则边框及渐变效果
代码语言:html
所属分类:布局界面
代码描述:不规则边框及渐变效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'Spicy Rice'; font-style: normal; font-weight: 400; font-display: swap; src: local('Spicy Rice'), local('SpicyRice-Regular'), url(https://fonts.gstatic.com/s/spicyrice/v8/uK_24rSEd-Uqwk4jY1RyGv8.ttf) format('truetype'); } html, body { min-height: 100%; } body { background: -webkit-gradient(linear, left top, right top, from(#301916), color-stop(5%, #301916), color-stop(5%, #8A6552), color-stop(10%, #8A6552), color-stop(10%, #462521), color-stop(15%, #462521), color-stop(15%, #301916), color-stop(20%, #301916), color-stop(20%, #462521), color-stop(25%, #462521), color-stop(25%, #8A6552), color-stop(30%, #8A6552), color-stop(30%, #301916), color-stop(35%, #301916), color-stop(35%, #8A6552), color-stop(40%, #8A6552), color-stop(40%, #462521), color-stop(45%, #462521), color-stop(45%, #301916), color-stop(50%, #301916), color-stop(50%, #8A6552), color-stop(55%, #8A6552), color-stop(55%, #462521), color-stop(60%, #462521), color-stop(60%, #301916), color-stop(65%, #301916), color-stop(65%, #8A6552), color-stop(70%, #8A6552), color-stop(70%, #301916), color-stop(75%, #301916), color-stop(75%, #462521), color-stop(80%, #462521), color-stop(80%, #301916), color-stop(85%, #301916), color-stop(85%, #8A6552), color-stop(90%, #8A6552), color-stop(90%, #462521), color-stop(95%, #462521), color-stop(95%, #301916), to(#301916)); background: linear-gradient(to right, #301916 0%, #301916 5%, #8A6552 5%, #8A6552 10%, #462521 10%, #462521 15%, #301916 15%, #301916 20%, #462521 20%, #462521 25%, #8A6552 25%, #8A6552 30%, #301916 30%, #301916 35%, #8A6552 35%, #8A6552 40%, #462521 40%, #462521 45%, #301916 45%, #301916 50%, #8A6552 50%, #8A6552 55%, #462521 55%, #462521 60%, #301916 60%, #301916 65%, #8A6552 65%, #8A6552 70%, #301916 70%, #301916 75%, #462521 75%, #462521 80%, #301916 80%, #301916 85%, #8A6552 85%, #8A6552 90%, #462521 90%, #462521 95%, #301916 95%, #301916 100%); text-align: center; } @-webkit-keyframes sway { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 30% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 45% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { -webkit-transform: rotate(2deg); transform: rotate(2deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 70% { -webkit-transform: rotate(-0.1deg); transform: rotate(-0.1deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 75% { -webkit-transform: rotate(0.05deg); transform: rotate(0.05deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes sway { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 30% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 45% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { -webkit-transform: rotate(2deg); transform: rotate(2deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 70% { -webkit-transform: rotate(-0.1deg); transform: rotate(-0.1deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 75% { -webkit-transform: rotate(0.05deg); transform: rotate(0.05deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } .example { position: relative; display: inline-block; font-family: 'Spicy Rice', cursive; line-height: 1; font-size: 64px; padding: 32px 32px; margin: 64px 0; -webkit-animation: sway 5s linear infinite; animation: sway 5s linear infinite; -webkit-transform-origin: 50% -32px; transfor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0