按钮悬浮触发水波纹的特效
摘要：效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> * { margin: 0; padding: 0; } body { backg
阅读全文
posted @
2022-10-09 14:46
最帅爸爸
阅读(182)
推荐(1) 编辑
css动画边框
摘要：效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin: 0; padding: 0; box-sizing: bor
阅读全文
posted @
2022-10-08 19:45
最帅爸爸
阅读(112)
推荐(0) 编辑
IOS充电特效SCSS实现
摘要：效果图： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../scss/IOS.css" /> <scr
阅读全文
posted @
2022-10-08 09:37
最帅爸爸
阅读(41)
推荐(0) 编辑
模态框
摘要：效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,html{ background: #FC466B; /* fallback for o
阅读全文
posted @
2022-10-08 09:16
最帅爸爸
阅读(53)
推荐(0) 编辑
css百叶窗
摘要：效果图： css代码块： <style> *{//默认样式清除 margin: 0; padding: 0; } .content{//设置外层div的宽高，超出后隐藏 margin: 100px auto; width: 1100px; height: 500px; overflow: hidde
阅读全文
posted @
2022-09-01 11:20
最帅爸爸
阅读(160)
推荐(0) 编辑
仿B站小火箭发射上升
摘要：效果图： CSS代码块： <style type="text/css"> .goTop { background-image: url(img/rocket_top.png);background-repeat: no-repeat;background-position: center cente
阅读全文
posted @
2022-04-11 17:08
最帅爸爸
阅读(78)
推荐(0) 编辑
拖动验证
摘要：效果图： CSS代码块： * { padding: 0; margin: 0; list-style: none;}#imgDiv { background: url(img/portfolio-1.jpg) no-repeat; width: 750px; height: 350px; margi
阅读全文
posted @
2022-04-11 17:03
最帅爸爸
阅读(49)
推荐(0) 编辑
网购网站悬浮图片放大镜
摘要：效果图： CSS代码块： <style> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px; margin: 10px; border: 1px solid #ccc; position: relative; } .big
阅读全文
posted @
2022-04-11 16:58
最帅爸爸
阅读(36)
推荐(0) 编辑
css自定义会话框
摘要：效果图图下： HTML代码： <div style="background-color: transparent; border: 1px #DDDDDD solid; width: 200px; height: 100px;"><div class="triangle"> <div class="
阅读全文
posted @
2022-04-11 16:48
最帅爸爸
阅读(56)
推荐(0) 编辑
css 悬停图片改变图片的样式
摘要：<style> #div{ text-align: center; } .img{ width: 200px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transition: 1s clip-path; } .img:hover{ cli
阅读全文
posted @
2022-03-07 15:15
最帅爸爸
阅读(91)
推荐(0) 编辑
原生js的懒人轮播图
摘要：<style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 */ position: relative; /* 相对定位 */ overflow: hidden; /*
阅读全文
posted @
2022-03-07 15:09
最帅爸爸
阅读(254)
推荐(1) 编辑
鼠标悬停过度事件：Transition
摘要：CSS代码：<style> div{width:100px;height:100px;background:blue;transition: 0.5s;//0.5秒完成}div:hover{width:600px;}</style>HTML代码：<body> <div></div><p>请把鼠标指针
阅读全文
posted @
2022-03-07 14:53
最帅爸爸
阅读(81)
推荐(0) 编辑
