HTML css实现翻转效果小练习

最新推荐文章于 2024-01-23 09:24:54 发布

哲哲哲哲哲123

最新推荐文章于 2024-01-23 09:24:54 发布

阅读量701

点赞数 1

本文链接：https://blog.csdn.net/m0_61585359/article/details/121501884

版权

一个小的翻转的效果，与无序列表结合去写，还有一些padding margin diaplay 属性的应用

翻转要结合：hover鼠标悬浮、transition；过渡属性去写

transform：rotatey（180deg）

在重新写这个效果的时候，因为隔了一段时间了，竟然把翻转属性的用法给忘了，由此，温故知新真的很重要，要时常复习。

最近在写页面的时候经常遇到因为尺寸导致的一些效果没法实现，只能一点一点去调尺寸，唉，不知道问题出在哪。

效果图翻转效果，鼠标移动到图片和文本框时图片垂直翻转180度

HTML结构这里就复制了一段，其他段内容都是一致的；

<body>
    <div class="page">
        <ul type="none">
            <li>
                <img src="../11.12text.html/pic.jpg" alt="">
                <div class="main">
                    <div class="title">
                        <h4>6/02<span>2021</span></h4>
                        <a href="#">美丽新世界共创美好家园</a>
                    </div>
                    <div class="writer">
                        <p>陈某毕业于某名牌大学信息安全专业，毕业后一直从事相关工作。2020年，他入职一家知名科技公司信贷平台的运营部从事数据分析，拥有客户数据查询权限。2020年底，陈某的好朋友、被告人张某找到他，提出以每条1.7元左右的价格购买该公司贷款项目中贷款客户个人信息。虽然知道是违法行为，但经不住诱惑的陈某还是答应了这桩生意。</p>
                    </div>
                </div>
            </li>

css样式

*{
    margin: 0;
    padding: 0;
}
.page{
    width: 1000px;
    margin: 0 auto;
    background: #999;
}
.page ul li{
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
}
.page ul li:hover img{
    transform: rotatey(180deg);
}
.page img{
    vertical-align: middle;
    transition: 1s;
}
.main{
    width: 278px;
    border: 1px black solid;
    padding: 10px;
}
.main:hover{
    border: solid #f00 1px;
}
.title h4{
    float: left;
    background: lightgrey;
    font-size: 20px;
    padding: 10px;
}
.title h4 span{
    display: block;
    font-size: 16px;
    text-align: center;
}
.title a{
    padding-left: 10px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    border-bottom: black 1px solid;
    padding-bottom: 42px;
    float: left;
}
.title a:hover{
    color: #f00;
}