web基础学习（九）CSS3 练习transition、transform的5个小案例展示

其他 2020-03-21 10:01:31 阅读次数: 0
1.对角拉开蒙层

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #000000;
        }

        .container {
            width: 800px;
            height: 800px;
            margin: 100px auto 0;
        }

        .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .container ul li {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .container ul li::before, .container ul li::after {
            content: "";
            display: block;
            width: 150px;
            height: 300px;
            background-color: #fff;
            opacity: 0.4;
            position: absolute;
            transform: rotate(45deg);
            transition: all 0.3s ease;
        }

        .container ul li::before {
            top: -101px;
            left: -30px;
        }

        .container ul li::after {
            bottom: -100.8px;
            right: -30px;
        }

        .container ul li:hover::before {
            top: -300px;
            left: -90px;
        }

        .container ul li:hover::after {
            bottom: -300px;
            right: -90px;
        }

        .container ul li a {
            display: block;
        }

        .container ul li:nth-child(1) {
            background: url('images/01.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(2) {
            background: url('images/02.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(3) {
            background: url('images/03.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(4) {
            background: url('images/04.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(5) {
            background: url('images/01.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(6) {
            background: url('images/02.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(7) {
            background: url('images/03.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(8) {
            background: url('images/04.jpg') no-repeat center/cover;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>
</body>
</html>
2.蒙层消失在中心

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #000000;
        }

        .container {
            width: 800px;
            height: 800px;
            margin: 100px auto 0;
        }

        .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .container ul li {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .container ul li::before {
            content: "";
            display: block;
            width: 200px;
            height: 200px;
            /* border-radius: 50%; */
            background: #fff;
            opacity: 0.3;
            transition: all 1s ease;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50%;
            margin-top: -50%;
        }

        .container ul li:hover::before {
            width: 0;
            height: 0;
            border-radius: 50%;
            margin-left: 0;
            margin-top: 0;
        }

        .container ul li:nth-child(1) {
            background: url('images/01.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(2) {
            background: url('images/02.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(3) {
            background: url('images/03.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(4) {
            background: url('images/04.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(5) {
            background: url('images/01.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(6) {
            background: url('images/02.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(7) {
            background: url('images/03.jpg') no-repeat center/cover;
        }

        .container ul li:nth-child(8) {
            background: url('images/04.jpg') no-repeat center/cover;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>
</body>
</html>
3. 导航背景过渡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        nav {
            width: 600px;
            height: 40px;
            padding: 0 20px;
            margin: 100px auto 0;
            background-color: #fff143;
            border-radius: 10px;
            box-shadow: 0px 5px 0px #003472;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            height: 40px;
        }

        nav ul li {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: relative;
            overflow: hidden;
            background: #fff143;
            transition: background 0.4s ease;
        }

        nav ul li:hover {
            background-color: #00bc12;
        }

        nav ul li::after {
            content: "";
            display: inline-block;
            width: 2px;
            height: 30px;
            background: linear-gradient(#3eede7, #003472, #3eede7);
            position: absolute;
            right: 0;
            top: 5px;
        }

        nav ul li:last-child::after {
            display: none;
        }

        nav ul li::before {
            content: "";
            display: inline-block;
            width: 30px;
            height: 120px;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
            position: absolute;
            top: -40px;
            left: -60px;
            transform: rotate(45deg);
            transition: left 0.3s;
        }

        nav ul li:hover::before {
            left: 80px;
        }

        nav ul li a {
            font-size: 14px;
            color: blue;
            text-decoration: none;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="">index</a></li>
        <li><a href="">index</a></li>
        <li><a href="">index</a></li>
        <li><a href="">index</a></li>
        <li><a href="">index</a></li>
        <li><a href="">index</a></li>
    </ul>
</nav>
</body>
</html>
4. 菜单栏中括号效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style type="text/css">
        section {
            padding: 100px 20px;
            background-color: #3b2e7e;
        }

        nav {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            background: #003472;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        nav ul li a {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }

        nav ul li a::before {
            content: "[";
            display: inline-block;
        }

        nav ul li a::after {
            content: "]";
            display: inline-block;
        }

        nav ul li a::before, nav ul li a::after {
            opacity: 0;
            transform: translateX(0);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        nav ul li:hover a::before {
            opacity: 1;
            transform: translateX(-20px);
        }

        nav ul li:hover a::after {
            opacity: 1;
            transform: translateX(20px);
        }

        nav ul li a::
    </style>
</head>
<body>
<section>
    <nav>
        <ul>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
        </ul>
    </nav>
</section>
</body>
</html>
5.底边线下移

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style type="text/css">
        section {
            padding: 100px 20px;
            background-color: #3b2e7e;
        }

        nav {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            background: #003472;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            position: relative;
        }

        nav ul li a {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }

        nav ul li a::after {
            content: "";
            display: inline-block;
            width: 60px;
            height: 0px;
            background-color: #fff;
            position: absolute;
            left: 20px;
            top: 25px;
            opacity: 0;
            /* transition:width 0.5s,height 0.5s,opacity 0.5s,left 0.5s,top 0.5s; */
            transition: all 0.5s;
        }

        nav ul li:hover a::after {
            width: 90px;
            height: 3px;
            opacity: 1;
            left: 5px;
            top: 35px;
        }
    </style>
</head>
<body>
<section>
    <nav>
        <ul>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
            <li><a href="">index</a></li>
        </ul>
    </nav>
</section>
</body>
</html>
June.1
发布了156 篇原创文章 · 获赞 531 · 访问量 11万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_39043923/article/details/88962463
今日推荐
周排行
【转】mongodb中删除数组内嵌对象文档
php数字金额转换成中文大写显示
枫神之路--Java 的继承机制
四、Spring中使用@Conditional按照条件注册Bean
tomcat中直接使用第3放jar包
进程的创建fork vs vfork
结构体和组合体
“无任何网络提供程序接受指定的网络路径”的解决办法
webpack配置vue项目 引入和部分引入
Oracle在不同windows系统中的迁移
每日归档
更多
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022