Articles in the category of Web开发

web前端
  1. Home
  2. Web开发

css里面的filter属性

# filter图片变成白色或者黑色（用brightness）**图片变成白色**```css filter: brightness(100); ```**图片变成黑色**```css filter: brightness(0); ```
  • 逸云先生
  • September 14, 2020
  • No comments

    • Css实现鼠标hover状态等比例放大

    ``` .info-list-left{ float: left; width: 41%; overflow: hidden; }.info-list-left img{ max-width: 100%; transition: all 1000ms; } .info-list-left:hover img{ transform: scale(1.2); } ```
  • 逸云先生
  • August 25, 2020
  • No comments

    • 新手入门简单配置aos实现页面渐变效果

    ``` Document body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{ transition-duration: 4000ms; } Animate On Scroll Library...
  • 逸云先生
  • August 19, 2020
  • No comments

    • css溢出隐藏

    根据宽度展示，超出宽度范围会显示"..."```css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; ```### -webkit-line-clamp可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示"..." 这是正常的展示```css...
  • 逸云先生
  • August 15, 2020
  • No comments

    • 使用CSS打造渐变背景动画

    最近看见很多网站都使用上了渐变动画，我也来分享一个，纯css3实现一款简单的网页渐变背景动画特效，可以在css属性里修改成你喜欢的渐变颜色值和动画时间。```css /* 动态渐变特效*/ body { background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% ...
  • 逸云先生
  • August 11, 2020
  • No comments

    • css 实现一个带尖角的正方形

    **html部分：**```css```**css代码：**```css #demo { width: 100px; height: 100px; border: 2px #000 solid; background-color: #fff; position: relative; }#demo:before, #demo:after { width: 0px; height: 0px; b...
  • 逸云先生
  • August 10, 2020
  • No comments

    • css让一张背景图100%的占满屏幕

    第一种：```css background: url(../images/register.png) no-repeat; background-size:100% 100%; width: 100%; height:500px; ```第二种（推荐）：```css background: url(../images/guide_page.jpg) no-repeat center; bac...
  • 逸云先生
  • August 4, 2020
  • No comments

    • css手机滑动效果

    html部分：```css 用品 用品 用品 用品 用品 用品 用品 用品 用品 用品 用品 ```css部分：```css ul { overflow-x: auto; list-style: none; white-space: nowrap; width: auto; }ul li { margi...
  • 逸云先生
  • July 21, 2020
  • No comments