CSS3
关注
分享
扫一扫
CSS3
HqL丶1024
这个作者很懒，什么都没留下…
展开
-
Vue引入animate.css使用css3动画
1.安装npm包npm install animate.css --save2.main.js引入import animate from "animate.css";Vue.use(animate);3.使用<div class="animate__animated animate__fadeInRightBig">哈哈哈</div>备注：这个是动画地址想用哪个用哪个属性：https: //animate.style/...原创 2020-08-12 16:19:21 · 947 阅读 · 0 评论
-
css3常用动画效果
transition-duration: 0.5s;原创 2020-06-19 11:11:39 · 310 阅读 · 0 评论 -
CSS3弹窗动画效果
弹窗从上到下动画.fadein { animation: fadein .5s;}@keyframes fadein { 0% { transform: translate(0, -100%); } 100% { transform: none; }}弹窗从下到上动画.fadein { animation...原创 2019-12-27 16:05:52 · 2640 阅读 · 0 评论 -
弹出框背景透明
.xiaomaaa{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99; }<div class="xiao...原创 2019-10-30 16:24:00 · 1211 阅读 · 0 评论 -
CSS3实现双眼眨眼效果
<div class="box"> <div class="yanjin"> <div class="demo">欢迎来到VUE3</div> <div class="demo">欢迎来到VUE3</div> </div> </div>.box { width: 750px; .yanjin { width: 100%; displa...原创 2021-01-19 10:51:48 · 435 阅读 · 0 评论 -
小程序使用Animate.css动画集
Animate.css官网1.引入css文件css源码提取链接: https://pan.baidu.com/s/1hgo6soO-qNXbmycvkm2szw 提取码: 2ej2 2.使用<view bindtap="donghua" class="text animated flipInY"> 展现动画</view><view wx:if="{{showTYpe}}" class="text animated {{wobble}}"> Ani.原创 2021-01-08 11:57:42 · 313 阅读 · 0 评论 -
css3实现流星以及星星闪烁效果
<div id="Vue"> <div class="shine shine2"></div> <div class="star"></div> <div class="star pink"></div> <div class="star blue"></div> </div>* { margin: 0px; padding: 0p..原创 2020-12-11 17:26:27 · 1792 阅读 · 0 评论 -
Vue实现简单侧边栏弹出动画
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .bg {原创 2020-11-08 15:46:08 · 3004 阅读 · 0 评论 -
css实现圆形波浪图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-09-17 17:57:18 · 980 阅读 · 0 评论 -
标签横线伸展开动画
.baseline { width: 100%; height: 5rpx; border-radius: 10rpx; background: #16BA98; animation: underFadeIn .3s;}@keyframes underFadeIn { 0% { width: 0; left: 50%; } 100% { width: 100%; left: 0; }}原创 2020-08-05 14:54:31 · 237 阅读 · 0 评论 -
小程序引入外部字体
@font-face { font-family: '庞门正道标题体'; src: url('https://sucai.suoluomei.cn/sucai_zs/file/20200527151820-pangmenzhengdao.ttf');}.rolsViewLNmae { font-family: '庞门正道标题体'; font-size: 24rpx; color: rgba(17, 17, 17, 1); width: 180rpx; overflow: h原创 2020-05-27 15:24:39 · 730 阅读 · 0 评论 -
Css实现内容溢出添加横向滚动条
<div class="banner"> <div class="one"> <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片"> <p>元气少女妆</p> </div>...原创 2020-05-25 11:35:43 · 2524 阅读 · 0 评论 -
小程序从下上弹出的动画效果
const app = getApp()Page({ data: { hideModal: true, //模态框的状态 true-隐藏 false-显示 animationData: {},// }, onLoad: function () { }, // 显示遮罩层 showModal: function () { var...原创 2020-05-06 11:53:31 · 839 阅读 · 0 评论 -
css文字和图片大小缩放动画效果
.immediately { width: 100% - 100rpx; height: 88rpx; background: linear-gradient(0deg, rgba(252, 81, 81, 1) 0%, rgba(254, 165, 106, 1) 100%); box-shadow: 0px 3px 6px 0px rgba(246, 47, 47, 0.35)...原创 2020-04-18 15:20:40 · 2065 阅读 · 0 评论 -
css实现页面内容都不能复制
.div{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: non...原创 2020-04-10 16:24:48 · 629 阅读 · 0 评论 -
全站变灰
1html { -webkit-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1); }2html { filter: grayscale(100%); -webkit-filt...原创 2020-04-09 10:07:21 · 143 阅读 · 0 评论 -
Live2D看板娘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-04-02 10:23:43 · 804 阅读 · 0 评论 -
小程序css瀑布流布局
核心代码就是wx:if当中的wx:if="{{index%21}}“和wx:if=”{{index%20}}"html <view class="right"> <block wx:for="{{note}}" wx:for-item="item" wx:key="inedx"> <view class="item" wx:if...原创 2020-03-30 17:13:58 · 423 阅读 · 0 评论 -
三元运算渲染不同颜色
<div id="Vue"> <div> <p :class="['calender',item == nowDate ? 'active' : item > nowDate ? 'disabla' : '']">123</p> </div> </div&...原创 2020-03-23 15:51:34 · 975 阅读 · 0 评论 -
Vue使用lib-flexible做手机端自适应以及引用lib-flexible导致第三方Ui库缩小
第一步 在项目中安装lib-flexiblenpm install lib-flexible --save第二步 在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'第三步 去index.html里把meta name=“viewport标签注释掉”<!-- <meta name="viewport" conte...原创 2020-03-11 13:43:22 · 860 阅读 · 0 评论 -
Vue动态渲染背景颜色
<input type="button" class="code" :style="{'background':' #'+clor}" value="获取验证码">data:{ clor:"195F53"}原创 2020-03-07 14:33:59 · 5531 阅读 · 0 评论 -
css宽度超出滑动
横向滑动css overflow-x: scroll; white-space: nowrap;去掉滚动条 ::-webkit-scrollbar { display: none }原创 2020-02-24 10:16:48 · 2146 阅读 · 0 评论 -
css3旋转动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-28 11:16:07 · 220 阅读 · 0 评论 -
字体渐变
background-image:-webkit-linear-gradient(top,#ff7143,#feb60c); -webkit-background-clip:text; -webkit-text-fill-color:transparent;原创 2019-12-21 16:46:58 · 186 阅读 · 0 评论 -
Css斜四边形
transform: skew(0deg, -20deg);原创 2019-12-13 16:30:34 · 1676 阅读 · 0 评论 -
Css修改滚动条样式
/* 滚动条整体部分 */ ::-webkit-scrollbar { width: 20px; height: 20px; } /*滚动条轨道、滚动条*/ ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 50p...原创 2019-11-25 16:03:19 · 98 阅读 · 0 评论 -
html媒体查询
//小于500px的时候执行下面样式@media screen and (max-width: 500px) { .abc {width: 900px} } //大于500px的时候执行下面样式@media screen and (min-width: 500px) { .abc {width: 900px} } ...原创 2019-11-22 16:27:12 · 144 阅读 · 0 评论 -
解决移动端H5页面点击输入框页面放大的问题
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />原创 2019-11-21 12:01:25 · 1956 阅读 · 0 评论 -
css实现鼠标移上去放大功能
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ margin: 50px auto; ...原创 2019-11-21 11:50:54 · 2492 阅读 · 0 评论