倒影效果简单css实现

最新推荐文章于 2024-01-12 19:11:25 发布

Dove88888888

最新推荐文章于 2024-01-12 19:11:25 发布

阅读量919

点赞数

分类专栏：前端笔记文章标签： css html

本文链接：https://blog.csdn.net/Dove88888888/article/details/49976721

版权

前端笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这个礼拜就要进行软件工程的考试了，而我还没开始复习。。。。。计划的javascript150课程只看了30课，仔细想了一下上一个礼拜在游戏中度过的时光，整个人就不好了起来，，，，嘿嘿。

今天写了一个简单的倒影效果，本来是在javascript上看到的，但是这种东西我认为还是应该用css直接写比较好。所用到的知识点就是transform和透明度。
看代码吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        img{
            width:78px;
            height:120px;
        }
        .lay_shadow{
            margin:60px auto;
            padding: 10px;
            width:800px;
            height:290px;
            background-color: black;
            position:relative;
            text-align: center;
            border-radius: 5px;
        }
        .lay_shadow>h1{
            color:white;
            margin-bottom: 30px;
        }
        [class^=stand]{
            font-size:0;
        }
        [class^=stand]>li{
            display: inline-block;
            margin-left: 20px;
        }
        .stand_2>li{
            height:40px;
            overflow: hidden;
        }
        .stand_2>li>img{
            -webkit-transform: scaleY(-1);
            -moz-transform: scaleY(-1);
            -ms-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            transform: scaleY(-1);
            opacity:0.30;
        }/*实现翻转，透明！！！*/
        .border_line{
            border-bottom: 2px solid #333333;
            width:500px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="lay_shadow">
        <h1>倒影效果简单css实现</h1>
        <ul class="stand_1">
            <li><img src="imags/1.jpg" alt=""/></li>
            <li><img src="imags/2.jpg" alt=""/></li>
            <li><img src="imags/3.jpg" alt=""/></li>
            <li><img src="imags/4.jpg" alt=""/></li>
            <li><img src="imags/5.jpg" alt=""/></li>
        </ul>
        <ul class="stand_2">
            <li><img src="imags/1.jpg" alt=""/></li>
            <li><img src="imags/2.jpg" alt=""/></li>
            <li><img src="imags/3.jpg" alt=""/></li>
            <li><img src="imags/4.jpg" alt=""/></li>
            <li><img src="imags/5.jpg" alt=""/></li>
        </ul>
        <div class="border_line"></div>
        </div>
</body>
</html>

再看看效果图~~~~
这里写图片描述

看上去还不挺好的，最后欢迎大家评论交流~~~~

Dove88888888

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
倒影效果简单css实现

这个礼拜就要进行软件工程的考试了，而我还没开始复习。。。。。计划的javascript150课程只看了30课，仔细想了一下上一个礼拜在游戏中度过的时光，整个人就不好了起来，，，，嘿嘿。今天写了一个简单的倒影效果，本来是在javascript上看到的，但是这种东西我认为还是应该用css直接写比较好。所用到的知识点就是transform和透明度。看代码吧~<!DOCTYPE html><html
复制链接

扫一扫