很不错的UE交互

最新推荐文章于 2024-02-03 16:39:36 发布

我是李大福

最新推荐文章于 2024-02-03 16:39:36 发布

阅读量339

点赞数

分类专栏：样式 css/less/scss html页面文章标签： html css vue.js

本文链接：https://blog.csdn.net/weixin_42708208/article/details/121474787

版权

样式 css/less/scss 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

html页面

31 篇文章 0 订阅

订阅专栏

这篇博客展示了如何通过精心设计的UE交互提升用户体验。内容包括一个灵活的布局示例，采用div元素构建，包含四个带有标题的链接列表项。样式使用SCSS编写，实现了居中对齐、阴影效果、悬停动画等，旨在创造整洁且吸引人的视觉效果。

摘要由CSDN通过智能技术生成

很不错的UE交互

效果图

在这里插入图片描述

demo

<template>
<div>
    <div class="bg">
        <h2>很不错的UE交互</h2>
        <ul class="list">
            <li class="list_i">
                <a href="###" class="list_a" target="_blank">
                    <h4>标题一</h4>
                </a>
            </li>
            <li class="list_i">
                <a href="###" class="list_a" target="_blank">
                    <h4>标题二</h4>
                </a>
            </li>
            <li class="list_i">
                <a href="###" class="list_a" target="_blank">
                    <h4>标题三</h4>
                </a>
            </li>
            <li class="list_i">
                <a href="###" class="list_a" target="_blank">
                    <h4>标题四</h4>
                </a>
            </li>
        </ul>
    </div>
</div>
</template>

<style lang="scss" scoped>
.bg {
    background: #FBFBFC;
    text-align: center;
    padding: 100px 0;
}

.list {
    display: flex;
    margin:30px auto;
    width: 890px;

    &_i {
        height: 324px;
        width: 200px;
        padding-top: 0px;
        display: inline-block;
        background-color: #ffffff;
        padding: 40px 24px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
        border: 1px solid #f1f1f1;
        transition: all .25s;
        transform: translate3d(0, 0, 0);
        border-radius: 6px;
        &:not(:last-child){
            margin-right: 30px;
        }

        &:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, .15);
            transition: all .25s;
            transform: translate3d(0, -4px, 0);
        }
    }
}
</style>