Có cách nào để làm chậm hiệu ứng di chuột không? Tôi có hiệu ứng di chuột trên trang web của mình (đã xóa) hiển thị văn bản khi di chuột qua các hình ảnh. Tôi muốn làm chậm hiệu ứng một chút. Đó là một tad jarring nhanh như thế nào hình ảnh chuyển sang.Có cách nào để làm chậm hiệu ứng di chuột không?
Tôi làm như thế nào?
Bạn có thể thêm hiệu ứng chuyển tiếp css3:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
Tính năng này có hoạt động với '*: hover' không? – xameeramir
Nó phụ thuộc vào cách bạn đang hiển thị văn bản. Nếu bạn đang thay đổi thuộc tính CSS, bạn có thể thực hiện việc này với CSS3 transitions. Dưới đây là một ví dụ.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Edit: David Thomas đã nói với tôi rằng bạn không thể chan ge màn hình với các hiệu ứng chuyển tiếp. Tôi đã cập nhật ở trên để sử dụng độ mờ đục.
Bạn không thể 'chuyển đổi' giữa trạng thái 'display'; chắc chắn không phải giữa 'display: block' và' display: none'. Nội dung chỉ đơn giản là nhảy, và sau đó, có lẽ, animate. –
@DavidThomas, cảm ơn những người đứng đầu. Tôi không biết điều đó. Có lẽ nó có thể được thực hiện với độ mờ đục? Tôi đã chỉnh sửa câu trả lời của mình để phản ánh điều đó. – Zhihao
Có, bạn có thể chuyển đổi 'độ mờ'. Tôi thấy rằng một lựa chọn tốt hơn ở đây. – BoltClock
Nếu bạn muốn, bạn có thể sử dụng jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn ([thời gian] [, callback])
thời gian chuỗi hoặc số xác định bao lâu hoạt ảnh sẽ chạy.
gọi lại để gọi khi hoạt ảnh hoàn tất.
Tôi biết điều này hơi muộn nhưng nhìn vào hoạt ảnh CSS3. Tôi sử dụng một hình động trên một trong những màn hình tải của Garry's Mod.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>Tôi biết nó không hoàn toàn là kết quả tìm kiếm của bạn cho nhưng tôi chắc chắn rằng bạn và những người khác có thể tìm thấy hữu ích này.
là một tùy chọn để bạn sử dụng jQuery? –
http://cherne.net/brian/resources/jquery.hoverIntent.html –