Maison >interface Web >tutoriel CSS >Survol du bouton CSS3 pour obtenir un effet d'ouverture
Survol du bouton CSS3 pour obtenir un effet d'ouverture
- 高洛峰original
- 2017-03-02 15:40:182426parcourir
Cet article utilise un exemple de code pour présenter comment utiliser CSS3 pour obtenir l'effet d'ouverture de suspension des boutons et de la souris. Les amis dans le besoin peuvent s'y référer.
1. Points de connaissances liés au HTML
Le HTML (Hypertext Markup Language) est le cœur des pages Web. N'ayez pas peur, le HTML est facile. apprendre. C'est beaucoup au début. N'oubliez pas de pratiquer davantage, mais au final, vous devez encore étudier en profondeur par vous-même. Il est rapide de commencer simplement, mais bien apprendre le HTML est la condition de base pour devenir développeur Web. .
2. Points de connaissances liés à CSS3
Améliorez l'efficacité du travail en utilisant CSS ! Dans notre didacticiel CSS, nous avons appris à utiliser CSS pour contrôler le style et la mise en page de plusieurs pages Web en même temps. Comment habiller une page Web avec un beau style nécessite l'utilisation de styles. doit maîtriser.
3. Entrez directement le code
Le code est le suivant :
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<!--当前页面的三要素-->
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="吉米">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS3按钮光圈悬浮效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";background-color:#000}
ul {
margin: 0 auto;
text-align: center;
margin-top: 80px;
}
li {
display: inline-block;
list-style: none;
margin-right: 50px;
text-align: center;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.button {
position: relative;
font-family: futura, helvetica, sans;
letter-spacing: 1px;
text-transform: uppercase;
background-color: #ffeded;
display: inline-block;
line-height: 60px;
width: 55px;
height: 55px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 60%;
text-decoration: none;
color: #c40000;
-moz-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
-o-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
-webkit-transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
transition: all 275ms cubic-bezier(0.53, -0.67, 0.73, 0.74);
}
.button:hover {
background-color: #fff;
-moz-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
}
.button:hover .pus {
opacity: 1;
border: 1px solid #A8CFCB;
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-webkit-transform: scale(1.15);
transform: scale(1.15);
-moz-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);
}
.pus {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
opacity: 0;
background: none;
border: 1px solid #C56089;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
-o-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
-webkit-transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
transition: all 0.3s cubic-bezier(0.53, -0.67, 0.79, 0.74);
}
</style>
</head>
<body>
<ul>
<li><a href="#">预约<span></span></a></li>
<li><a href="#">购买<span></span></a></li>
<li><a href="#">支付<span></span></a></li>
</ul>
</body>
</html>Résumé :
Parfois, les gens doivent continuer à faire des recherches et des découvertes avant de pouvoir ressentir le plaisir de la seconde suivante. Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile aux études ou au travail de chacun.
Pour plus d'articles sur le survol du bouton CSS3 de la souris pour obtenir un effet d'ouverture, veuillez faire attention au site Web PHP chinois !