css白光划过效果

最新推荐文章于 2024-06-01 17:33:11 发布

霹雳弦惊

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量2.3k

点赞数

分类专栏：基础知识文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33501079/article/details/72669659

版权

基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在知乎上看到一位大牛卖《web开发实战》。自己花几块钱来学习，代码可能大部分会一样。贴上来只是供自己以后学习,和自己的一些见解

题目要求实现一张图片,鼠标移到上面有白光划过,

先贴HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" href="xx.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="height-box">
    <img src="test_one.jpg" alt="" title="">
</div>
</body>
</html>

<img>里面的tilte是鼠标移动到图片上显示的信息

CSS代码

.height-box{
    height: 120px;
    width: 300px;
    overflow: hidden;
    position: relative;
}
.height-box img{
    height: 100%;
    width: 100%;
}
/*添加白光*/
.height-box:before {
    display: block;
    top: -200%;
    left: -100%;
    width: 50%;
    height: 300%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6) , rgba(255, 255, 255, 0.05) );
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    background: linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    z-index: 2; /*在最上层*/
    position: absolute;
    content: "";
}
.height-box:hover:before{/*鼠标移动到上面需要做的事情,由于是要白光动起来,所以这里设置动画*/
    -webkit-animation: crossed 5s linear;
    -ms-animation: crossed 5s linear;
    -moz-animation: crossed 5s linear;
    -o-animation: crossed 5s linear;
    animation: crossed 5s linear;
}
@-webkit-keyframes crossed {
    from{
        top: -200%;
        left: -100%;
    }
    to{
        top: -50px;
        left:100%;
    }
}
@-o-keyframes crossed {
    from{
        top: -200%;
        left: -100%;
    }
    to{
        top: -50px;
        left:100%;
    }
}
@-moz-keyframes crossed {
    from{
        top: -200%;
        left: -100%;
    }
    to{
        top: -50px;
        left:100%;
    }
}
@-ms-keyframes crossed {
    from{
        top: -200%;
        left: -100%;
    }
    to{
        top: -50px;
        left:100%;
    }
}
@keyframes crossed {
    from{
        top: -200%;
        left: -100%;
    }
    to{
        top: -50px;
        left:100%;
    }
}

这段代码里按照以下思路：

1.对div这个整个框架进行设置。注意这里如果不设置定位，会导致图片跳动，滚动条不停滚动

2.对图片进行样式设置,在div这个框架下，

3.使用：before选择容器制作白光。

4.白光有了，那得让他动起来啊，所以就是制作动画。

在第三步当中使用:before选择容器最重要的是要把content写上。千万记住，使用：before或者:after一定要和content连用.否则对before或者after的操作都得不到体现。

-webkit-animation: crossed 5s linear;

crossed 代表名称。 5s代表五秒后开始动画 linear表示匀速

@keyframes 规定动画

霹雳弦惊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css白光划过效果

在知乎上看到一位大牛卖《web开发实战》。自己花几块钱来学习，代码可能大部分会一样。贴上来只是供自己以后学习,和自己的一些见解题目要求实现一张图片,鼠标移到上面有白光划过,先贴HTML Title 里面的tilte是鼠标移动到图片上显示的信息CSS代码.height-box{ he
复制链接

扫一扫