标签：css
html5+css3之制作header实例与更新
上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。 事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于csser的话就不一定了 在整个header组件的代码过程中，我与重构同事就一些地方发生了重复的交流，争论，今天就header组件的……
CSS 鼠标悬浮在图片上添加遮罩层效果的实现
先看效果： 鼠标移在图片上时，添加阴影效果+文字 / 图标 实现的关键是 CSS 的 opacity 和 hover，本文也主要介绍遮罩层的实现 HTML: <div class="img_div"> <img src="item.image_base64" @click="……
html+css3实现的登录界面
实现效果 先用html搭建个基本框架 <body> <div class="container"> <section id="content"> <form action=""> <h……
CSS实现背景图片屏幕自适应的实现
在做登陆页面等的首页的时候，经常会遇到需要放一张背景大图的情况，并且需要图片按比例缩放，来适应不同屏幕的大小。 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"……
css transform 翻页动画记录的实现
翻页问题场景 B和C是同一页（正反两面） 当想要翻页覆盖 A 时，B、C 需要同时翻页才能覆盖A，显示D。 B、C 不能写在同一个盒子里 错误例子： <div class="pagesBox A"></div> <div class="pagesBox"> <d……
如何试着在你的css增加粘稠效果
不知道是谁先发现filter:blur和filter:contrast能发生如此奇妙的化学反应的,但这不重要,重要的是你如果学会了这种特效的使用方法，就可以为你的网页添加酷炫的效果！ 那么请先看两个小小的demo demo 怎么做？ 仔细看，网页上的元素似乎都有了粘度，当元素靠的足够近时，会发生融合的效果，当元素远离时又会有一种黏住的效果，这又如何完成……
CSS3 实现飘动的云朵动画
运行效果 html <head> <meta charset='UTF-8'> <title>CSS3 Cloud Animations By Montana Flynn</title> </head> <body> <div ……
CSS3 实现倒计时效果
实现效果 html %div.wrapper %div.time-part-wrapper %div.time-part.minutes.tens %div.digit-wrapper %span.digit 0 - (-5..0).each do |i| ……
纯CSS3实现的井字棋游戏
首先查看一下效果： html .tic-tac-toe - for (var turn = 1; turn <= 9; turn++) - for (var row = 1; row <= 3; row++) - for (var column = 1; column <= 3; column++) ……
CSS3 实现时间轴动画
实现效果 html <h2>CSS3 Timeline</h2> <p>Please set the $vertical variable to false to see the horizontal version.</p> <ul id='timeline'> ……
- 1
- 2