文章搬遷搬遷~~
因為自己弄了HEXO將來文章會放到那,這裡將停止更新,而文章也會慢慢更新到那裏去,歡迎大家來看與指教。 網址:https://donggualemon.github.io/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="app.css"> <title>Document</title> </head> <body> <div class="container"> <span class="text1"> Welcome</span> <span class="text2">my web</span> </div> </body> </html>
*{ padding: 0; margin: 0; font-family: sans-serif; } body{ background: #000; } .container{ text-align: center; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .container span{ text-transform: uppercase; display: block; } .text1{ color: rgba(255, 255, 255, 0.856); font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: black; position: relative; animation: text 3s 1; } .text2{ font-size: 30px; color:#6ab04c; } @keyframes text{ 0%{ color: black; margin-bottom:-40px; } 30%{ letter-spacing: 25px; margin-bottom: -40px; } 85%{ letter-spacing: 8px; margin-bottom: -40px; } }以上就是這個畫面所用的程式碼,主要學的地方是排版和animation配合@keyframes的流程,其實還有很多API要多去看看。
<template> <div class="load"> <transition appear appear-active-class="fade-enter-active" @before-appear="beforeAppear" @appear="appear" @after-appear="afterAppear"> > <span class="text1">Welcome</span> </transition> <span class="text2">my web</span> </div> </template> <script> export default { methods:{ beforeAppear(){ console.log('beforeAppear') }, appear(){ console.log('appear') }, afterAppear(){ console.log('afterAppear') } } } </script> <style> .load{ width: 100%; height: 100%; background: #000; text-align: center; font-family: sans-serif; padding-top:20%; } .load span{ text-transform: uppercase; display: block; } .text1{ color: rgba(255, 255, 255, 0.856); font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 10px; background: black; position: relative; } .text2{ font-size: 30px; color:#6ab04c; } .fade-enter-active { animation: go 2s; } @keyframes go { 0%{ color: black; margin-bottom:-40px; } 30%{ letter-spacing: 25px; margin-bottom: -40px; } 85%{ letter-spacing: 8px; margin-bottom: -40px; } } </style>
留言
張貼留言