CSS3
关注
分享
扫一扫
爱睡的虫虫
本人博客只供自己学习和笔记用途
展开
-
vue项目中使用swiper插件
先说说在vue中如何引用swiper1.npm命令安装swipernpm install swiper --save-dev2.在需要用到swiper插件的组件中引入swiper<script>import Swiper from "swiper";</script><style lang="scss" scoped>@import "../....原创 2020-04-28 22:12:02 · 7977 阅读 · 1 评论 -
元素 居中 弹出框
实现元素垂直居中的方法很多，相信大家都能说出几种。相对于PC端，移动端的方法会更多点，平时在网上收集了一些，在此贴出来分享给大家，仅供参考。方法1:table-cellhtml结构<div class="box box1"> <span>垂直居中</span></div>CSS.box1{ display: ta...原创 2020-04-24 22:17:22 · 209 阅读 · 0 评论 -
移动端 效果案例
效果演示：横向滚动源代码： <div class="wrapper"> <div class="content"> <ul class="ul"> <li><img src="https://p1.meituan.net/128.180/movie/648bbced1...原创 2019-08-21 11:35:51 · 738 阅读 · 1 评论 -
canvas 刮刮乐效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>audio</title> <style type="text/css"> canvas { /* canvas 默认宽高 300*...原创 2019-08-21 08:40:41 · 261 阅读 · 0 评论 -
Sass
Sass是CSS的扩展语言（预编译语言）。在CSS 语法的基础上增加了变量 、嵌套、混合、导入等高级功能。Sass 使用方式1、新建文件，后缀名为.scssVisual Studio Code 推荐安装插件 （Easy Sass）...原创 2019-07-05 10:14:04 · 649 阅读 · 0 评论 -
服务端字体
服务端字体为什么要用服务器字体在css3之前，页面文字所使用的字体必须已经在客户端中被安装才能正常显示，但是如果这个字体在客户端中没有安装的话，使用这个字体就不能正常显示了。为了解决这个问题，在css3中，新增了web fonts功能，网页中可以使用web服务器端的字体，只要某个字体在web服务器端安装了，这个字体就能正常显示了。怎么使用服务器字体定义服务器端字体的语法@font-...原创 2019-05-14 10:23:28 · 1399 阅读 · 0 评论 -
rem布局缩放雪碧图（精灵图）
sprite图片的处理 为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。 比如有如下一张200*50的sprite图。image所以在处理sprite图片时，我们只能给background-s...原创 2018-05-11 14:49:53 · 2225 阅读 · 0 评论 -
JS 控制 audio 标签 播放/暂停 音乐
<script type="text/javascript"> window.onload = function(){ /*解决不同浏览器不能播放的情况*/ // function toggleSound() { // if (audio.paused) { //判读是否播放 // audio.pl原创 2017-12-13 14:40:11 · 8520 阅读 · 0 评论 -
CSS3玻璃流光特效
当鼠标划过图片时有玻璃流光的质感.<div id="container"> <div class="image"> <img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" /> <em></em> </div></div>/CS转载 2017-12-13 13:47:46 · 2702 阅读 · 0 评论