美化教程.md

KZHomePage 二次元风格个人网站引导页-美化

1. 美化二次元卡片圆角、卡片圆角阴影、卡片透明度、卡片边缘发光；

修改style.css样式文件，style.css文件路径：在KZHomePage-main\static文件夹里；

第67行，在.card中，添加卡片圆角、卡片圆角阴影、卡片透明度；

.card {
    border: none;
    padding: 50px 30px 0px;
    border-radius: 0px 6px 6px 0px; /* 卡片圆角：左上、右上、右下、左下 */
    box-shadow: 0px 0px 2px 3px rgb(203, 221, 232); /* 圆角阴影 */
    background-color:rgba(255, 255, 255, 0.6); /* 卡片透明度 */
}

第74行，在.container中，添加卡片透明度(已注释，在这行中添加透明度会出现文字被同化透明，已放置在第67行的.card中用rgba体现)；

.container {
    opacity: 0.85; /* 卡片透明度 */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

第81行，在.my-card中，添加卡片边缘发光代码；

.my-card {
    /* box-shadow: 0px 5px 15px 5px rgb(203, 221, 232); */
    box-shadow: 0px 3px 10px 3px rgb(203, 221, 232); /* 卡片边缘发光 */
}

第91行，在.btn中，修改按钮图标圆角

.btn {
    border-radius: 3px; /* 修改按钮图标圆角 */
    margin: 5px 0;
    width: 100%;
    padding: 12px 40px;
    transition: ease;
}

第151行，在.photo-bg中，添加卡片圆角、卡片圆角阴影、左侧背景卡片透明度；

.photo-bg {
    /* background-image: url(assets/background.jpg); */
    background-image: url(https://s3.bmp.ovh/imgs/2022/08/12/0d4bbf451be59b18.jpg);
    border-radius: 6px 0px 0px 6px; /* 卡片圆角：左上、右上、右下、左下 */
    box-shadow: 0px 0px 2px 3px rgb(203, 221, 232); /* 圆角阴影 */
    opacity: 0.85; /* 左侧背景卡片透明度 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

2. 添加鼠标文字特效；

修改index.html主页文件，index.html文件路径：在KZHomePage-main文件夹里； 在html标签内，添加鼠标特效

<script type="text/javascript"> 
    /* 鼠标文字特效 */
    var a_idx = 0; 
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
            var $i = $("<span/>").text(a[a_idx]); 
            a_idx = (a_idx + 1) % a.length; 
            var x = e.pageX, 
            y = e.pageY; 
            $i.css({ 
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
                "top": y - 20, 
                "left": x, 
                "position": "absolute", 
                "font-weight": "bold", 
                "color": "#ff6651" 
            }); 
            $("body").append($i); 
            $i.animate({ 
                "top": y - 180, 
                "opacity": 0 
            }, 
            1500, 
            function() { 
                $i.remove(); 
            }); 
        }); 
    }); 
    </script>

3. 修改图标大小

修改index.html主页文件，index.html文件路径：在KZHomePage-main文件夹里；

.social .fa {
    font-size: 16px; /* 定义fontawesome图标大小*/
}

@media{
    .social .fa {
        font-size: 16px; /* 浏览器打开开发模式时，定义fontawesome图标大小*/
    }

    }