“小尼姑年方二八,正青春,被师傅削去了头发。我本是女娇娥,又不是男儿郎... ”
——《霸王别姬》
目录
一、前言
在我们的 html 学习过程中,会用到并见识到各种各样的实例,以及各种插件,并且有些 web 网页中的小插件又非常的吸引眼球,提升 web 网页的层次,显得非常好看并且非常使用。在本系列中,我将持续为大家更新有趣且使用的 html 实例,放在 web 网页中,凸显效果。
特点一:都是符合学校或者学生考试期末作业的水平,都是最基础的简单的 html 样例,提升web网页整理效果,都是 div+css 框架原创代码写的,内容包括 js / css,也包含 视频+音乐+flash 等元素的插入…
特点二:内容包括多种丰富类型,例如: 倒计时,404页面,Blog顶置卡片设计 (css+js),To-Do-List设计 (css+js),火柴盒动画 (css),日历便签设计 (css+js),搜索框设计 (css+js),卡片式图片展示 (css+js),咖啡选择 (css+js)……
可满足多种需求,欢迎大家下载!
二、往期作品回顾
有趣的HTML实例(一) 倒计时_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(二) 404页面_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(三) 加载页面动画_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(四) 旋转菜单_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(五) 加载页面动画Ⅱ(css)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(六) 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(七) 注册登录界面Ⅱ(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(八) 一个很有趣的动态背景(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(九) 文本变形动画(css+js)_Enovo_飞鱼的博客-CSDN博客
三、作品介绍
1.作品简介 :HTML响应式布局网站源码!兼容 pc 以及移动端,内涵 js 交互,ui 交互。直接点击即可查看效果!
2.作品编辑:个人主页网页设计题材,代码为 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用)。
3.作品技术:使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。
四、本期代码介绍
一款简单的 HTML+ CSS+JS 悬停时有旋转效果的图标(css+js) 实例
1、HTML
2、CSS
3、JS
4、舒适的画面感
5、鼠标悬停有旋转效果
可通用多种不同情景,放置点击图标,进行页面跳转等
五、效果显示
可使用在多种情景下,作为点击按钮使用,提升层次轮廓效果、美化界面——>
根据需求修改
六、编码实现
显示完整代码
注意路径(⊙o⊙)?
o(* ̄▽ ̄*)ブ
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enovo悬停时有旋转效果的图标</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 用到的icon是源于Ionicons官网的,也可以使用FontAwesome图标 -->
<!-- 如果官网打不开,可以查询https://www.jianshu.com/p/a69829206ac5?_u_u_u=0.954503959603624 -->
<a href="#" class="icon green ion-ios-star-outline"></a>
<a href="#" class="icon blue ion-ios-list-outline"></a>
<a href="#" class="icon navy ion-ios-chatboxes-outline"></a>
<a href="#" class="icon yellow ion-ios-home-outline"></a>
<a href="#" class="icon red ion-ios-pie-outline"></a>
<a href="#" class="icon ion-ios-gear-outline"></a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
style.css
/* 对应分组
.green
.blue
.navy
.yellow
.red
*/
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.icon {
position: relative;
font-size: 40px;
color: #ffffff;
width: 75px;
margin: 40px;
height: 75px;
line-height: 75px;
display: inline-block;
text-align: center;
border-radius: 50%;
}
.icon * {
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.icon:before,
.icon:after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.icon:before {
color: #ffffff;
}
.icon:after {
background: #333333;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 4px solid #000000;
content: '';
z-index: -1;
border-radius: 50%;
box-sizing: border-box;
}
.icon.blue:after {
border-color: #2980b9;
background-color: #123851;
}
.icon.yellow:after {
border-color: #f39c12;
background-color: #7f5006;
}
.icon.green:after {
border-color: #27ae60;
background-color: #104627;
}
.icon.navy:after {
border-color: #34495e;
background-color: #1b2029;
}
.icon.red:after {
border-color: #c0392b;
background-color: #581a14;
}
.icon:hover:after,
.icon.hover:after {
border-color: transparent;
animation: icon cubic-bezier(0.18, 0.14, 0.29, 1) 1s;
border-right-color: #000000;
border-left-color: #000000;
border-top-color: #ffffff !important;
border-bottom-color: #ffffff !important;
}
.icon:hover.blue,
.icon.hover.blue {
color: #2980b9;
}
.icon:hover.blue:after,
.icon.hover.blue:after {
border-right-color: #2980b9;
border-left-color: #2980b9;
}
.icon:hover.yellow,
.icon.hover.yellow {
color: #f39c12;
}
.icon:hover.yellow:after,
.icon.hover.yellow:after {
border-right-color: #f39c12;
border-left-color: #f39c12;
}
.icon:hover.green,
.icon.hover.green {
color: #27ae60;
}
.icon:hover.green:after,
.icon.hover.green:after {
border-right-color: #27ae60;
border-left-color: #27ae60;
}
.icon:hover.navy,
.icon.hover.navy {
color: #34495e;
}
.icon:hover.navy:after,
.icon.hover.navy:after {
border-right-color: #34495e;
border-left-color: #34495e;
}
.icon:hover.red,
.icon.hover.red {
color: #c0392b;
}
.icon:hover.red:after,
.icon.hover.red:after {
border-right-color: #c0392b;
border-left-color: #c0392b;
}
@-webkit-keyframes icon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes icon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 仅演示所用,可自行调整 */
html {
height: 100%;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
}
script.js
$("a").mouseleave(
function() {
$(this).removeClass("hover")
}
)
七、获取源码
老规矩,先给朋友们看一下完整文件夹,
正确的文件如下图 ,复制源码的朋友们请注意了!!!
公众号获取源码
第一步,通过微信公众号下载源码压缩包,解压并打开文件夹,即为上图样式(复制源码请注意路径及文件名)
第二步,点击 html 文件 打开即可查看
2023年第二十期,希望得到大家的喜欢🙇
也是新的系列,将会持续更新,🙇
希望大家有好的意见或者建议,欢迎私信
以上就是本篇文章的全部内容了
~ 关注我,点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等! 「在这里有好多 开发者,一起探讨 前端 开发 知识,互相学习」!
3.以上内容技术相关问题可以相互学习,可 关 注 ↓公 Z 号 获取更多源码 !
获取源码?私信?关注?点赞?收藏?
👍+✏️+⭐️+🙇
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 ",回复 关键词 " a-xztb1 "