随笔分类 - 前端基础样式

css | 鼠标经过样式

摘要：1、循序渐进 <style> /* 基础样式（删除） */ body, html { padding: 0; margin: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: ce 阅读全文

posted @ 2021-07-12 14:38 wangmeihao 阅读(913) 评论(0) 推荐(0) 编辑

前端样式一（淡出二维码图片）

摘要：<a href=""> <img src="images/ft_l3.png" alt=""> <div class="ewm"> <img src="http://www.vztimes.com/static/default/images/ewm.jpg"> </div> </a> css .ew 阅读全文

posted @ 2021-07-03 11:49 wangmeihao 阅读(61) 评论(0) 推荐(0) 编辑

css | 鼠标经过按钮时样式（radial-gradient）

摘要：<a href="" class="dxd_radial-gradient">查看更多</a> :root { --main-color: #555; } .dxd_radial-gradient { width: 150px; height: 40px; display: flex; justif 阅读全文

posted @ 2021-01-05 14:05 wangmeihao 阅读(265) 评论(0) 推荐(0) 编辑

css-鼠标经过图片效果

摘要：1.伪类边框线 <div class="dxd_border"> <img src="" alt=""> </div> .dxd_border{ position: relative; overflow: hidden; } .dxd_border::before, .dxd_border::aft 阅读全文

posted @ 2020-12-29 12:59 wangmeihao 阅读(233) 评论(0) 推荐(0) 编辑

裁剪图片

摘要：1. clip-path: polygon(0 0 , 100% 0,100% 90%, 55% 90%,50% 100%, 45% 90%,0 90% ); -webkit-clip-path: polygon(0 0 , 100% 0,100% 90%, 55% 90%,50% 100%, 45 阅读全文

posted @ 2020-12-19 09:45 wangmeihao 阅读(53) 评论(0) 推荐(0) 编辑

banner缓慢缩小过渡效果

摘要：<style> /* pc_ban */ .pc_ban .swiper-slide { overflow: hidden; } .pc_ban .sw_bg { width: 100%; height: 600px; top: 0; left: 0; transform: scale(1.1); 阅读全文

posted @ 2020-12-17 10:15 wangmeihao 阅读(219) 评论(0) 推荐(0) 编辑