Créer un exemple d'interface de connexion de style conception matérielle avec CSS3-tutoriel CSS-php.cn

Cet article présente principalement l'utilisation de CSS3 pour créer un exemple d'interface de connexion de style conception matérielle. Il a une certaine valeur de référence. Vous pouvez en savoir plus si vous en avez besoin.

Sur un coup de tête, j'ai voulu apprendre le style de conception du matériel, alors j'ai essayé de remplir une page de connexion

C'est l'effet global

CSS3 制作一个material-design 风格登录界面实例

Ça fait du bien, et le code sera joint à la fin

Pendant le processus d'écriture, aucune image ni icône de police n'a été utilisée, et tout a été complété en utilisant CSS3 que j'ai encore rencontré. quelques difficultés et bugs, j'ai donc voulu les noter Il est facile de s'y référer plus tard.

Responsive design

Dans cette page, utilisez les 3 suivants. points pour compléter la conception réactive

1. Largeur maximale de max-width est définie pour la compatibilité sur les grands écrans

2. tout le temps

3. Les composants utilisent des pixels

Il y a beaucoup d'autres points importants concernant le design réactif.

Mise en page générale

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
</head>

<body>
    <p class="container">
        <p class="logo">
            <p class="logo-block-top">
            </p>
            <p class="logo-block-bottom">
            </p>
        </p>
        <h4 class="login-header">用户登录</h4>
        <p class="content">
            <p class="form-group">
                <input type="text" required class="form-control">
                <label class="form-label">用户名</label>
            </p>
            <p class="form-group">
                <input type="text" required class="form-control">
                <label class="form-label">密 码</label>
            </p>
            <p class="option">
                <p class="option-left"><a href="">忘记密码</a></p>
                <p class="option-right">
                    <span class="md-checkbox" checked="checked"></span>
                    <label class="form-label">记住密码</label>
                </p>
            </p>
        </p>
        <button class="login-button">
            <span class="icon-login"></span>
        </button>
    </p>
</body>
<script src="./app.js type=" text/javascript "></script>

</html>

Copier après la connexion

Démarrage CSS

Ajoutez des styles au corps

html {
    font-family: "Microsoft YaHei", å®‹ä½“, "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
    background-color: #FF4081;
    color: #777;
}

Copier après la connexion

Type coeur

.container{
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 45px 20px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    box-sizing: border-box;
}

Copier après la connexion

Remarque , Ici, le remplissage est utilisé pour ajuster la marge interne au lieu d'utiliser la marge pour les éléments enfants, car si vous souhaitez utiliser la marge, pour l'effet BFC, vous devez ajouter un débordement : caché Cela aura un impact sur le débordement du. bouton de queue

Logo d'en-tête

.container>.logo {
    height: 150px;
    width: 150px;
    position: relative;
    background-color: #EFEFEF;
    border-radius: 75px;
    margin: 0 auto;
}

Copier après la connexion

Définissez le rayon de bordure sur la largeur et la hauteur, ce qui fera c'est un cercle

CSS3 制作一个material-design 风格登录界面实例

Un demi-cercle plus foncé est nécessaire en dessous

Comment dessiner un demi-cercle ?

.container>.logo::after {
    content: &#39; &#39;;
    height: 150px;
    width: 75px;
    position: absolute;
    background-color: #E1E1E1;
    border-radius: 0 75px 75px 0;
    left: 75px;
    top: 0;
}

Copier après la connexion

Réglez la largeur sur la hauteur générale, puis définissez les coins arrondis du coin supérieur gauche et du coin inférieur gauche sur 0, et le coin droit sur 75px

CSS3 制作一个material-design 风格登录界面实例

Faire une serrure, divisée en deux parties, serrure-haut et serrure-bas

.container>.logo>.logo-block-top {
    box-sizing: border-box;
    height: 45px;
    width: 54px;
    border: 10px solid #F57C00;
    border-bottom: 0;
    position: absolute;
    border-radius: 27px 27px 0 0;
    left: 48px;
    z-index: 1001;
    top: 20px;
}

