css样式
关注
分享
扫一扫
侧耳倾听...
这个作者很懒，什么都没留下…
展开
-
css一个子模块在父模块中随机浮动
首先，先说功能上面做一个在轮播图上面浮动一个提示首先在网上找到了一个例子是一个小球在这个代码是酱紫的<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont...原创 2019-07-11 16:59:37 · 498 阅读 · 0 评论 -
CSS3 transition 属性 实现地图切换
话不多说，直接上图，我查看了百度地图的然后试着做了一个具有收缩功能的<template> <div id="mapType"> <div class="mapTypeCard vectorType"> <span>地图</span> </div> <div class="...原创 2019-03-20 10:47:19 · 745 阅读 · 0 评论 -
Vue + 原生CSS3 实现像视频时间点在时间轴上效果并且可移动
<template> <div class="timeSwiper"> <div class="time-box"> <div class="time-title">时间</div> <div class="tool-left" @click="reduceYear(nowYear)"> <span class="icon iconfont">...原创 2021-06-29 15:40:41 · 1874 阅读 · 1 评论 -
CSS transform 属性 实现矩形旋转
定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性，请查看这个演示。默认值： none 继承性： no 版本： CSS3 JavaScript 语法： object.style.transform="rotate(7deg)" 语法transform: none|transform-functions;值 描述 n...原创 2021-08-18 16:16:42 · 897 阅读 · 1 评论 -
css 实现太极图
<template> <div class="box"> <div class="circle"></div> </div></template><script>export default { props: [], data() { return {}; }, watch: {}, methods: { init() {}, }, mounted...原创 2021-11-05 14:35:49 · 205 阅读 · 0 评论 -
Vue.js 实现动态的改变style
:class="{'main-click1':!qd1,'main-click11':qd1}"这个实现的是当我们点击按钮的时候，按钮改变样式这里我定义了一个qd1 这个的初始值是false，当我们点击时，将这个变量变成true这样 main-click1定义一个样式 main-click11定义另一个样式，就可以实现样式的动态切换...原创 2018-12-01 13:56:25 · 17307 阅读 · 0 评论 -
CSS3动画-图片在框中上下移动
<a class="cgzslj" :href="jumpcgzs"> <img src="../../assets/new/成果展示.png" style="margin-left:-5px" height="30" width='200' alt="logo" title="图片上下移动" c原创 2018-08-21 13:31:07 · 6564 阅读 · 0 评论 -
vue.js实现点击图标放大下离开时缩小
@-webkit-keyframes pulse1 { from { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: sc...原创 2018-12-01 14:12:50 · 1544 阅读 · 0 评论 -
vue 填写选择的日期
vue 填写带旬的日期原创 2022-07-08 16:38:32 · 520 阅读 · 0 评论 -
js日历（包含农历节假日）
原始地址vue封装了个日历组件（包含农历，节日）_m0_49159526的博客-优快云博客_vue日历插件显示节日的实现样式层级index.vue<!-- * @Description: * @Author: lzp * @Date: 2021-06-23 16:55:55 * @LastEditTime: 2021-07-02 12:25:17 * @LastEditors: xxx--><template> <div c..原创 2022-01-27 14:42:03 · 4666 阅读 · 0 评论 -
vue + gifshot 实现GIF动图
gitshot地址index.html 文件中引入<script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script><template> <div class="makeGif"> <div id="gif"></div> </div></template><scr...原创 2022-01-06 13:47:11 · 2926 阅读 · 0 评论 -
vue+css实现颜色渐变
<template> <div class="ColorGradient"> <div :style="legendDivStyle"> <div class="ui-legend-cell-div"> <template v-for="item in colorItems"> <div :key="item.id" :style="item.style"></d...原创 2022-06-24 09:52:44 · 1467 阅读 · 0 评论 -
雪碧图的展示和选择
<template> <div class="icon-svg"> <div class="icon-div" :style="{ width: positions.width + 'px', height: positions.height + 'px', 'background-position': '-' + positions.x + 'px -' + positions....原创 2022-01-06 13:39:29 · 568 阅读 · 0 评论 -
canvas 基础学习笔记
颜色、样式和阴影属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离 方法 描述 createLinearGradient(原创 2021-07-16 17:50:52 · 264 阅读 · 1 评论 -
Css 选择器
选择器 解释 div p div子元素下所有p元素 div>p div子元素选择器下所有p元素，不包括孙级及以下元素。 div,p 选择所有div元素和所有p元素 div+p 用于div选择紧挨着的同级兄弟p元素。 div~p 用于div选择后面的所有兄弟p元素。 ...原创 2021-04-07 16:51:16 · 258 阅读 · 0 评论 -
flex布局 - 零基础保姆级
一、实现效果二、代码<template> <div class="flex"> <div class="flex-box"> <div v-for="item in dataList" :key="item.id" class="flex-box-item"> <div class="flex-box-img" @click="jumpApp()"> <img :src原创 2021-04-01 16:37:51 · 557 阅读 · 1 评论 -
css 修改input type CheckBox 复选框
<input type="checkbox" :value="item.id" v-model="sjIds" v-if="[0,1,4].includes(item.hczt)" />input[type="checkbox"] { width: 25px; height: 25px; visi...原创 2020-07-27 15:48:31 · 377 阅读 · 0 评论 -
css自定义横向流程图，步骤图
特想吐槽下，上传的图片尽然给拉伸了。图片都展示不好了（*-*）生气，就先凑合看吧首先进行中的为绿色，进行中的为橙色，未进行的为灰色，活不多说直接上代码，横向的为自己手写，纵向为elementUI自带的<ul class="steps"> <li v-for="(item,index) in list" :key="item.id" :class=...原创 2019-03-27 10:03:25 · 7027 阅读 · 0 评论 -
css设置背景图片拉伸全屏不重复
话不多说直接上图我们只给了宽和高100%就会出现这种状况<template> <div class="hello"></div></template><script>export default { name: "HelloWorld", data() { return {}; }};原创 2019-03-14 14:56:00 · 12193 阅读 · 1 评论