Résumé des divers effets d'image obtenus par CSS et CSS3

Selon la compréhension conventionnelle, les effets du traitement des images devraient être les outils du concepteur, et même ces choses devraient être laissées à la conception d'un logiciel tel que PhotoShop. Cependant, avec le développement de la technologie CSS et l'émergence de CSS3, la compatibilité des navigateurs des principaux fabricants s'améliore de plus en plus, et il devient de plus en plus pratique d'utiliser la technologie CSS pour traiter et obtenir divers effets d'images. Diverses propriétés en CSS et CSS3 nous aideront facilement à obtenir divers effets d'image souhaités. Ici, nous parlerons de l'utilisation de CSS et CSS3 pour obtenir divers effets d'image.

Tout d'abord, vous pouvez apprendre des cours gratuits liés au site Web chinois php

1. 《 image CSS dans Tutoriel d'introduction CSS3" Cours du chapitre

2. Regardez l'effet de rotation d'image dans "Le dernier didacticiel vidéo CSS3 de Han Shunping en 2016" et Effet de rotation 3D des images Cours

css, css3 réalise divers effets d'image

1 Partager un code d'effet spécial d'agrandissement d'image HTML+css

Comment agrandir l'image. , ci-dessous Le code vous amène à obtenir cet effet

<style>
*
{
    margin:0px;
    padding:0px;
}
#pHead
{
    display: block;
    height: 220px;
    overflow: hidden;
    width: 350px;
}
#pHead:hover img
{
    transform: scale(1.3);
    transition: all 1s ease 0s;
    -webkit-transform: scale(1.3);
    -webkit-transform: all 1s ease 0s;
}
</style>

2 Mise en page de la liste d'images p+css (1)

La mise en page des images est souvent rencontrée lors de la découpe d'images. sur le front-end, les débutants ne le connaissent peut-être pas. Ensuite, j'utiliserai une liste d'images avec 3 lignes et 3 colonnes comme exemple pour présenter deux solutions de découpe d'images couramment utilisées : display : disposition en blocs en ligne, qui est très simple. Généralement, j'utiliserai la disposition ul li. display:inline-block layout, est similaire à la disposition float, sauf que nous devons remplacer float: left par display: inline-block;

3. Disposition de la liste d'images p+css (2)

Cet article suppose que vous avez déjà lu mon dernier article Disposition de la liste d'images p+css (1), ensuite Voyons implémenter une disposition de liste d'images plus complexe. Il y a des espaces entre les lignes et les colonnes de la liste d'images. Nous utilisons un conteneur p.content pour envelopper le contenu, définissons la largeur de .content à 80 % du conteneur parent et remplissons environ 20 px.

4. Cas de commutation de retournement d'image CSS3 et analyse des attributs importants

Commutation de retournement d'image, lorsque CSS3 n'est pas utilisé, JS est généralement utilisé pour implémenter l'animation simultanément. la largeur et la gauche, ou la hauteur et le haut de l'élément pour simuler l'effet de retournement, et modifiez le src ou l'index z au moment approprié pour réaliser la commutation d'image.

5. Effet de glissement d'image CSS3

.cr-container{
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    border: 20px solid #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
    font-style: italic;
    width: 150px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 32px;
    font-size: 24px;
    float:left;
    position: relative;
    margin-top:350px;
    z-index: 1000;
}
.cr-container label:before{
    content:'';
    width: 34px;
    height: 34px;
    background: rgba(130,195,217,0.9);
    position: absolute;
    left: 50%;
    margin-left: -17px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
    z-index:-1;
}

Questions et réponses connexes

1. 🎜>Icône CSS3

2.

Problème de centrage de l'image CSS ?

3.

gigue de l'image CSS3

[Recommandations associées]

1.

image CSS centrée : image CSS Centrage vers le haut, le bas, la gauche et la droite (centré horizontalement et verticalement)

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!