Question

这是小提琴，请检查一下。图像在转换时间后变大，但没有动画效果。为什么会这样。

我在这里使用这些重复的问题：

//in the model
public class User
{
public string txtUserName { get; set; }
public string txtPassword { get; set; }
public string txtEmailID { get; set; }
public string txtAge { get; set; }
public string txtAdderss { get; set; }
public string txtGender { get; set; }
}

//in the controller
public ActionResult Registration()
{
User userObj = new User(); 
// or you can make a database call and fill the model object 
userObj.txtUserName = "Name";
userObj.txtPassword = "password";
userObj.txtEmailID = "email";
userObj.txtAge = "age";
userObj.txtAdderss = "address";
userObj.txtGender = "gender";
return View(userObj);
}

//in the view
@model Model.User
@using (Html.BeginForm("Registration", "Home"))
{
@Html.Label("User Name: "); @Html.TextBoxFor(model => model.txtUserName);
@Html.Label("Password: "); @Html.TextBoxFor(model => model.txtPassword);
@Html.Label("Email ID: "); @Html.TextBoxFor(model => model.txtEmailID);
@Html.Label("Age: "); @Html.TextBoxFor(model => model.txtAge);
@Html.Label("Adderss: "); @Html.TextBoxFor(model => model.txtAdderss);
@Html.Label("Gender: ");  @Html.TextBoxFor(model => model.txtGender);

<input type="button" value="Update" /> }

Answer 1

Use background-image instead of background.

.outer-disc {
  width: 130px;
  height: 130px;
  background-color: #3F51B5;
  margin: 0 auto;
  border-radius: 100%;
  overflow: hidden;
}
.inner-disc {
  margin: auto;
  margin-top: 15px;
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 100%;
}
.inner-disc .icon {
  width: 64px;
  height: 64px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  opacity: 0.8;
  transition: background-size 2s ease-in;
  -moz-transition: background-size 2s ease-in;
  -ms-transition: background-size 2s ease-in;
  -o-transition: background-size 2s ease-in;
  -webkit-transition: background-size 2s ease-in;
}
.inner-disc .icon:hover {
  background-size: 70px;
}
.inner-disc .customer-support {
  background-image: url("http://placehold.it/350x150");
  width: 100%;
  height: 100%;
}

<li class="jstransitiononservices">
  <div class='outer-disc'>
    <div class='inner-disc'>
      <div class='icon customer-support'></div>
    </div>
  </div>
  <div class="services-text">
    <h3>Customer Support</h3>
    <h5>Incredibly Amazing</h5>
  </div>
</li>

Working Fiddle

Answer 2

I have fixed you the problem with a cleaner code

Working Fiddle

div{
  width: 130px;
  height: 130px;
  background:red;
  border-radius: 100px;
  border: 10px blue solid;
  background: url("http://umerjaved1.base.pk/img/customersupport.png") center center no-repeat;
  background-size: 70px 70px;
  transition: all 1s ease; 
}
div:hover{
  background-size: 80px 80px;   
}

<div></div>

具有转换的background-size属性在png上不起作用

2 个答案: