Maison >interface Web >Tutoriel H5 >Explication détaillée du partage d'exemples de code à l'aide de HTML5+css3 pour obtenir des cœurs en cours d'exécution et des effets de goutte d'eau dynamiques
Explication détaillée du partage d'exemples de code à l'aide de HTML5+css3 pour obtenir des cœurs en cours d'exécution et des effets de goutte d'eau dynamiques
- 黄舟original
- 2017-03-22 15:33:403445parcourir
Le vent souffle, les nuages volent et les guerriers marchent dans toutes les directions HTML5+css3, on ne peut pas le faire sans apprendre ! Je fais du développement Web depuis plusieurs années et j'ai été témoin de l'essor et du déclin de nombreuses langues. En fait, la chose la plus difficile en tant que programmeur est de continuer à rattraper chaque jour les nouveaux frameworks et langages des grandes entreprises (les premiers à en faire les frais sont les programmeurs .net. Bien sûr, malheureusement, je suis un membre .net. Cela vient de se produire. mvc 4.0 est parfaitement compris et maintenant la version 5.0 est disponible.) Bien sûr, se plaindre ne peut résoudre aucun problème, et se plaindre ne peut pas agrandir votre portefeuille. Alors, programmeurs, continuez à apprendre.
L'ère html5+css3, appelée ère 3+5 (3+5 a été inventé par moi, sans aucun fondement - -) est évidemment arrivée massivement le 29 octobre 2014, dans le monde entier. Web Alliance a annoncé : Après près de 8 ans de travail acharné, la spécification standard a finalement été finalisée. Cela signifie que nous devons réapprendre rapidement, sinon nous redeviendrons Ultraman. En fait, j’ai commencé à entrer en contact avec HTML5 il y a longtemps.
Quand j'écris ce blog, je ne veux pas parler ici de la différence entre html5 et html4, je pense que beaucoup de gens ont déjà fait ce travail. Je viens d'en faire une démonstration ici en fonction de mes propres passe-temps et besoins du projet.
Effet de code : ps : Si l'effet goutte d'eau ne peut pas être affiché, vous pouvez télécharger le code source ci-dessous.
Partie HTML :
<!--爱心-->
<div class="heart" id="heart"></div>
<!--左边的箭头-->
<span class="arrow arrow-down"></span>
<!--右边的箭头-->
<span class="arrow arrow-down" style="margin-left:152px;"></span>
<!--水滴效果-->
<div class="">
<span class="water" style="margin-left:10px;"></span>
<span class="water" style="margin-left:200px;"></span>
<span class="water" style="margin-left:50px;"></span>
<!--原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou-->
<span class="water" style="margin-left:120px;"></span>
<span class="water" style="margin-left:30px;"></span>
<span class="water" style="margin-left:170px;"></span>
<span class="water" style="margin-left:200px;"></span>
</div>partie css : ps : j'ai ajouté des commentaires sur certains attributs principaux en CSS3, si vous ne comprenez pas Vous pouvez laisser un message. De plus, une grande partie de ce contenu (semblable à "Le texte original vient de...") a été ajoutée au code. Je pense que tout le monde comprend que cela vise à empêcher l'exploration malveillante et le plagiat ! Soutien authentique :)
<style>
/*爱心*/
#heart {
position: relative;
width: 100px;
height: 90px;
margin-left: 200px;
transform: rotate3d(0.7, 0.5, 0.7, 45deg);
-ms-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* IE 9 */
-moz-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Firefox */
-webkit-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Safari and Chrome */
-o-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Opera */
/*这里需要插入一段小广告了，不得不说html5+css3实现了各个浏览器更好的兼容模式，这给开发者减少了很多痛苦*/
-webkit-transition-duration: 250ms;
-webkit-transition-function: ease-out;
-ms-transition-duration: 250ms;
-ms-transition-function: ease-out;
-moz-transition-duration: 250ms;
-moz-transition-function: ease-out;
-o-transition-duration: 250ms;
-o-transition-function: ease-out;
-webkit-user-select: none;
/***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
opacity: 1;
animation: myHeart 5s;
-moz-animation: myHeart 5s; /* Firefox */
-webkit-animation: myHeart 5s; /* Safari 和 Chrome */
-o-animation: myHeart 5s; /* Opera */
-webkit-animation-name: myHeart;
-ms-animation-name: myHeart;
animation-name: myHeart;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
/*nimation-iteration-count: 属性定义动画的播放次数 infinite为无限次播放*/
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
/*animation-dela: 属性定义动画何时开始*/
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
/*园友们可以注意: 这里是实现颜色渐变效果的地方*/
background: radial-gradient(#f5ebeb,#f77979,red);
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
/***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
transform: rotate(45deg);
/*transform-origin：属性允许您改变被转换元素的位置*/
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#heart:hover {
-webkit-transform: scale(1.2);
opacity: 0.9;
}
/*这里是每执行到一个百分比时，所执行的效果，其实在这里可以做很多事情*/
@keyframes myHeart {
0% {
transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
}
10% {
transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
}
20% {
transform: scale(0.2);
opacity: 0.2;
}
30% {
transform: scale(0.3);
opacity: 0.3;
}
40% {
transform: scale(0.4);
opacity: 0.4;
}
50% {
transform: scale(0.5);
opacity: 0.5;
}
60% {
transform: scale(0.6);
opacity: 0.6;
}
70% {
transform: scale(0.7);
opacity: 0.7;
}
80% {
transform: scale(0.8);
opacity: 0.8;
}
90% {
transform: scale(0.9);
opacity: 0.9;
}
100% {
transform: scale(1.0);
opacity: 1.0;
}
}
@-moz-keyframes myHeart /* Firefox */
{
0% {
-moz-transform: scale(0.05);
width: 10px;
height: 10px;
/***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
opacity: 0.05;
margin-left: 20px;
}
10% {
-moz-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
}
20% {
-moz-transform: scale(0.2);
opacity: 0.2;
}
30% {
-moz-transform: scale(0.3);
opacity: 0.3;
}
40% {
-moz-transform: scale(0.4);
opacity: 0.4;
}
50% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
60% {
-moz-transform: scale(0.6);
opacity: 0.6;
}
70% {
-moz-transform: scale(0.7);
opacity: 0.7;
}
80% {
-moz-transform: scale(0.8);
opacity: 0.8;
}
90% {
-moz-transform: scale(0.9);
opacity: 0.9;
}
100% {
-moz-transform: scale(1.0);
opacity: 1.0;
}
}
@-webkit-keyframes myHeart /* Safari 和 Chrome */
{
0% {
-webkit-transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
}
10% {
-webkit-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
}
20% {
-webkit-transform: scale(0.2);
opacity: 0.2;
}
30% {
-webkit-transform: scale(0.3);
opacity: 0.3;
}
40% {
-webkit-transform: scale(0.4);
opacity: 0.4;
}
50% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
60% {
-webkit-transform: scale(0.6);
opacity: 0.6;
}
70% {
-webkit-transform: scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: scale(0.8);
opacity: 0.8;
}
90% {
-webkit-transform: scale(0.9);
opacity: 0.9;
}
100% {
-webkit-transform: scale(1.0);
opacity: 1.0;
}
}
@-o-keyframes myHeart /* Opera */
{
0% {
-o-transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
}
10% {
-o-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
}
20% {
-o-transform: scale(0.2);
opacity: 0.2;
}
30% {
-o-transform: scale(0.3);
opacity: 0.3;
}
40% {
-o-transform: scale(0.4);
opacity: 0.4;
}
50% {
-o-transform: scale(0.5);
opacity: 0.5;
}
60% {
-o-transform: scale(0.6);
opacity: 0.6;
}
70% {
-o-transform: scale(0.7);
opacity: 0.7;
}
80% {
-o-transform: scale(0.8);
opacity: 0.8;
}
90% {
-o-transform: scale(0.9);
opacity: 0.9;
}
100% {
-o-transform: scale(1.0);
opacity: 1.0;
}
}
.arrow {
width: 40px;
height: 40px;
position: relative;
display: inline-block;
margin: 10px 10px;
}
.arrow:before, .arrow:after {
content: '';
border-color: transparent;
border-style: solid;
position: absolute;
}
.arrow-down:before {
border: none;
background-color: red;
height: 50%;
width: 30%;
top: 0;
left: 35%;
}
.arrow-down:after {
left: 0;
top: 50%;
border-width: 20px 20px;
border-top-color: red;
}
.water {
height: 40px;
width: 40px;
display: block;
position: relative;
}
.water:before {
content: ' ';
height: 26px;
width: 26px;
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
line-height: 26px;
background: radial-gradient(#dbf5f5,#77f5f5,#21f1f1);
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
color: #0defef;
text-align: center;
}
.water:after {
content: '';
height: 0px;
width: 0px;
position: absolute;
bottom: 2px;
left: 3px;
border: 10px transparent solid;
border-top-color: #0defef;
border-width: 15px 10px 0px 10px;
}
</style>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!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur