在线地址：
HTML code:
CSS code:
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: black}nav ul li{ color: white; list-style: none; font-size: 24px; text-transform: uppercase; margin-top: 1em; padding: 1em 3em; border: 1px solid white; border-radius: 0.2em;}nav ul li:nth-of-type(1):hover{ color: blue; border-color: blue; box-shadow: 0 0 0 3px blue;}nav ul li:nth-of-type(2):hover{ color: blue; /* animation-fill-mode : none | forwards | backwards | both; forwards 当动画完成后，保持最后一个属性值. */ animation: border-change 1s linear forwards;}@keyframes border-change{ 0%{ border-top-color: white; } 25%{ border-top-color: blue; } 50%{ border-top-color: blue; border-right-color: blue; } 75%{ border-top-color: blue; border-right-color: blue; border-bottom-color: blue; } 100%{ border-color: blue; }}nav ul li:nth-of-type(3){ color: white; transition: border-top-color linear 0.2s 0s, border-right-color linear 0.2s 0.2s, border-bottom-color linear 0.2s 0.4s, border-left-color linear 0.2s 0.6s; }nav ul li:nth-of-type(3):hover{ color: blue; border-top-color: blue; border-right-color: blue; border-bottom-color: blue; border-left-color: blue; /* 动画名称 进行时间 速度快慢 开始时间 */ animation: pulse 1s linear 0.8s;}@keyframes pulse { from { /* rgb(30, 144, 255) = dodgerblue */ box-shadow: 0 0 rgba(30, 144, 255, 0.5); } to { box-shadow: 0 0 0 1em rgba(30, 144, 255, 0); }}
posted on 2019-02-20 22:53 阅读( ...) 评论( ...)