css中hover变大效果(2021年东京奥运疫情)
生活随笔
收集整理的這篇文章主要介紹了
css中hover变大效果(2021年东京奥运疫情)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼：
<p id="body_img"> ?? ?<img src="img/11.jpg" alt=""> </p>
css代碼：
<style type="text/css">
?? ??? ?*{
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?#body_img img{
?? ??? ??? ?width: 600px;
?? ??? ??? ?height: 320px;
?? ??? ??? ?cursor: pointer;
?? ??? ??? ?/* 手動鼠標 */
?? ??? ??? ?transition: 1s;
?? ??? ??? ?/* 過度時間 */
?? ??? ?}
?? ??? ?#body_img{
?? ??? ??? ?width: 600px;
?? ??? ??? ?height: 320px;
?? ??? ??? ?overflow: hidden;
?? ??? ??? ?/* 當圖片變大超出了外包p后隱藏 */
?? ??? ?}
?? ??? ?#body_img:hover img{
?? ??? ??? ?transition: 1s;
?? ??? ??? ?/* 過度時間 */
?? ??? ??? ?transform: scale(1.1);
?? ??? ??? ?/* 變形一比一放大 */
?? ??? ?}
</style>
思路：先設置一個p包含一張圖片設置大小，溢出隱藏（當滑動圖片上面后變大隱藏）給圖片設置手動鼠標和過度時間。當鼠標滑動p上面讓圖片變形成一比一放大，外加過度時間
CSS3實現鼠標移動到圖片上圖片變大（緩慢變大，有過渡效果，放大的過程是有動畫過渡的，這個過渡的時間可以自定義）
CSS3的transform:scale()可以實現按比例放大或者縮小功能。
CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。
效果如下圖所示：
1、當未鼠標未放到圖片上的效果：
2、當鼠標放到圖片上后(放大的過程是有動畫過渡的，這個過渡的時間可以自定義)：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
p img{
cursor: pointer;
transition: all 0.6s;
}
p img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<p>
<img src="img/focus.png" />
</p>
</body>
</html>
其中：
transition: all 0.6s;表示所有的屬性變化在0.6s的時間段內完成。
transform: scale(1.4);表示在鼠標放到圖片上的時候圖片按比例放大1.4倍。
到此這篇關于css中hover變大效果的文章就介紹到這了,更多相關css hover放大內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的css中hover变大效果(2021年东京奥运疫情)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么北极熊那么胖却很健康？
- 下一篇： 轻松搞定！打开雅马哈音箱蓝牙，手机秒变音