Loading... # 教程开始 #### 1、头像呼吸光环和鼠标悬停旋转放大  ``` .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } } ``` <CODE>如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:</CODE> ``` @keyframes light { from { box-shadow: 0 0 4px #f00; } to { box-shadow: 0 0 16px #f00; } } ``` #### 2、首页文章列表悬停上浮  ``` .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); } ``` #### 3、首页文章列表头图悬停放大并将超出范围隐藏  ``` .index-post-img { overflow: hidden; } .item-thumb { transition: all 0.3s; } .item-thumb:hover { transform: scale(1.1) } ``` #### 4、文章内头图和文章图片悬停放大并将超出范围隐藏  ``` .entry-thumbnail { overflow: hidden; } #post-content img { border-radius: 10px; transition: 0.5s; } #post-content img:hover { transform: scale(1.05); } ``` 最后修改:2022 年 10 月 03 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 2 如果觉得我的文章对你有用,请随意赞赏
2 条评论
文章写的不错,继续加油