我正在创建一个网站,但在转换时遇到了问题(我的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/

10-12 06:54
查看更多