CSS3
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画，就是鼠标移入后，在对应的文字下方会出现下划线的动画效果，当鼠标移除后，下划线动画会消失，于是想了下该如何去实现这个动画效果。原创 2023-03-23 14:15:10 · 715 阅读 · 1 评论 -
css实现表格简单的右侧列固定或者顶部表头固定效果
css实现表格简单的右侧列固定或者顶部表头固定效果原创 2023-01-18 22:35:09 · 942 阅读 · 0 评论 -
CSS3实现发光按钮效果动画
在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变...原创 2022-09-01 17:21:23 · 2639 阅读 · 0 评论 -
flex实现等分布局和两边固定中间自适应
等分布局：<div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>.main { height: 300px; width:100%; ..原创 2021-04-01 14:22:00 · 3091 阅读 · 0 评论 -
css两行代码搞定移动端swipper滑动banner效果
刚看了下张大神的博客，又有新发现。原文地址：大侠，请留步，要不过来了解下CSS Scroll Snap？<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2020-12-15 14:43:50 · 511 阅读 · 0 评论 -
position:sticky；粘性布局
生效规则position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...原创 2018-12-06 16:48:32 · 2644 阅读 · 1 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3自定义滚动条-轩枫阁</title><style>header{ font-family:原创 2018-08-09 17:44:21 · 2474 阅读 · 1 评论 -
H5旋转切换动画效果代码。
闲来没事，敲敲代码也不错，，，，，，动画效果如下：具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid原创 2018-03-31 16:19:25 · 4569 阅读 · 0 评论 -
防百度知道中心页面动画效果
最近在百度知道中心看到一个动画挺有意思的，就想了一下看怎么实现，百度原效果如下：码云地址：码云上的demohtml代码：html lang="en">head> meta charset="UTF-8"> title>baidutitle> link rel="stylesheet" href="css/baidu.css"> script sr原创 2018-01-06 14:16:04 · 332 阅读 · 1 评论 -
CSS3边框旋转动画实现效果
动画结果如下：以前有看到过相应的动画，想了一下实现思路，就是用4个div分别定位模拟上下左右边框，然后根据定位top、left、right、bottom4个位置定位，再用css3中的transition实现相应的鼠标移入动画效果。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name原创 2017-12-12 17:32:46 · 7209 阅读 · 0 评论 -
display:inline-block配合text-align:justify实现块级元素均匀布局
今天突然get到一个使用text-align:justify实现块级元素均匀布局。代码如下：<html> <head> <meta charset="utf-8"> <title>display:inline-block配合text-align:justify实现块级元素均匀布局</title> <style> *{ma原创 2017-08-30 17:09:52 · 1499 阅读 · 0 评论 -
CSS3target伪类元素选择实现类似灯箱效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } body {原创 2017-03-29 23:35:36 · 717 阅读 · 0 评论 -
css3绘制八卦图及动画效果
原理很简单，就是外面加个盒子box。作为旋转动画的box，然后里面分别利用两个div使用css3的 border-radius绘制半圆，分别定位在上下中间对齐两个位置，里面在放两个小的原点水平和垂直方向对齐即可实现。然后在使用Css3的animation属性制作动画。效果如下图。原创 2017-04-10 22:52:18 · 3852 阅读 · 2 评论 -
CSS清除因为浮动布局导致父元素height值为0的三种方法
在使用css布局页面的时候往往会使用float布局元素，这时有可能会出现因为浮动，父元素出现高度为0的情况，如图所示 这时会根据项目需要对浮动的元素进行清除，以避免父元素出现为高度0的情况。常见的方法如下：第一种 、 在子元素里面多加一个div（或者其他带有clear:both样式的元素）原创 2017-07-26 22:59:46 · 2019 阅读 · 1 评论 -
css选中子元素中不是第一个元素的3种方法
第一种：使用伪类选择器:not原创 2017-07-26 23:43:17 · 61010 阅读 · 2 评论 -
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" c原创 2017-08-14 10:37:57 · 1094 阅读 · 0 评论 -
table-layout属性fixed和auto的区别
定义： <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>table-layout属性fixed和auto的区别</title><meta name="author" content="" /><style>h1{font-size:16px;font-family:Arial原创 2017-08-23 11:05:55 · 14613 阅读 · 1 评论 -
原生javascript实现鼠标在窗口按下拖动，元素放大效果。
代码如下：<!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=edg原创 2017-08-26 20:13:25 · 1244 阅读 · 0 评论 -
css3 animation小动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css3 animation小动画 </title> <style> .box{ height:100px; width:100px;原创 2017-09-06 15:04:01 · 651 阅读 · 0 评论 -
纯CSS3运用target伪类元素制作手风琴效果
什么是target伪类元素？查了一下W3C原理就是点击相应的A标签触发相应的锚点，从而实现使用target伪类元素选择相应的内容进行实现，实现代码如下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * {原创 2017-03-29 23:34:34 · 813 阅读 · 0 评论