- 博客(27)
- 收藏
- 关注
RSS订阅转载 css3加载动画
1.效果图2.案例介绍这里用到了一些好玩的属性 倒影-webkit-box-reflect属性可以去看一下这位博主讲的比较详细朝阳393.源码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css3加载动画</title> <style> *{ margin: 0; padding: 0; bo
2022-05-25 21:39:39
239
原创 CSS3 摩天轮旋转特效
1.效果图2.案例分析这各效果分别由两部分组成:摩天轮和小朋友。摩天轮作为div(居中显示)的背景图片小朋友是通过定位定在指定位置的通过css3 动画animation与transform属性中的rotate配合实现转动问题:当摩天轮旋转时小朋友会跟着旋转，正常小朋友自己视觉效果是不会转动的解决只需要让摩天轮顺时针转动，小朋友逆时针转动，时间相同，速度相同就可以产生相对静止的效果。3.源码<!DOCTYPE html><html> <head>
2022-05-24 21:41:22
573
原创 CSS3 聚光灯特效
1.效果图2.源码这里主要用到css3中的裁剪clip-path属性，以及动画animation属性<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css3聚光灯特效</title> <style> body{ position: relative; width: 100vw; height: 10
2022-05-23 23:27:08
344
原创 CSS3 3D炫酷旋转正方体特效
1.效果图2.效果分析这里主要用到了css3中的transform属性，和动画animation，通过transform来拼装正方体，再通过动画让它旋转起来。3.源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS3 3D选装魔方</title> <style> body{ /* 设置成黑色背景，使得
2022-05-17 22:12:51
852
原创 html+css3跑马灯(抖音我们的照片记录幸福到永远)
1，效果图2，介绍主要通过css3动画属性实现，中间这个人物是通过窗口定位固定在哪里的。由于谷歌浏览器为优化用户体验禁止audio中的autoplay属性，所以下面直接加了一个audio，点击即可播放。3,html部分(这里可以更改为自己喜欢的图片)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>我们的照片记录幸福到永远</title>
2022-04-26 09:47:06
428
转载 html+css3图片栏鼠标上移效果
1.效果图2.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css3图片栏</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div
2022-04-24 23:18:32
491
原创 html+css3 3d导航栏
效果图参考于https://www.bilibili.com/video/BV1xq4y1q7jZ?p=37如有侵权还请速速联系1.html部分<div class="navs"> <ul> <li> <a href="#">首页</a> <a href="#">Index</a> </li> <li> <a href="#"
2022-04-23 23:16:14
368
原创 访问当前购物车页面节点
1.效果图（如有侵权还请速速联系）html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>访问当当购物车页面节点</title> <link type="text/css" rel="stylesheet" href="css/cartStyle.css" /></head><
2022-04-22 22:25:12
1617
原创 html+css+js TAB切换
1，效果图2.html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"><title>TAB切换</title> <link href="css/tab.css" rel="stylesheet"></head><body><div class="div_bg"> <ul>
2022-04-21 21:38:44
211
原创 html+css+js实现购物车(鼠标移入显示对话框)
1，主要通过js来改变display来实现2，效果图3.html部分<section id="shopping"> <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div> <div id="cartList"> <h2>最新加入的商品</h2> <
2022-04-20 22:45:42
1787
原创 html+css3,鼠标悬停图片放大，弹出卡片特效
1.效果图2.源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; } body{ background-image: url(img/bg1.jpg) ; background-size: cover; }
2022-04-19 23:02:01
3652
原创 html+css+js 递归实现目录树
参考与https://ke.qq.com/webcourse/417875/100498562#taid=10178943642918995&vid=5285890806745023231如有侵权还请速速联系！！！1，效果图2，源码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>目录树结构</title> </head>
2022-04-18 22:46:19
1286
原创 html+css3+js实现古诗词淡出效果
参考与https://ke.qq.com/webcourse/417875/100498562#taid=10178939347951699&vid=387702291995618378如有侵权还请速速联系1，效果图2，源码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>古诗词淡入</title> <style>
2022-04-17 22:29:57
659
转载 html+css3浮动相册
1，效果图2，html部分<div class="gallery-section"> <div class="inner-width"> <h1>生活 / 运动</h1> <div class="border"></div> <div class="gallery"> <a href="img/200.jpg" class="image"> <img
2022-04-16 22:42:21
228
原创 html+css3实现炫酷动画吃豆豆
1，效果图2，源代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { margin: 0; } P { color: #FFC0CB; font-size: 50px; margin-left: 120px
2022-04-15 22:26:30
707
翻译 HTML+CSS+JS炫酷按钮特效
1，效果图2，源码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <mate name="viewport" content="width=device-width,initial-scale=1.0"> <mate http-equiv="X-UA-Compatible" content="ie=edge"> <script src="js/j
2022-04-14 22:34:23
742
原创 html+css返回顶部
1，介绍这里主要使用html5中a锚点，通过id来定位锚点。通过a的href属性来跳转到指定位置。css中使用了scroll-behavior:smooth;属性使滑动更加平滑。2，效果图3，html部分，这里使用的是图片快速搭建<!-- 头部导航 --> <div id="nav"> <img src="img/nav.png"> </div> <!-- 首页内容 --> <div id="content">
2022-04-13 22:07:16
297
转载 html+css+js实现页面加载动画
1，介绍使用css3的属性来制作动画特效（这里一共写了三个动画，可分别通过个更改style引入来实现不同同的加载动画），通过js定时器来控制动画加载时长，以及过渡到页面的过程。2，效果图动画1动画2动画33，html部分，<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css_loaders</title> </head&g
2022-04-12 21:03:16
3214
原创 原生js实现阴阳师吸顶导航
大家好，今天给大家分享一篇用html+css+js实现阴阳师吸顶导航的代码。参考博主 快餐只吃金拱门如有侵权还请速速联系！！！1，案例效果 2，HTMLl部分,这里使用无序列表ul嵌套a标签来书写导航。<div class="yys"> <div class="header"> <div class="menu">
2022-04-11 12:36:23
948
转载 js手风琴特效
1.效果图2.html部分<div class="cont s--inactive"> <!-- cont inner start --> <div class="cont__inner"> <!-- el start --> <div class="el"> <div class="el__overflow"> <div class="el__inner">
2022-04-08 22:57:06
642
原创 js树叶飘落
1.效果图2.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js树叶飘落</title> </head> <style type="text/css"> body { overflow: hidden; background-image: url(img/autumn.jpg); backgro
2022-04-07 22:42:57
812
原创 JS封装轮播图(带左右箭头)
JS封装轮播图(带左右箭头)左箭头还没有实现，无缝衔接右箭头可以无缝衔接效果图1.html部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>原生JS实现通用轮播图插件</title> </head> <style type="text/css"> #banner{ width: 800px; h
2022-04-02 22:20:42
1001
原创 原生js轮播图插件
js轮播图插件1，html部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>原生JS实现通用轮播图插件</title> </head> <style type="text/css"> #banner{ width: 800px; height: 400px; /* border: 10px sol
2022-04-01 22:40:24
552
原创 HTML+CSS+JS新年倒计时(实时更新)
大家好，今天给大家分享一篇用html+css+js实现新年倒计时的代码。改编于https://www.bilibili.com/video/BV1EJ411471A?from=search&seid=18367221548830118604&spm_id_from=333.337.0.0 如有侵权还请速速联系。效果图：1，html结构，<body> <div class="container"> <h2><span>Co
2022-03-26 23:00:11
4931
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人