html标题动态修改滚动效果
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Document Title Ticker</title> <style> * { margin: 0; padding: 0; } html, body { background: #eff5f5; width: 100%; height: 100%; } h1 { color: #80b3b3; position: absolute; font: 34px sans-serif; font-weight: bold; margin: -100px 0 0 -250px; text-align: center; width: 500px; top: 50%; left: 50%; } a { color: #80b3b3; text-decoration: underline; position: absolute; font: 13px sans-serif; margin: 55px 0 0 -150px; text-align: center; width: 300px; top: 50%; left: 50%; } input { background: #eff5f5; width: 500px; height: 60px; line-height: 60px; text-align: center; font: 18px sans-serif; position: absolute; border-radius: 100px; border: 1px solid #80b3b3; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.85); transform: translate(-50%, -50%) scale(0.85); color: #80b3b3; letter-spacing: 0.05em; transition: all 0.25s ease-in-out; } input:focus { outline: none; transition: all 0.15s ease-in-out; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scal.........完整代码请登录后点击上方下载按钮下载查看
网友评论0