CSS
关注
分享
扫一扫
乐夫天命兮
一名默默无闻欺负键盘的人，坚持做我自己！！！！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3翻牌动效
效果如下废话不多说： <!doctype html> <html> <head> <meta charset="utf-8" /> <style> .data2 { width:100%; display:table; position:relative; overflow:hidden;原创 2020-06-24 18:54:36 · 520 阅读 · 0 评论 -
CSS实现闪烁的光圈
效果如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>@keyframes warn { 0% ...原创 2019-09-05 15:00:39 · 2730 阅读 · 0 评论 -
css3帧动画
效果图：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3逐帧动画</title> <style> @keyframes run{ ...转载 2019-08-26 17:57:10 · 629 阅读 · 2 评论 -
CSS3属性：box-shadow测试
容器设置阴影 box-shadow 语法：box-shadow: h-shadow v-shadow blur spread color inset;以上各属性值的解析：horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10p...原创 2019-08-07 16:43:12 · 224 阅读 · 0 评论 -
CSS3旋转实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3旋转实例</title> </head> <style> .photo-container { perspective: 1200px; /* 透视视...原创 2019-08-07 15:40:55 · 2363 阅读 · 0 评论 -
均分圆布局
代码如下：<html><head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.8.3.min.js"></script> <style> .zh-circle{ position: ...原创 2019-07-17 17:12:22 · 233 阅读 · 0 评论 -
css呼吸灯
效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #animat{ position: absolute; le...原创 2019-07-17 17:08:51 · 795 阅读 · 0 评论 -
CSS3 transform3D 图片翻转效果
基本思路来自于CSS3 transform3D 图片翻转效果一贴基于上帖基本实现一个3D 图片翻转效果demo，为了再加一个延时便成为下图效果：代码如下：<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>JavaSc...原创 2019-07-18 15:57:00 · 5652 阅读 · 0 评论 -
纯CSS滚动指示器技术实现
效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>纯CSS滚动指示器技术实现</title> </head> <style> body { position: relative;...原创 2019-07-09 19:47:47 · 652 阅读 · 1 评论 -
鼠标滑过元素动态边框运动
效果如下：<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停边框运动效果</title><script src="js/jquery-1.8.3.min.js"></script><style>* { ...原创 2019-07-09 19:39:39 · 245 阅读 · 0 评论 -
垂直居中四种方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> </head> <style> /*垂直水平居中方法一：position*/ /*.parent原创 2018-11-23 18:13:59 · 394 阅读 · 0 评论 -
css之鼠标滑过按钮变化
效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .buttons * { padding: 0; } body { ...原创 2019-04-29 17:26:21 · 939 阅读 · 0 评论 -
css文件扫描动效
具体效果如下：实现代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文件扫描动效</title> </head> <style> .code-bg{ position: relative;...原创 2019-04-29 13:43:32 · 958 阅读 · 0 评论 -
css鼠标滑过卡片上浮动效
效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标滑过上浮动效</title> </head> <style> .card .card-body, .card .card-footer,...原创 2019-04-28 16:18:15 · 2833 阅读 · 0 评论 -
Flex子元素均分父元素宽度布局
效果图如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .child{ width: 80px; height:80px; backgro...原创 2019-04-26 16:32:20 · 7747 阅读 · 0 评论 -
CSS常见兼容性问题及解决办法汇总
我们都知道，不同版本浏览器对css的解析是有些分别的，特别是IE6，和IE7.虽然现在使用老版本的人数不多，但是还是有部分人在使用，我们并不能完全忽略这群用户。如下所示：我们还是应该了解一下这些浏览器兼容问题。问题一：在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动（不然会出不在同一行）问题二：在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动；问题三：注...转载 2018-06-28 15:08:44 · 551 阅读 · 0 评论