随笔分类 -  css[3]

css与css3相关学习研究
css3 渐变边框如何实现圆角效果
摘要：常规的 border-image 属性如果直接使用 border-radius 会无效，关于如何实现渐变边框圆角，网上流传着大概这么几种办法： 渐变背景方式（仅适用于纯底色背景） 借助 after 伪类（仅适用于纯底色背景） 借助 css3 中的 mask 遮罩蒙版 加 after 伪类实现（仅适用 阅读全文
posted @ 2021-03-08 18:05 前端路引 阅读(940) 评论(0) 推荐(0)
css 保留后端 textarea 中的换行与空格字符
摘要：如果后台使用 textarea 输入内容，在前段显示需要保留换行符与空白字符，该如何做？ 常规方法 替换换行符为 <br> 标签，替换空白字符为 &nbsp;，再输出到要显示的位置。 弊端：不够简洁！ pre 标签实现 弊端：超出容器 pre 标签并没有按照理想方式换行显示！ css 样式实现 <d 阅读全文
posted @ 2020-10-22 16:39 前端路引 阅读(813) 评论(0) 推荐(0)
css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图
摘要：如图： 图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。 常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。 做法一 使用 JS 懒加载图片，如果图片加载失 阅读全文
posted @ 2020-04-16 10:27 前端路引 阅读(3199) 评论(0) 推荐(0)
CSS3实现PS中的蚁行线动画以及画布的马赛克背景图
摘要：话不多说，先看例子，外链 效果截图如下： 蚁行线 马赛克背景 代码： 蚁行线代码如下： /* <!-- HTML代码 --> <div class="ant"></div> */ /* 蚁行线动画 */ .ant { width: 200px; height: 200px; margin: 40px 阅读全文
posted @ 2019-08-23 18:03 前端路引 阅读(1464) 评论(0) 推荐(0)
使用css3变量创建炫酷悬停效果
摘要：原文地址：www.zcfy.cc/article/stunning-hover-effects-with-css-variables 效果： 主要使用css中的var做动画效果，代码如下： 阅读全文
posted @ 2018-05-14 17:32 前端路引 阅读(256) 评论(0) 推荐(0)
CSS3之碰撞反弹动画无限运动
摘要：示例代码如下： 该效果可以通过JS随机设置运动时间，衍生出无数小球随机碰撞动画，也能用于雪花飞舞效果。 巧妙的使用css3的animate属性，可以实现各种炫丽效果。 阅读全文
posted @ 2017-09-21 16:55 前端路引 阅读(4537) 评论(0) 推荐(0)
CSS3 之filter毛玻璃效果弹窗
摘要：css3 的 filter 非常强大，在实际开发中也能提升逼格，比如 filter: blur 可以实现更优雅的弹窗遮罩。 先看效果： 效果主要用css3的滤镜属性实现，代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta name= 阅读全文
posted @ 2016-06-20 17:14 前端路引 阅读(1483) 评论(0) 推荐(0)
CSS3 之书页卷角阴影效果
摘要：视觉如下： CSS3 之书页阴影效果： 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>书页阴影效果</title> 5 <style> 6 .box { 7 width: 400px; 8 margin: 0 auto; 9 position 阅读全文
posted @ 2016-05-23 10:21 前端路引 阅读(2292) 评论(0) 推荐(0)
CSS3 之loading动画实现思路
摘要：效果大致如下： 主要实现方式： 该效果主要用到animation-timing-function中的steps()函数，该函数主要用于分步隐藏不同模块。 实现思路： 第一步动画： 第二步动画： 第三步动画： 第四步动画： 旋转半圆： 将gif动画分解为四步实现，每一步都是由旋转半圆旋转实现动画效果， 阅读全文
posted @ 2016-05-03 17:03 前端路引 阅读(486) 评论(0) 推荐(0)
去除表单浏览器默认样式[转]
摘要：我们在写表单的时候会发现一些浏览器对表单赋予了默认的样式，如在Chorme浏览器下，文本框及下拉选择框当载入焦点时，都会出现发光的边框，并 且在火狐及谷歌浏览器下，多行文本框textarea还可以自由拖拽拉大，另外还有在IE10下，当文本框输入内容后，在文本框的右侧会出现一个小叉叉， 等等。不容置疑 阅读全文
posted @ 2014-01-15 14:39 前端路引 阅读(432) 评论(0) 推荐(0)