设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 有偿！！！HTML中画个圆，并在其中插入图片，鼠标悬停此 ...
返回列表 发新帖
查看: 4118|回复: 4

[已解决]有偿！！！HTML中画个圆，并在其中插入图片，鼠标悬停此处，圆外边框变色

[复制链接]
闻思不懂
发表于 2017-9-1 17:06:31 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
详细见图：


有偿啊 兄弟们  
最佳答案
月排行榜 / 总排行榜
不二如是
2017-9-18 23:02:56

在实现你需求基础上，稍微送你几个福利

9月-18-2017 23-02-30.gif


代码包： Ex4-鼠标悬停特效.zip (18.4 KB, 下载次数: 2)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>使用特效</title>
  7. <style>
  8. * {
  9.         margin:0;
  10.         padding:0;
  11.         list-style:none;
  12. }

  14. .fishc {
  15.         width: 220px;
  16.         height: 220px;
  17.         margin: 0 auto;
  18.         background: no-repeat url("images/shenshou.png") left top;
  19.         -webkit-background-size: 220px 220px;
  20.         -moz-background-size: 220px 220px;
  21.         background-size: 220px 220px;
  22.         -webkit-border-radius: 110px;
  23.         border-radius: 110px;
  24.         -webkit-transition: -webkit-transform 2s ease-out;
  25.         -moz-transition: -moz-transform 2s ease-out;
  26.         -o-transition: -o-transform 2s ease-out;
  27.         -ms-transition: -ms-transform 2s ease-out;

  29.         border:5px solid blue;
  30.         border-radius：50%;
  31. }




  36. .fishc:hover {
  37.         -webkit-transform: rotateZ(360deg);
  38.         -moz-transform: rotateZ(360deg);
  39.         -o-transform: rotateZ(360deg);
  40.         -ms-transform: rotateZ(360deg);
  41.         transform: rotateZ(360deg);


  44.         border:5px solid red;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="fishc"></div>
  50. </body>
  51. </html>
复制代码
119.png
QQ图片20170901160816.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

alltolove
发表于 2017-9-1 18:53:40 | 显示全部楼层
这直接用css就能搞定啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

sphacker
发表于 2017-9-1 22:37:44 | 显示全部楼层
border:2px solid red;
border-radius：50%;
E:hover {
border:2px solid pink;
}
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

hiwch
发表于 2017-9-14 10:47:57 | 显示全部楼层
css:hover应该可以的查找一下css的伪类
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2017-9-18 23:02:56 | 显示全部楼层    本楼为最佳答案   

在实现你需求基础上，稍微送你几个福利

9月-18-2017 23-02-30.gif


代码包： Ex4-鼠标悬停特效.zip (18.4 KB, 下载次数: 2)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>使用特效</title>
  7. <style>
  8. * {
  9.         margin:0;
  10.         padding:0;
  11.         list-style:none;
  12. }

  14. .fishc {
  15.         width: 220px;
  16.         height: 220px;
  17.         margin: 0 auto;
  18.         background: no-repeat url("images/shenshou.png") left top;
  19.         -webkit-background-size: 220px 220px;
  20.         -moz-background-size: 220px 220px;
  21.         background-size: 220px 220px;
  22.         -webkit-border-radius: 110px;
  23.         border-radius: 110px;
  24.         -webkit-transition: -webkit-transform 2s ease-out;
  25.         -moz-transition: -moz-transform 2s ease-out;
  26.         -o-transition: -o-transform 2s ease-out;
  27.         -ms-transition: -ms-transform 2s ease-out;

  29.         border:5px solid blue;
  30.         border-radius：50%;
  31. }




  36. .fishc:hover {
  37.         -webkit-transform: rotateZ(360deg);
  38.         -moz-transform: rotateZ(360deg);
  39.         -o-transform: rotateZ(360deg);
  40.         -ms-transform: rotateZ(360deg);
  41.         transform: rotateZ(360deg);


  44.         border:5px solid red;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="fishc"></div>
  50. </body>
  51. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 05:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表