验证中...
鼠标在图片上悬停时旋转并放大图片
Raw Copy
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>特效demo</title>
<style>
body{
/* 背景颜色 */
background: gray;
}
div{
/* 设置宽高 */
width: 200px;
height: 200px;
/* 设置背景图片 */
background-image: url(https://tpc.googlesyndication.com/simgad/9221216781670028002?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qkXfqToEs1uiWJASwg93zHWub0SsQ);
/* 设置背景尺寸 */
background-size:200px 200px;
border: 10px solid rosybrown;
/* 设置底部边框 同时有
上边框宽度
border-top-width: ;
左边框宽度
border-left-width: ;
右边框宽度
border-right-width: ; */
/* bottom 底部 */
border-bottom-width:40px ;
/*相对定位 */
position: relative;
/* 相对原来位置移动200像素 */
top: 200px;
/* 相对原来位置移动200像素 */
left: 200px;
/* transform改变rotate旋转,45deg,顺时针旋转45度 */
transform: rotate(45deg);
/* 动画在两秒完成 */
transition: transform 2s linear;
}
/* 鼠标悬停css */
div:hover{
/* 鼠标悬停旋转1400度,并放大1.5倍 */
transform: rotate(1440deg) /*放大1.5倍*/ scale(1.5);
/* css过渡动画 2秒 匀速旋转 */
transition: transform 2s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025