/* 1.创建一个点击动画 */ .btn { position: relative; display: inline-block; padding: 12px; background-color: #3B3B3B; color: white; font-weight: bold; cursor: pointer; } .btn:hover { background-color: #555; } .btn:active { background-color: #333; top: 2px; left: 2px; }
这个代码可以创建一个简单的点击动画效果,当用户点击按钮时,它会上下移动2像素,并在左边和上边创建一个2像素的阴影。这给人一种像是真正按下去的感觉。
/* 2.创建一个拉伸效果 */ .box { display: inline-block; background-image: linear-gradient(to bottom, gold, orange); width: 200px; height: 200px; position: relative; } .btn2 { position: absolute; bottom: 0; right: 0; margin: 10px; background-color: white; padding: 10px 20px; cursor: pointer; transition: all 0.3s; } .btn2:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
这个代码可以创建一个拉伸效果,当用户悬停在按钮上时,它会缩放1.1倍并产生阴影。这个效果通常用于鼓励用户进行某些操作,比如购买或下载。
/* 3.创建一个闪烁效果 */ .box2 { display: inline-block; background-image: linear-gradient(to bottom, aquamarine, skyblue); width: 200px; height: 200px; position: relative; } .box2:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: blink 3s infinite; } @keyframes blink { 50% { opacity: 0; } }
这个代码可以创建一个闪烁效果,在正方形中加入一个伪类元素后,使用@keyframes和animation属性对伪类元素进行动画控制,使其在50%的时间内变为透明,然后再恢复正常状态,以此创建闪烁效果。