特效
关注
分享
扫一扫
各种效果
爱吃烧鸭蛋的叶安
这个作者很懒，什么都没留下…
展开
-
高德地图轨迹图
效果图：一、安装依赖二、main.js注册三、代码实现tips：高德地图key申请1、打开高德开放平台网站https://lbs.amap.com,点击右上角注册。2、注册完成之后,进入控制台,点击右上角“创建新应用”,名称随便写。控制台...转载 2022-07-05 18:14:06 · 935 阅读 · 0 评论 -
PC端响应式布局
只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)转载 2022-06-30 15:16:18 · 1909 阅读 · 1 评论 -
vue 公告消息横向滚动
第一种：纯文字展示，只有一句话效果图<!-- 公告栏组件 --><template> <div class="notice-bar" @click="tipClick"> <div class="notice-bar__icon"> <img src="@/assets/icons/notice.png"/> <span>{{ sub_title }}</span> <原创 2022-04-29 12:39:51 · 7103 阅读 · 0 评论 -
css改变水平线的颜色
<hr style="background-color:#ccc;height: 1px;width:90%;border: none;"/>原创 2020-03-11 21:31:28 · 4698 阅读 · 0 评论 -
vue 生成随机颜色 列表中 随机背景色
1、不指定颜色，通过rgb赋值<el-row :gutter="20"> <el-col :sm="12" :md="8" :lg="4" :xl="4" :xxl="4" v-for="(item,i) in 13" :key="i"> <div :style="randomRgb()" class="acess_item">{{ item }}</div> </el-col> </el-row&原创 2022-04-08 15:57:11 · 3106 阅读 · 2 评论 -
css好看的边框
效果图：缝纫线outline: 1px blue dashed;outline-offset:-5px;内圆角outline: 1px blue dashed; outline-offset:-5px; border-radius:10px; box-shadow:0 0 0 5px transparent;信封padding:5px;border: 5px solid transparent;background: linear-gradient(white,white)转载 2022-03-17 18:05:46 · 2715 阅读 · 0 评论 -
好看的鼠标经过特效 纯CSS
效果：完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-12-15 15:12:18 · 1154 阅读 · 0 评论 -
文字剪切图片
重点1、/* 对图片进行剪切，保留原始比例 */object-fit: cover;参考 文档2、/* mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。相当于修改ps的混合模式 */mix-blend-mode: screen;参考文档完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .原创 2021-10-15 15:49:15 · 110 阅读 · 0 评论 -
纯css粒子发散效果
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style&原创 2021-09-27 10:46:27 · 1233 阅读 · 0 评论 -
文本在屏幕上滚动，跑马灯，无缝滚动
左右无缝滚动效果<marquee scrolldelay="10" direction="scroll">welcome</marquee>一、常用属性1.direction：滚动方向(包括4个值：up、down、left、right)2.behavior：滚动方式(包括3个值：scroll、slide、alternate) scroll：循环滚动，默认效果； slide：只滚动一次就停止； alternate：来回交替进行滚动。3.scrollamount：滚.原创 2021-07-28 11:01:53 · 1179 阅读 · 0 评论 -
css写正方体并旋转
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.原创 2021-07-16 15:33:54 · 135 阅读 · 0 评论 -
css 砖瓦墙 大红门
效果图完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-07-02 14:23:47 · 103 阅读 · 0 评论 -
发光文字效果
通过给每个字添加动画，和动画延时实现发光效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>发光文字</title> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { .原创 2021-07-02 10:09:57 · 156 阅读 · 0 评论 -
css 旋转木马效果
效果完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .contain原创 2021-06-23 11:16:48 · 119 阅读 · 0 评论 -
css 3D翻转
效果鼠标经过，翻转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3d翻转</title> <style> *{ padding: 0; margin: 0; } .container{原创 2021-06-23 11:13:05 · 299 阅读 · 0 评论 -
给图片或元素设置倒影
效果/*图片阴影*/ -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .6));第一个参数属性值有：方向:above向上，below向下，left向左，right向右第二个参数是原图与倒影之间的距离第二个透明参数的比例为透明指数，比如50%，就是一半是透明的，20%就是有20%是透明的...原创 2021-06-21 15:21:48 · 245 阅读 · 0 评论 -
通过transform，纯css写出3d环绕效果
实现原理：transform: rotateY(60deg) translateZ(300px)通过rotateY使元素围绕Y轴旋转，translateZ拉开Z轴的距离，更有立体感本案例通过将圆分为6等分，各自转一圈，只是起点相差60度效果：完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2021-06-10 14:24:47 · 1638 阅读 · 0 评论 -
3D放大旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋原创 2021-05-14 17:41:03 · 98 阅读 · 0 评论 -
css3写菱形
通过transform: skewX(100deg),使元素倾斜，达到菱形的试图效果效果如图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device原创 2021-04-14 15:33:46 · 346 阅读 · 0 评论 -
css实现圆柱的形状
效果如图主要通过上下两个椭圆定位，中间一个矩形实现，椭圆通过圆角border-radius: 50% / 50%; 实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=原创 2021-04-14 15:27:23 · 1514 阅读 · 0 评论 -
大屏数据滚动 利用css3 animation （待完善）
效果如图：向上滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-04-09 17:22:31 · 287 阅读 · 0 评论 -
使用css3 animation 写盆中晃荡的水
效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-04-07 13:58:31 · 191 阅读 · 0 评论 -
100多种css渐变 支持点击颜色可复制对应颜色代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{ list-style: none; } li{ float: left; curso.原创 2021-04-02 17:55:57 · 2689 阅读 · 0 评论 -
敲好看的CSS渐变色 和 敲好看的animation动画 css3
效果css样式.box { width: 60%; margin: auto; background-color: rgba(204,204,204,.6); padding: 20px 20px; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: space-aroun原创 2021-04-02 11:53:29 · 303 阅读 · 0 评论 -
纯CSS3手写 管道流水动效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>管道流原创 2021-04-01 18:14:53 · 1982 阅读 · 0 评论 -
拖动 对比图 纯css
写好样式 定位，主要步骤overflow: hidden;resize: horizontal;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,转载 2021-03-27 16:05:38 · 277 阅读 · 0 评论 -
vue生成二维码 vue-qriously
// 下载依赖npm i vue-qriously -S//main.js中引入import VueQriously from 'vue-qriously'Vue.use(VueQriously)// 页面中使用<template> <div> <qriously :value="url" :size="100" /> </div></template><script> export defau转载 2021-03-26 10:58:10 · 518 阅读 · 0 评论 -
vue 文字滚屏
1、通过animation使画面动起来<template> <div class="con"> <div class="inner-container"> <p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p> </div> </div></template&转载 2021-03-25 14:32:23 · 379 阅读 · 0 评论 -
大屏数据滚动 整屏切换的效果
<html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head>原创 2021-03-25 11:56:09 · 631 阅读 · 0 评论 -
vue 根据获取到的城市信息，获取该地的天气情况
1、下载以来axios，并在main.js入口函数中引入axiosimport axios from "axios";Vue.prototype.$axios = axios页面中<span>{{weather}}</span><span v-if="lower">{{lower}}~{{higher}}</span>created(){ this.getWeather() // 获取天气 }, methods: { g原创 2021-03-24 15:16:46 · 7550 阅读 · 8 评论 -
火苗发光特效 + 电子时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>火苗发原创 2021-03-18 14:34:39 · 143 阅读 · 0 评论