![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 476 阅读 · 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 · 2606 阅读 · 0 评论 -
css3帧动画
效果图:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3逐帧动画</title> <style> @keyframes run{ ...转载 2019-08-26 17:57:10 · 584 阅读 · 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 · 191 阅读 · 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 · 2321 阅读 · 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 · 203 阅读 · 0 评论 -
css呼吸灯
效果如下:代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #animat{ position: absolute; le...原创 2019-07-17 17:08:51 · 738 阅读 · 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 · 5534 阅读 · 0 评论 -
纯CSS滚动指示器技术实现
效果如下:代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>纯CSS滚动指示器技术实现</title> </head> <style> body { position: relative;...原创 2019-07-09 19:47:47 · 563 阅读 · 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 · 212 阅读 · 0 评论 -
垂直居中四种方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> </head> <style> /*垂直水平居中方法一:position*/ /*.parent原创 2018-11-23 18:13:59 · 349 阅读 · 0 评论 -
css之鼠标滑过按钮变化
效果如下:代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .buttons * { padding: 0; } body { ...原创 2019-04-29 17:26:21 · 873 阅读 · 0 评论 -
css文件扫描动效
具体效果如下:实现代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文件扫描动效</title> </head> <style> .code-bg{ position: relative;...原创 2019-04-29 13:43:32 · 902 阅读 · 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 · 2709 阅读 · 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 · 7619 阅读 · 0 评论 -
CSS常见兼容性问题及解决办法汇总
我们都知道,不同版本浏览器对css的解析是有些分别的,特别是IE6,和IE7.虽然现在使用老版本的人数不多,但是还是有部分人在使用,我们并不能完全忽略这群用户。如下所示:我们还是应该了解一下这些浏览器兼容问题。问题一:在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动(不然会出不在同一行)问题二:在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动;问题三:注...转载 2018-06-28 15:08:44 · 489 阅读 · 0 评论