阿毛Alex - 2021年5月29日
type: channel
link: https://alexmao.com/index.php/2021/05/29/
description: 生命不息，折腾不止
items: CSS鼠标悬停图片转动
items: CSS选中第一个和最后一个元素
items: 让按钮动起来的一个案例

CSS鼠标悬停图片转动
type: item
date: 2021-05-29T08:00:00+00:00
description: header .hero-image { position: relative; } header .hero-image img { transition: 300ms; } header .hero-image img:hover { transform: rotate(-6deg); }

CSS鼠标悬停图片转动
type: item
date: 2021-05-29T08:00:00+00:00
description: header .hero-image {position: relative;}header .hero-image img {transition: 300ms;}header .hero-image img:hover {transform: rotate(-6deg);}

CSS选中第一个和最后一个元素
type: item
date: 2021-05-29T07:55:00+00:00
description: 下面可以选择最后一个元素：.nav-items li:nth-last-of-type(1) { margin: 0; } 下面可以选择第一个元素：.social-icons a:nth-of-type(1) { margin-left: 0; }

让按钮动起来的一个案例
type: item
date: 2021-05-29T07:48:00+00:00
description: 重点：a 标签必须有display: inline-block; transition: 300ms;a:hover使用transform: translateY(-8px);header a { font-size: 24px; color: #FFFFFA; text-decoration: none; width: 240px; height: 60px; background: #01847F; border-radius: 8px; padding: 12px 48px; display: inline-block; transition: 300ms; text-align: center; line-height: 30px; } header a:hover { transform: translateY(-8px); }