CSS
关注
分享
扫一扫
利用CSS和JS实现一些动态效果
七里香777
量变引起质变。加油！
展开
-
用纯CSS3代码实现的tab标签切换
通过点击不同的标签选项来显示相应的内容。主要用到CSS的:target选择器https://www.w3school.com.cn/cssref/selector_target.asp更详细的可见https://www.cnblogs.com/bgwhite/p/9414282.htmlps:打开后有背景音乐。z-index属性：https://www.runoob.com/cssref/pr-pos-z-index.html源码：<!DOCTYPE html><ht原创 2020-08-04 22:53:39 · 668 阅读 · 0 评论 -
利用CSS实现任意形状的文字环绕
利用CSS的shape-outside属性来实现任意形状的文字环绕实现效果如下图所示shape-outsideCSS的shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中详情可以参考以下网站： https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-out原创 2020-07-03 14:22:39 · 2962 阅读 · 0 评论 -
HTML5中的线性渐变（linear-gradient）与径向渐变（radial-gradient）
因为只是大概看一下之前上课的代码，而且以后不大可能会用到，所以在此不做过多介绍。效果图：repeating-linear-gradient() 函数：用于创建重复的线性渐变 “图像”。语法：background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);angle定义渐变的角度方向；to side-or-corner指定线性渐变的起始位置（与angle不能同时出现）； col原创 2020-07-28 11:59:36 · 2551 阅读 · 0 评论 -
利用JS和CSS做的星级评分
第三篇动态星级评分<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>星级评分</title> <style type="text/css"> body{ background: #e898ba66; } .pingfen{ width: 460px; height: 200px; background: #ff原创 2020-05-30 21:28:02 · 227 阅读 · 0 评论 -
利用CSS完成鼠标悬浮时中英文切换
效果：刚开始时是中文菜单，鼠标放上去时，中文切换成英文且样式改变。源码：<!doctype html><head> <style> *{padding:0px;margin:0px;} html{background:#abcdef;} div{margin:200px auto;width:80%;} ul{list-style:none; overflow:hidden;/*显示英文时，隐藏切换后的中文*/ } ul li原创 2020-08-04 15:39:41 · 1041 阅读 · 0 评论 -
利用canvas绘制太极图
先看效果图知识点1.html的<canvas>标签:该标签通过脚本（通常是JavaScript）来绘制图形，它只是图形容器，必须使用脚本绘制图形。关于HTML画布的一些方法：https://www.runoob.com/tags/ref-canvas.html2.HTML DOM getContext()方法：在该案例中，var cxt=c.getContext("2d");参数"2d"指定了在画布上绘制的类型，即二维绘图。（当前唯一合法值是"2d"）返回值cxt是一个Canva.原创 2020-07-17 20:20:16 · 567 阅读 · 0 评论 -
利用CSS3做的星级评分
之前在HTML5的课上学到了很多零碎的知识，从老师那儿也获得了很多关于HTML零碎的学习资源。把这些代码分享出来，还可以节省电脑空间。源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用纯CSS3做的星级评分</title> <style> *{padding: 0px;margin: 0px;} .box{ma原创 2020-05-18 23:53:38 · 349 阅读 · 0 评论 -
用JS制作水平下拉菜单
水平下拉菜单。一般用于网页中的导航栏。效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用JS制作水平下拉菜单</title> <style> *{padding:0px;margin:0px;} header{background:#8f0; width:100%; height:原创 2020-08-03 21:42:41 · 430 阅读 · 0 评论 -
利用CSS做下拉列表
第四篇利用 :hover选择器 鼠标放上去后下拉列表出现，鼠标移走时列表消失。效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="shortcut icon" href="hpu.png"> <style> *{padding:0px;原创 2020-05-31 10:41:21 · 704 阅读 · 0 评论 -
tab-swich选项卡的制作
鼠标悬浮在某个li元素（即国际新闻，国内新闻，河南新闻）上时，就会显示其对应的内容。效果图：CSS中clear:left/right的含义及用法：https://blog.youkuaiyun.com/longgeaisisi/article/details/78493797源码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab-Switch 选项原创 2020-08-03 19:23:47 · 236 阅读 · 0 评论 -
使用flex盒子模型实现瀑布流布局
这个例子主要用到弹性盒子（Flexible Box 或 flex-box）布局。1.flex-box是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。flex-box是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。实现效果：flex-wrap属性用于指定弹性盒子的子元素换行方式原创 2020-07-04 15:43:03 · 3331 阅读 · 1 评论 -
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图，这一篇说的是让太极图旋转起来。**思路：**利用HTML DOM 的setInterval()方法，它会按照指定的周期来调用函数或计算表达式。再利用画布的rotate()方法，该方法的参数angle表示旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。如果没有angle+=0.02，太极图只旋转一次。源码：<!DOCTYPE html><html lang="en"><head> <meta c原创 2020-07-27 18:18:25 · 3105 阅读 · 0 评论 -
用canvas画布画同心圆（弧）
学会了用canvas画图之后，只需加个for循环，就可同时画很多图。画图可参考（以太极图为例）：https://blog.youkuaiyun.com/weixin_44286392/article/details/107413822源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head&g原创 2020-07-27 18:49:55 · 1496 阅读 · 0 评论 -
使用::before与::after伪元素插入图标
效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>before-after</title> <style> div{margin:50px;} div::before{ content:url(hpu.ico); position:relative; bottom:-10px; left:-原创 2020-08-04 10:46:06 · 1562 阅读 · 0 评论 -
利用单选按钮的checked属性实现tab切换
html第二篇。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用checked实现tab切换</title> <style> *{padding: 0;margin: 0;} #box{margin:30px 50px;} /*E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后原创 2020-05-19 12:05:13 · 817 阅读 · 0 评论