HTML+CSS+SVG+VUE
关注
分享
扫一扫
基本标签介绍，frameset框架和iframe内嵌 ，marquee滚动，选择器，伪类，盒子模型，浮动，定位，h5语义化标签，多媒体，表单表格，2D变换，3D详解，动画...
豆皮没有豆
好好生活慢慢相遇
展开
-
web前端思维导图
web前端思维导图原创 2023-01-16 12:57:53 · 546 阅读 · 1 评论 -
HTML+CSS HTNL5+CSS3旋转木马3D图片动画特效
style.css* { margin: 0; padding: 0;}html,body { height: 100%;}body { overflow: hidden; display: flex; background: #111; perspective: 1000px; transform-style: preserve-3d;}#drag-container, #spin-container { position: relative;转载 2020-08-31 16:38:01 · 2042 阅读 · 2 评论 -
HTML+CSS CSS3商城商品鼠标悬停图片模糊过渡动画特效
响应式框架bootstrap-grid.min.css:/*! * Bootstrap v3.3.5 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) *//*! * Generated using the Bootstrap Customizer (http:/转载 2020-08-31 15:15:32 · 763 阅读 · 0 评论 -
HTML+CSS css3电子杂志画册3D翻页切换动画特效
style.css文件：@import url("https://fonts.googleapis.com/css?family=Sree+Krushnadevaraya&display=swap");@import url("https://fonts.googleapis.com/css?family=Catamaran&display=swap");:root { --margin: 110px; --background: #e2e2f5; --perspectiv转载 2020-08-31 14:46:35 · 1634 阅读 · 1 评论 -
VUE 学习（九）组件Component
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue学习（组件和组件-自定义事件）</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--组.原创 2020-08-28 14:27:37 · 602 阅读 · 0 评论 -
VUE 学习（八）表单
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue学习-表单</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--你可以用 v-mode.原创 2020-08-27 11:11:39 · 159 阅读 · 0 评论 -
VUE 学习（七）事件处理器
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue学习-事件处理器</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--事件监听可以使用.原创 2020-08-27 09:40:59 · 174 阅读 · 0 评论 -
VUE 学习（六）样式绑定v-bind:class和v-bind:style
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>VUE学习-样式绑定</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active{ width: 100px; .原创 2020-08-26 17:10:24 · 700 阅读 · 0 评论 -
VUE 学习（五）监听属性watch
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue监听属性watch</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <!--监听属性 w.原创 2020-08-26 14:19:51 · 522 阅读 · 0 评论 -
VUE 学习（四）计算属性computed
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue学习-计算属性</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--计算属性关键词: .原创 2020-08-26 11:24:11 · 200 阅读 · 0 评论 -
VUE 学习（三）循环语句v-for
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：例：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>VUE学习-（v-for）</title> <script src=原创 2020-08-26 10:03:23 · 440 阅读 · 0 评论 -
HTML+CSS css3可爱布丁蛋糕表情动画特效
style.cs代码：*:before, *:after { position: absolute; content: "";}*:hover { z-index: 10;}body { width: 100%; height: 100%; background: #f8dee9;}.dessert { position: absolute;}.pudding { position: absolute; width: 150px; heig转载 2020-08-26 10:04:30 · 828 阅读 · 0 评论 -
HTML+CSS css3绘制卡通蓝天白云太阳表情动画特效
style.css代码：body { background: #3474de;}.box { position: relative; margin: auto; display: block; margin-top: 15%; width: 600px; height: 420px;}/*sun*/.sun { position: absolute; background: #FFF054; top: 15%; right: 30%; wi转载 2020-08-25 16:27:36 · 644 阅读 · 0 评论 -
SVG SVG绘制彩色落叶动画特效
源码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>svg绘制彩色落叶动画特效</title> <style> /* cyrillic-ext */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weigh转载 2020-08-25 15:52:07 · 443 阅读 · 0 评论 -
SVG svg个人信息卡片折叠式3D打开动画特效(个人强烈推荐)
源码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>svg个人信息卡片折叠式3D打开动画特效</title> <style> /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: italic; font-w转载 2020-08-25 15:30:38 · 575 阅读 · 0 评论 -
SVG SVG+TweenMax星星跟随鼠标移动
TweenMax.min.js版本2.1.3：/*! * VERSION: 2.1.3 * DATE: 2019-05-17 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, Attr转载 2020-08-25 14:59:24 · 2722 阅读 · 0 评论 -
VUE 图片放大特效
源码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>VUE 图片放大特效</title> <style> body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-it原创 2020-08-25 10:41:11 · 523 阅读 · 0 评论 -
VUE 学习（二）-条件语句v-if,v-else,v-else-if,v-show
1.v-if<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>VUE条件语句-(v-if)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <di原创 2020-08-25 09:54:36 · 213 阅读 · 0 评论 -
VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效
1.外部引用的js文件①jquery版本：jquery-3.3.1.js②vue引入：vue.js<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>③cheshi9.jsconst vm = new Vue({ el: '#sum', data() { return { flag: [ '零秒', '一秒',转载 2020-08-24 17:33:07 · 1473 阅读 · 3 评论 -
VUE 学习（一）-模板语法
1.绑定文本<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue模板语法-文本</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--数据绑原创 2020-08-24 16:06:53 · 358 阅读 · 0 评论 -
SVG HTML+SVG+JS创意圆环数字时钟动画
css文件夹下的googleapis_latin.css@font-face { font-family: 'Fascinate'; font-style: normal; font-weight: 400; font-display: swap; src: local('Fascinate'), local('Fascinate-Regular'), url(https://fonts.gstatic.com/s/fascinate/v9/z7NWdRrufC8XJK0IIElS原创 2020-08-24 13:46:51 · 309 阅读 · 0 评论 -
SVG HTML+JS+SVG搜索框下拉列表
html5 svg+js搜索框下拉列表显示更多代码，在搜索框输入文字的时候显示更多信息，这个更多选项在js里面自定义设置。css文件夹下的googleapos-family.css/* cyrillic-ext */@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'),原创 2020-08-24 11:34:17 · 612 阅读 · 0 评论 -
SVG 实例练习（五）
1. feBlend滤镜<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">&转载 2020-08-24 11:13:35 · 228 阅读 · 0 评论 -
SVG 渐变学习（四）
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。在 SVG 中，有两种主要的渐变类型：线性渐变 放射性渐变一.线性渐变<linearGradient> 可用来定义 SVG 的线性渐变。<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可被定义为水平、垂直或角形的渐变：当转载 2020-08-24 11:07:00 · 212 阅读 · 0 评论 -
SVG 滤镜学习（三）
1. SVG 滤镜用来向形状和文本添加特殊的效果。在 SVG 中，可用的滤镜有：feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feT转载 2020-08-24 10:57:00 · 264 阅读 · 0 评论 -
SVG 形状学习（二）
SVG 有一些预定义的形状元素，可被开发者使用和操作。矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>一.<rect> 标签<rect> 标签可用来创建矩形，以及矩形的变种。要理解它的工作原理，请把这些代码拷贝到记事本，然后保存为 "rect1.svg" 文件。把转载 2020-08-24 10:49:12 · 456 阅读 · 0 评论 -
SVG 基础学习（一）
一.SVG简单介绍SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。SVG 是使用 XML 来描述二维图形和绘图程序的语言。什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XS转载 2020-08-24 10:02:21 · 434 阅读 · 0 评论 -
HTML 转义字符 ； &ensp； &emsp；&thinsp；&zwnj；&zwj；空格标记
<span style="color:red;"> </span>转载 2020-08-07 15:25:07 · 3314 阅读 · 1 评论 -
HTML+CSS教程（二）frameset框架和iframe内嵌
一.框架（frameset）1.用&lt;frameset&gt;&lt;/frameset&gt;代替了&lt;body&gt;&lt;/body&gt;2.rows设置行的占页面的百分比；cols设置列的所占百分比；*表示剩余的百分比；frameborder设置框架的边框（取值0/1）0–不显示边框1–在每个页面之间都显示边框；bordercolor设置边框颜色；f原创 2018-10-30 20:31:59 · 2189 阅读 · 0 评论 -
HTML+CSS教程（三）marquee滚动效果
一.marquee1.marquee标签的属性scrollHeight：获取对象的滚动高度。scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。scrollWidth：获取对象的滚动宽度。offsetHeight：获取对象相对于版面或由父坐标offsetParent属性指定...原创 2018-10-31 23:28:10 · 2565 阅读 · 0 评论 -
HTML+CSS教程（四）选择器
一.回顾内容前端的三大组成(三大模块)HTMl(超文本标记语言) 结构层css(层叠样式表) 表现层:用来美化HTML结构JS(Java script)(脚本语言) 行为层:提供用户和界面的交互二.CSS(层叠样式表)1. CSS的概念及其介绍CSS 指层叠样式表 (Cascading St...原创 2018-11-04 11:38:21 · 249 阅读 · 0 评论 -
HTML+CSS教程（五）伪类,盒子模型
一.外联样式通过link标签引入外部css文件夹中的xxx.css文件到head标签中例:二.1.组选择器选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值}例:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt;原创 2018-11-06 00:05:23 · 338 阅读 · 0 评论 -
HTML+CSS教程（六）浮动-float+定位-position+居中问题
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列，先写的先排列,后写的排在后面,每个盒子都占据自己的位置.2.浮动的概念:所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置。3.浮动的特性:(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.(...原创 2018-11-07 00:06:37 · 785 阅读 · 1 评论 -
HTML+CSS教程（七）HTML5及CSS3的简单介绍（语义化标签、表单、多媒体、属性/伪类选择器）
一.HTML5HTML：超文本标记语言（超文本:视频.音频.超链接.图片…;标记语言:标签组合）HTML5的简单介绍:html5 是html4.0 升级版,HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的 HTML 语言.html5 是html4.0 升级版,HTML5 并不仅仅只是做为HT...原创 2018-11-14 00:09:05 · 590 阅读 · 0 评论 -
HTML+CSS教程（八）CSS3(border/background/浏览器私有化前缀/背景/渐变/过渡)讲解
一.边框1.边框圆角2.边框图片border-inage-source:url(&amp;quot;&amp;quot;)border-image-repeat:设置背景图的平铺方式,streth(拉伸)round(图片自动调整缩放比例)border-image-slice裱框切割border-image-outset边框向外边框背景图的扩展border-image-width:边框背景图的厚度二.浏览器私有化的前缀...原创 2018-11-15 23:42:06 · 617 阅读 · 0 评论 -
HTML+CSS教程（九）CSS3(2D变换)
一.2D变换1.旋转transform:rotate例:&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&qu原创 2018-11-16 17:39:20 · 287 阅读 · 0 评论 -
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换1.左手坐标系 :伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X、Y、Z 轴的正方向.2. CSS 中的 3D 坐标系CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的,相当于其绕着 X 轴旋转了 180 度.3.左手法则左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余...原创 2018-11-25 15:22:57 · 2059 阅读 · 0 评论 -
HTML+CSS教程（十一）补充css中clip:rect用法
css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果.top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的.经典案例:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta ch原创 2018-12-04 11:22:13 · 1187 阅读 · 0 评论 -
HTML+CSS教程（一）简介及其基本标签的使用方法
一.前端HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQueryJQueryEasyUIBootstrap(响应式的布局)二.HTML简介HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、 图形、图片、视频、音频、动画、声音...原创 2018-10-29 22:44:50 · 719 阅读 · 0 评论