CSS特效（4）——使用 background-blend-mode 制作 hover 效果

最新推荐文章于 2025-02-22 20:21:04 发布

weixin_33806509

最新推荐文章于 2025-02-22 20:21:04 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/janas-luo/p/9604799.html

使用 background-blend-mode 制作 hover 效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

.pic {
    width: 300px;
    height: 200px;
    margin: 30px;
    float: left;
    background: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(#f00, #00f);
    background-size: cover, 100% 100%;
    background-position: 0 0, -300px 0;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    transition: .5s background-position linear;
    cursor: pointer;
}

.pic1 {
    background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(90deg, #ff5722, #03a9f4); 
}

.pic2 {
    background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(-180deg, #00bcd4, #fa1a09); 
}

.pic3 {
    background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(45deg, #ffc107, #3f51b5, #4caf50, #ff0057, #fae105, #5c00ff); 
}

.pic:hover { 
    background-position: 0 0, 0 0; 
}
  </style>
</head>
<body>
    <div class="pic"></div>
    <div class="pic pic1"></div>
    <div class="pic pic2"></div>
    <div class="pic pic3"></div>
</body>
</html>

转载于:https://www.cnblogs.com/janas-luo/p/9604799.html