Copier après la connexion

définir également des coins arrondis

.container>.logo>.logo-block-bottom {
    position: absolute;
    height: 60px;
    width: 80px;
    box-sizing: border-box;
    background-color: #FFA000;
    z-index: 1001;
    top: 65px;
    left: 35px;
    border-radius: 7px;
}

Copier après la connexion

CSS3 制作一个material-design 风格登录界面实例

Réglez le centre de la clé, qui est également divisé en deux parties, le trou rond supérieur et l'ellipse inférieure

peuvent il suffit de définir les pseudo-éléments avant et après du lock-bottom Ci-dessus

.container>.logo>.logo-block-bottom::before {
    content: " ";
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: #EFEFEF;
    border-radius: 5px;
    top: 22px;
    left: 34px;
    box-sizing: border-box;
}
.container>.logo>.logo-block-bottom::after {
    content: " ";
    position: absolute;
    height: 12px;
    width: 6px;
    background-color: #EFEFEF;
    border-radius: 2px;
    top: 30px;
    left: 37px;
    box-sizing: border-box;
}

Copier après la connexion

Le logo est complété ici

CSS3 制作一个material-design 风格登录界面实例

Vous trouverez ci-dessous le titre « Connexion utilisateur ».

Remarque : il est préférable d'utiliser la marge au lieu du remplissage ici, ne détruisez pas la balise h4 d'origine.

.container>.login-header {
    text-align: center;
    font-size: 23px;
    color: #FF4081;
    font-weight: 400;
    margin: 15px 0 18px 0;
}

Copier après la connexion

Ajouter un conteneur

.container>.content {
    width: 90%;
    margin: 0 auto;
}

Copier après la connexion

Ajouter un groupe de formulaires, y compris des balises d'étiquette et d'entrée, définir la disposition relative

.container>.content>.form-group {
    position: relative;
}

Copier après la connexion

Ce qui suit est la partie principale, définissant le style de l'entrée (un bug se produira ici, qui sera introduit au fin)

.container>.content>.form-group>.form-control {
    z-index: 3;
    position: relative;
    height: 58px;
    width: 100%;
    border: 0px;
    border-bottom: 1px solid #777;
    padding-top: 22px;
    color: #FF4081;
    font-size: 12px;
    background: none;
    box-sizing: border-box;
    outline: none;
    display: inline-block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

Copier après la connexion

étiquette, utilisez le positionnement absolu et placez-la au-dessus de l'entrée

.container>.content>.form-group>.form-label {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 15px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

Copier après la connexion

Définissez un certain espacement entre les deux groupes de formulaires, sinon le bas sera bloqué. Le coffret-ombre défini ci-dessus

.container>.content>.form-group>:first-child {
    margin-bottom: 5px;
}

Copier après la connexion

ajoute effets dynamiques

.container>.content>.form-group>.form-control:focus,
.container>.content>.form-group>.form-control:valid {
    box-shadow: 0 1px #FF4081;
    border-color: #FF4081;
}

.container>.content>.form-group>.form-control:focus+.form-label,
.container>.content>.form-group>.form-control:valid+.form-label {
    font-size: 12px;
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-25px);
}

Copier après la connexion

Vient maintenant l'option du bas, qui est également divisée en deux parties, option-gauche et option-droite

.container>.content>.option {
    width: 100%;
    height: 14px;
    margin-top: 24px;
    font-size: 16px;
}

.container>.content>.option>.option-left {
    width: 50%;
    float: left;
}

.container>.content>.option>.option-left>a,
.container>.content>.option>.option-left>a:hover {
    color: #FF4081;
    text-decoration: none;
}

Copier après la connexion

Dans l'option de droite, faites attention à ceci. La case à cocher n'est pas une entrée native, mais est pivotée à l'aide de p, car la case à cocher native ne peut pas changer le style

.container>.content>.option>.option-right {
    width: 50%;
    float: right;
    text-align: right;
    position: relative;
}

.container>.content>.option>.option-right>.md-checkbox {
    height: 18px;
    width: 18px;
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    background-color: #FF4081;
    cursor: pointer;
    position: absolute;
    top: 3px;
    right: 68px;
}

.container>.content>.option>.option-right>.md-checkbox[checked]:after {
    content: " ";
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    height: 8px;
    width: 15px;
    box-sizing: border-box;
    position: absolute;
    transform: rotate(-45deg);
    top: 3px;
    left: 2px;
}

Copier après la connexion

Css3 est utilisé ici Faire pivoter et imiter un effet de sélection

Remarque : bien que p ne puisse pas être directement sélectionné, vous pouvez toujours ajouter un attribut checkd à lui. Cet attribut est un effet d'événement CSS spécial qui peut être contrôlé via js.

Enfin, le bouton de connexion.

Ici, le positionnement absolu doit également être utilisé, les points de référence sont en bas. et c'est vrai

.container>.login-button {
    position: absolute;
    height: 60px;
    width: 60px;
    border: 0px;
    outline: 0px;
    background-color: #FF4081;
    border-radius: 30px;
    right: -30px;
    bottom: 91px;
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.3) inset;
}

