我正在创建一个网站,但在转换时遇到了问题(我的CSS和HTML)
.part1 {
background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
background-attachment:fixed;
position:relative;
top:185px;
font-family:Yu Gothic UI Light;
font-size:110%;
width:100%;
height:500px;
text-align:right;
padding-right:5%;
padding-left:50%;
vertical-align:center;
box-sizing: border-box;
border-radius:30;
-webkit-border-radius:30;
-moz-border-radius:30;
-o-border-radius:30;
-ms-border-radius:30;
-webkit-transition: -webkit-transform 2s ease-in-out;
-moz-transition: -moz-transform 2s ease-in-out;
-o-transition: -o-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-transition:font-size 0.5s ease-in-out;
-moz-transition:font-size 0.5s ease-in-out;
-o-transition:font-size 0.5s ease-in-out;
transition:font-size 0.5s ease-in-out;
}
.part1:hover {
font-size:130%;
-moz-box-shadow: 4px 4px 10px #888;
-webkit-box-shadow: 4px 4px 10px #888;
box-shadow:4px 4px 6px #888;
-moz-border-radius: 15px;
-webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
<div class="part1">
<p>Nous créons des sites internet pour vous, rapidement et facilement. Pour <span class="blogs">une utilisation personnelle (blogs)</span> ou <span class="official">professionnelle (site officiel de l’entreprise avec un magasin en ligne)</span>, nous vous proposons des services.</p>
</div>
为什么当鼠标移到“ part1”区域时过渡不会开始?以及为什么半径在Chrome中不起作用,而在Edge中起作用!
最佳答案
对于半径,您忘记在边框半径后添加px单位。这是正确的代码:
.part1 {
background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
background-attachment:fixed;
position:relative;
top:185px;
font-family:Yu Gothic UI Light;
font-size:110%;
width:100%;
height:500px;
text-align:right;
padding-right:5%;
padding-left:50%;
vertical-align:center;
box-sizing: border-box;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-o-border-radius:30px;
-ms-border-radius:30px;
-webkit-transition: -webkit-transform 2s ease-in-out;
-moz-transition: -moz-transform 2s ease-in-out;
-o-transition: -o-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-transition:font-size 0.5s ease-in-out;
-moz-transition:font-size 0.5s ease-in-out;
-o-transition:font-size 0.5s ease-in-out;
transition:font-size 0.5s ease-in-out;
}
.part1:hover {
font-size:130%;
-moz-box-shadow: 4px 4px 10px #888;
-webkit-box-shadow: 4px 4px 10px #888;
box-shadow:4px 4px 6px #888;
-moz-border-radius: 15px;
-webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
关于html - 当鼠标移到该区域时,过渡不会开始,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49833209/