Heim > Artikel > Web-Frontend > Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird
Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird
- php中世界最好的语言Original
- 2018-03-21 09:54:343055Durchsuche
Dieses Mal zeige ich Ihnen den dynamischen CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird. Was sind die Vorsichtsmaßnahmen, um den dynamischen CSS3-Eingabeaufforderungseffekt zu implementieren? Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.
Dies ist mein erster Versuch, einen Blog zu schreiben. Ich hoffe, Sie können mich korrigieren, wenn ich Fehler oder Fehler habe. Heute schreibe ich hauptsächlich über die Verwendung von Transformation, einem wichtigen Attribut von CSS3 stammen aus früheren MOOCs. Ich habe es selbst getippt, nachdem ich online einen Kurs bei einem bestimmten Lehrer besucht hatte.
1. Einleitung
1.
transformieren bedeutet: verändern, deformieren...; transformieren
2. Was sind die gemeinsamen Attribute von transformieren?
Zu den Attributen der Transformation gehören: Translate()/Rotate() / Skew() / Scale() /, und sie sind in x bzw. y unterteilt, wie zum Beispiel: rotatex() und rotatey (), Und so weiter.
transform:translate()
Bedeutung: Änderung, Verschiebung; zum Beispiel 20 Pixel nach rechts verschieben, 50 Pixel nach oben verschieben (negative Werte für links und unten) Beispiele sind wie folgt folgt
.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}
transform:rotate()
Bedeutung: Drehung; „Grad“ ist beispielsweise der Grad der Drehung wie folgt
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
transform: skew()
Bedeutung: skew Beispiele sind wie folgt
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()
Bedeutung : Verhältnis 1,8 bedeutet, dass es sich um ein ganzzahliges Vielfaches handelt, z. B. muss die Vergrößerung 3 als 3,0 geschrieben werden transform
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}
demo01 Beschreibung: Nachdem die Maus hineinbewegt wurde, bewegt sich das Bild nach links und der Inhalt wird der Reihe nach eingefügt
Schritte:
1. Schreiben Sie den HTML-Code und legen Sie den ursprünglichen Stil des Inhalts und der Bilder über CSS fest (der Textinhalt befindet sich auf dem Bild);
2. Verwenden Sie das Transformationsattribut, um den Beschreibungsinhalt zu verschieben nach links, bis es nicht mehr sichtbar ist (transform:translate(-600px,0););
3. Legen Sie als Nächstes den Stil fest, wenn sich die Maus bewegt (:hover). Inhalt um einen Abstand von 0 nach links (transform:translate(0,0)) wird hier hauptsächlich verwendet, um die drei Inhalte um unterschiedliche Zeiten zu verzögern, um den Effekt der Eingabe nacheinander zu erzeugen.
demo02 Beschreibung: Nach dem Hineinbewegen der Maus wird das Bild unscharf und das Rechteck dreht sich von außerhalb des Bildes in die angegebene Position im Bild. Der Text fliegt von rechts herüber wird nach und nach angezeigt
/*图片左移 文字依次进入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}
.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}
<!--移动--> <figure class="test1"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> <p>这里是图片的相关描述内容</p> <p>这里是图片的相关描述内容</p> </figcaption> </figure>Schritte:
1. Schreiben Sie den HTML-Code und legen Sie den anfänglichen Stil des Inhalts und des Bildes über CSS fest (der rechteckige Text befindet sich auf der Bild);
2. Übergeben Sie das Rechteck. Das Transformationsattribut wird verschoben, bis es oben unsichtbar ist, und der Drehwinkel wird auf 0 gesetzt
3. Als nächstes legen Sie den Stil fest, wenn sich die Maus hineinbewegt (:hover). Setzen Sie die Verschiebung auf 0 und drehen Sie sie um 360 Grad >demo03 Hinweis: Die verzerrten Wörter werden nach dem Hineinbewegen der Maus normal angezeigt (da sie im Beispiel um 90 Grad verzerrt sind, sodass visuell kein Text zu sehen ist)
Schritte:/*旋转*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}
<!--旋转--> <figure class="test2"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>飞来飞去</p> <p></p> </figcaption> </figure>1. Schreiben Sie den HTML-Code und legen Sie den ursprünglichen Stil des Inhalts und der Bilder über CSS fest;2. Verzerren Sie den Textinhalt um 90 Grad. ;
3. Legen Sie als Nächstes den Stil fest, wenn sich die Maus hineinbewegt (:hover) und verzerren Sie den Textinhalt um 0 Grad Beschreibung: Nachdem die Maus hineinbewegt wurde, werden das Rechteck und der Text angezeigt und verkleinert, und das Bild wird ebenfalls verkleinert
3.接下来设置鼠标移入时(:hover)的样式 内容放大倍数变成1也就是原始大小 图片缩小 透明度都变成1;
/*缩放*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption p{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}
<!--缩放--> <figure class="test4"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> <p></p> </figcaption> </figure>
demo05 说明：鼠标移入后 内容显示 并出现井字格
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（井字就是两个矩形的重叠）
2.将两个矩形缩小0.8 并设置透明度为0 内容也设置透明度为0；
3.接下来设置鼠标移入时(:hover)的样式 内容透明度设置为1 设置矩形缩放为1 这里利用到transition属性 主要是为了缩小放大过程逐渐变化;
/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption p{position: absolute;}
.test5 figcaption p.p01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption p.p02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover p.p02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}
<!--井字格--> <figure class="test5"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> <p class="p01"></p> <p class="p02"></p> </figcaption> </figure>
以上是几个简单的小例子，之所以用figure和figcaption标签，主要是标签的语义化，截取动态图用到的是GifCam第一次用 挺好用的 很可爱 哈哈。
figure标签主要是用于规定独立的流内容（图片，图表，照片，代码等）而figcaption与figure标签配套使用，主要用于定义figure元素的标题
哦，对了，由于这几个例子写在一个html里面 所以提取出了部分公用的样式
body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,p{transition: all 0.35s}
@media screen and (max-width: 600px) {
figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
figure{width: 33.33%;}
}
总结：
之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonDynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!