Copier après la connexion

通过 box-shadow: 2px 0 0 rgba(0, 0, 0, 0.3) inset; 这句话可以知道一个内嵌效果.

中间的按钮在不适用字体图标的情况下也必须要用p 旋转来模仿了

.container>.login-button >.icon-login {
    box-sizing: border-box;
    position: relative;
    width: 18px;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
    display: block;
    margin: auto;
}

.container>.login-button >.icon-login::after {
    content: &#39; &#39;;
    box-sizing: border-box;
    position: absolute;
    left: 8px;
    height: 12px;
    width: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    top: -4px;
}

Copier après la connexion

最后是鼠标hover上的放大和阴影效果

.container>.login-button:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3) inset, 0 3px 6px rgba(0, 0, 0, 0.16), 0 5px 11px rgba(0, 0, 0, 0.23)
}

.container>.login-button:hover>.icon-login {
    -ms-transform: scale(1.2);
    =webkit-transform: scale(1.2);
    transform: scale(1.2);
}

Copier après la connexion

至此,所有的css已经结束了,查看效果

CSS3 制作一个material-design 风格登录界面实例

transition bug修复

当我刷新页面或者点击忘记密码的时候,input框就会抖动一下，这个问题只会出现在chrome 浏览器上，firefox 或者edge都不会重现，所以我才这应该是兼容性的问题。在不断尝试中，我发现，只有取消 transition属性，就不会产生抖动。

这个问题困扰了我3天，真实百思不得其姐。

在某度中查询半天，未果。

后来终于在 StackOverFlow 中，搜索chrome input transition 时，终于一个回到让我貌似顿开。

this bug has been reported， adding an script tag somewhere can advoid it.

之后，我在页面尾部添加一个下面节点，终于顺利解决。

<script src="./app.js type=" text/javascript "></script>

Copier après la connexion

在阅读过一些文章之后，总结为

当chrome 的input 默认属性向自定义过度时，因为存在transition，所以会产生抖动。而基本上所有的页面都有script标签，所以这个bug 几乎很难被重现。而我遇到，算是运气好吧。。

至此，这个页面全部内容已经完成。

material-design 很赞，angular-material 是使用 AngularJS 封装了 material-design 的UI 库，很漂亮。不同于 bootstrap的完全扁平化风格，它采用的是盒子堆砌效果，动画效果也比较赞。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多CSS3 制作一个material-design 风格登录界面实例相关文章请关注PHP中文网！

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Créer un exemple d'interface de connexion de style conception matérielle avec CSS3