本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置：
>>> TAG标签：css3 的结果

  • 解决CSS3关于z-index不生效问题
    最近写CSS3和js结合，遇到了很多次z-index不生效的情况： 1.在用z-index的时候，该元素没有定位（static定位除外） 2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设
    641
    2020-02-19
    css

  • CSS3实现图片抽屉式效果的方法
    老规矩，先放图片效果图： 这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码； HTML代码： div ul id=list li a href=国际美妆抢先看/a img src=images/1.jpg / /li li a href=女神标准大讨论/a img src=images/2.jpg / /li li cl
    1743
    2019-11-07
    css
  • CSS3边框效果介绍
    什么是CSS# CSS(Cascading Style Sheets的缩写)，翻译为层叠样式表或级联样式表，简称样式表。 CSS的主要作用# 它主要是用来给HTML网页来设置外观或样式。外观或样式：HTML网页中的文字的大
    133
    2019-11-05
    css
  • css3给背景设置渐变色的教程
    css 给网页中的背景设置渐变色，css的渐变颜色可以指定固定的两个颜色之前的线性过度，这个css3属性只支持高版本的浏览器。 //浏览器前缀background: linear-gradient(red, blue);background: -webkit-linear-gradient(red, blue);background: -o-linear-gra
    1999
    2019-09-14
    css

  • CSS3实现类似翻书效果的过渡动画的方法
    在VUE实战项目的中有一个加载推荐书籍的过渡动画，在项目中是使用JS实现。 当时看视频大概一个小时作用，拆分动画逻辑，写代码更是耗时。后来自己想着能不能用CSS动画直接写出来，折腾了半天，终于算是实现了。 可以查看加载动画地址 /*首先是DOM结构，不能
    18238
    2019-09-09
    css
  • CSS3 translate导致字体模糊的解决方法
    今日客户反馈，发现 使用了 translate会导致字体模糊。 .media-body-box{ @media all and (min-width: 992px){ position: absolute; width: 100%; top:50%; transform: translateY(-50%); right: 0; padding: 30px; } } 为了垂直居中，使用了 transform: tra
    1057
    2019-08-31
    css

  • 详解CSS3 animation–steps函数
    这几天在看一些 css3 动画的源码实现时，发现 css 代码的 animation 当中有一个比较陌生的单词 steps ，在源码中是这么写的： animation: thunder 2s steps(1, end) infinite; 查阅相关资料后发现 steps 函数是 animation-timing-function 属性的一个值，那
    615
    2019-08-31
    css

  • CSS3 毛玻璃效果教程
    毛玻璃效果做的好能使页面显得非常生动立体。直接上图 body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url(iphone.jpg) fixed 0 center; background-size: cover;}main {
    1956
    2019-08-17
    css
  • 通过css3动画和opacity透明度实现呼吸灯效果
    本篇文章给大家介绍通过css3动画和opacity透明度实现呼吸灯效果 代码如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8title呼吸灯/title/*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/style body{ background-color: black; } div{ margi
    158
    2019-08-10
    css
  • 使用CSS3实现input多选框自定义样式的方法
    本篇文章介绍使用CSS3实现input多选框自定义样式的方法 原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS 效果预览 html代码 div class=radio input type=chec
    1815
    2019-07-19
    css

  • svg+css3做一个动感的波浪效果实现
    本篇文章介绍svg+css3做一个动感的波浪效果实现 一根矢量的波浪 svg viewBox=0 0 560 20 class=wave-animation__water-wave wave-animation__water-wave--front use xlink:href=#wave/use/svgsvg id=wave width=100% height=100% path d=M420,20c21.5-0.4,38
    8752
    2019-07-02
    css

  • css3实现蒙版弹幕的功能
    本篇文章介绍css3实现蒙版弹幕的功能 最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版，也就
    6609
    2019-06-19
    css
  • 使用CSS3和JQuery easing 插件制作绚丽菜单
    本篇文章介绍使用CSS3和JQuery easing 插件制作绚丽菜单 在本教程中，我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出，并且弹出缩略图。 在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或
    5331
    2019-06-18
    jquery

  • 纯CSS3制作页面切换效果的教程
    本篇文章介绍纯CSS3制作页面切换效果的教程。 效果图如下： 代码如下： htmlhead title/title style type=text/css * { margin: 0; padding: 0; border: none; } .Bl { width: 600px; height: 540px; margin: 0 auto; position: relative; top: 50%; transfo
    1262
    2019-05-31
    css

  • css3实现六边形边框的代码
    本篇文章介绍css3实现六边形边框的代码 最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。 因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置 visibility: hi
    712
    2019-05-25
    css

  • 详解使用 css3 transform 属性来变换背景图
    本篇文章介绍使用 css3 transform 属性来变换背景图。 使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement {-webkit-transform: rotate(30deg);transform: rotate(30deg);}
    586
    2019-05-08
    css

  • CSS3 实现童年的纸飞机的方法
    本篇文章介绍CSS3 实现童年的纸飞机 的方法。 基本全用css来实现，只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 写之前再补充个知识点： 我们颜色的设置不用rgba， 用hsl(
    486
    2019-05-06
    css

  • css3 中实现炫酷的loading的教程
    本篇文章介绍css3 中实现炫酷的loading的教程。 js需要引入jquery 只用到了一点点js 先看效果图 html： div class=box div class=master div class=eyes div class=eyes-ball/div /div div class=mouth/div /div div class=master blue div class=eyes div c
    940
    2019-04-27
    css

  • JS+CSS3实现的简易钟表效果的教程
    代码如下： !DOCTYPE htmlhtml head meta charset=UTF-8 titlewww.jb51.net js+css3简易钟表/title style type=text/css *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; background-color: aliceblue; margin: 200px auto; position: rel
    678
    2019-04-14
    JavaScript

  • CSS3 3D倾斜视差图片展示动画特效
    一款很有创意的CSS3 3D倾斜视差图片展示动画特效，鼠标移动到页面不同位置查看视差动画效果。 js代码 script var cards = document.querySelector(.cards);var images = document.querySelectorAll(.card__img);var backgrounds = document.querySelectorAll
    71
    2019-02-26
    图片特效

  • CSS3悬停图片旋转放大并遮罩显示文字动画特效
    一款简单实用的CSS3响应式图片列表布局，鼠标悬停图片旋转放大并遮罩显示文字动画特效。
    77
    2019-02-26
    图片特效

  • jQuery+css3相册图片叠加堆放展开动画特效
    一款非常有创意的jQuery+css3相册图片叠加堆放展开动画特效，图片层叠放置布局效果，点击图片滑动展开，点击展开的图片点击则会滑动收缩起来。 js代码 script type=text/javascript src=js/jquery-1.10.2.min.js/script script type=text/javascriptjQuery(d
    74
    2019-02-26
    相册代码

  • 一个简单好看的纯CSS3翻书效果
    效果描述： 好久没有看到如此高逼格的纯CSS3特效了 蛮精致的一款纯CSS3模拟书本翻页效果 如果看不到效果，建议用最新版的谷歌浏览器查看 使用方法： 1、将CSS样式引入到网页中 2、将index.html中的代码部分拷贝到你的网页中
    92
    2019-02-26
    html5代码

  • CSS3转盘抽奖活动banner图片动画特效
    一款纯CSS3制作的转盘抽奖活动banner图片动画特效，可以用来做网站横幅图片动画展示效果。
    154
    2019-02-26
    焦点图/幻灯片

  • js+css3曲线循环菜单滚动切换特效
    一款十分独特个性的js+css3曲线循环菜单滚动切换特效，通过箭头按钮控制图片和导航菜单上下滚动切换。
    208
    2019-02-24
    css3特效

  • 纯CSS3宽屏水平导航下拉菜单代码
    纯CSS3宽屏水平导航下拉菜单代码，一款好看实用的横向网站导航下拉二级菜单，一级菜单还带有小图标，鼠标悬停则下拉显示全部二级菜单项目。
    201
    2019-02-24
    菜单导航

  • css3 column实现卡片瀑布流布局的示例代码教程
    本篇文章给大家介绍css3 column实现卡片瀑布流布局的示例代码教程 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。 最后使用css3中的column属性实现了这个布局，而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的...n
    1025
    2018-08-15
    css

  • 如何利用CSS3实现文字折纸效果
    今天小编给大家带来如何利用CSS3实现文字折纸效果的教程。 效果图： 代码： 代码如下，复制即可使用： !DOCTYPE htmlhtmlhead title/title style type=text/css html { height: 100%;} body { background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c
    158
    2018-07-11
    css

  • css3 矩阵的使用详解
    这篇文章主要介绍了css3 矩阵的使用详解的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 css3 矩阵变化. 应用格式为: transform: matrix(a,b,c,d,e,f); 对应于就是: 实际应用中的转换就是: 其中: ax+cy+e = 横坐标
    184
    2018-06-28
    css
共6页/174条 首页 上一页 1 2 3 4 5 6 下一页 末页
热门文章
排行榜
  • 每日
  • 周榜
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计