<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css 实用技巧</title><style>p {transform-origin: 1.4em -.4em;transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);}input:not(:focus)+p {transform: scale(0);transition: transform 300ms;/*此处是为了缩小时重置transition-timing-function，不触发回弹*/}</style>
</head><body><label><input type="text" placeholder="focus me"><p>点击我就会出现，我带缓动效果---</p></label>
</body></html>