随笔分类 - CSS3效果
摘要：解决第三方网页在微信浏览器中点击图片自动放大，因为微信Android客户端已经在底层支持img标签自动放大功能； 传统方式： $(document).on(‘click’, ‘img’, e => { e.preventDefault(); }) 这个方式可能会把所有的默认的属性都屏蔽了，典型的就是
阅读全文
摘要：1、第一种方式：条纹制作 HTML代码为： CSS代码为： 第二种方式：background-image阴影遮罩 、 CSS代码： 原文参照：https://m.toutiao.com/i6435851581475783169/?tt_from=mobile_qq&utm_campaign=clie
阅读全文
摘要：http://view.inews.qq.com/w/WXN201508190483330M0?refer=nwx&groupid=1439978570&msgid=0&key=dffc561732c2265139530866aa8483be53175d099f27d5e8525e87892ffc2
阅读全文
摘要：需求（从左到右）：1、当鼠标移动到第一个时候，圆圈会变360度旋转，圆圈颜色变成深蓝色；2、当鼠标移动到第二个时候，盾牌里面的白色变成深蓝色，还有锁颜色会变成白色，然后锁扣进行180度从左像右旋转，锁上一点再打开！3、当鼠标移动到第三个时候，下面横条变成浅蓝色，中间竖横条从下面隐藏到显示，颜色变成深...
阅读全文
摘要：CSS代码为：.wrap .block3 {background: url(images/qikoo_block3_img.jpg) no-repeat center center}.wrap .block3 .main { position:relative;}.wrap .block3 .rig...
阅读全文
摘要：第一方式： 使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置，有两种很简单的实现方式： 方式1： <a href="javascript:scroll(0,0)">返回顶部</a> 也可以 onclick="window.scrollTo('0','0')"
阅读全文
摘要：justify-content 定义伸缩项目沿主轴线的对齐方式取值：flex-start ：默认值，向一行的其实位置靠齐flex-end ：伸缩项目向一行的结束位置靠齐center ：伸缩项目向一行的中间位置靠齐space-between ：两端对齐，项目之间的间隔都相等。space-around：
阅读全文
摘要：需求：1、鼠标移到图片上方，图片平滑向上移动49像素，鼠标移开图片之后，图片平滑向下移动49像素；动画效果：页面展示效果为：HTML结构为：transition动画 ...
阅读全文
摘要：【鼠标移动进去图片放大一倍效果：运用了-webkit-transform:scale(1.04)效果】如图：鼠标移动上去的时候图片放大一倍的效果，无标题文档 旅游设计师 ...
阅读全文
