Maison > interface Web > tutoriel CSS > le corps du texte

Implémenter des lignes ondulées et des cubes avec CSS (avec code)

云罗郡主
Libérer: 2018-10-12 14:13:35
avant
3611 Les gens l'ont consulté

Le contenu de cet article concerne la réalisation de lignes ondulées et de cubes avec CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Un projet récent a réussi à dessiner un effet de ligne ondulée. Ici, il est réalisé en utilisant un dégradé linéaire, c'est-à-dire en dessinant un cercle, puis en utilisant la couleur d'arrière-plan pour couvrir une partie du cercle Utilisation de la perspective d'attribut CSS3 Ajouter une rotation pour réaliser un cube 1.css pour implémenter des lignes ondulées

  • html

<p class="card-list">
    <p class="wave-container">
        <p class="wave"></p>
        <!-- 实现波浪线的p -->
        <p class="wave-left-decorate"></p>
        <p class="wave-right-decorate"></p>
    </p>
</p>
Copier après la connexion
  • css

.card-list{
    display: flex;
    padding: 20px;
    width: 100%;
}
.wave-container{
    position: relative;
    margin-right: 28px;
    width: 20%;
}
.wave{
    width: 100%;
    height: 90px;
    background: linear-gradient(to right, rgb(85, 181, 255), rgb(207, 224, 232));
}
/* 波浪线 */
.wave-left-decorate{
    position: absolute;
    top: -4px;
    width: 90px;
    height: 8px;
    transform-origin: center left;
    transform: rotate(90deg);
    background: radial-gradient(circle, #fff 2px, #fff, transparent 3px, transparent 4px, transparent 4px, transparent);
    background-size: 8px 8px;
}
Copier après la connexion
  • Rendu

2. Implémenter le cubeImplémenter des lignes ondulées et des cubes avec CSS (avec code)

  • fichier html

<p class="content">
    <p class="leftContent">
        <p class="leftContentItem">
            <p class="itemImg">
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
                <img class="leftContentImg" src="images/rabbit.jpg" alt=""/>
            </p>
        </p>
    </p>
</p>
Copier après la connexion
  • fichier CSS

.content{
    position: relative;
    display: flex;
    margin: 0 auto;
    padding-top: 50px;
    width: 1200px;
    height: 380px;
    background: url(../images/bg2.jpg) no-repeat;
    background-size: 1200px 100%;
}
.content .leftContent{
    margin-right: 25px;
    padding-left: 45px;
    padding-bottom: 30px;
    box-sizing: border-box;
}
/* 旋转的图片 */
.content .leftContent .leftContentItem{
    width: 350px;
    height: 350px;
    /* 设置景深 */
    perspective: 1000px;
    /* 设置背景颜色在中间为椭圆形 */
    /*background: radial-gradient(ellipse at center, #430d6d 0%, #000 100%);*/
}
.leftContent .leftContentItem .itemImg{
    position: absolute;
    left: 20%;
    top: 20%;
    width: 200px;
    height: 200px;
    /* 实现3D呈现 */
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-20deg);
    -webkit-animation: 6s imgRotate linear infinite;
    -o-animation: 6s imgRotate linear infinite;
    animation: 6s imgRotate linear infinite;
}
.leftContent .leftContentItem .itemImg *{
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 25px rgba(0, 128, 0, .4);
}
.leftContentItem .itemImg .leftContentImg{
    position: absolute;
    width: 100%;
    height: 100%;
}
/* 分别对各个面进行旋转、平移操作 */
.leftContentItem .itemImg .leftContentImg:nth-child(1){
    transform: translateZ(100px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(2){
    transform: rotateX(180deg) translateZ(100px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(3){
    transform: rotateY(-90deg) translateZ(100px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(4){
    transform: rotateY(90deg) translateZ(100px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(5){
    transform: rotateX(90deg) translateZ(100px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(6){
    transform: rotateX(-90deg) translateZ(100px);
}
@-webkit-keyframes imgRotate {
    from{
        transform: translateZ(-100px) rotateX(0) rotateY(0);
    }
    to{
        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
    }
}
Copier après la connexion
  • Rendu

    Implémenter des lignes ondulées et des cubes avec CSS (avec code)

  • L'essentiel est de définir la profondeur de champ, puis de faire pivoter et de traduire chaque surface

Cet article donne Le contenu que vous avez apporté concerne la réalisation de lignes ondulées et de cubes en CSS (avec du code). Les amis dans le besoin peuvent se référer au

Tutoriel vidéo CSS3. j'espère que cela vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal