玩玩CSS,写一个图标堆叠效果

遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src="./img1.png" /> <img src="./img2.png" /> <img src="./img3.png" /> </div> 即,一个 DIV 中包含图片,对于左侧的文字,这里考虑使用 ::befo…

一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manifest.json两个文件. 下面是manifest.json的简单配置: { "manifest_version": 2, //名称 "name": "圣诞树", //版本 "version": "1.0.0",…

还在为小三角形切图？使用纯CSS写一个简单的三角形

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会…

纯css写一个大太阳的天气图标

效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式. <div class="container"> <div class="sunny"></div> </div> css样式 1.定义父容器样式,控制图标位置,顺…

如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no,no,今天我们用css手撸这个花里胡哨的按钮. 做之前我们先分析一下实现过程中的难点: 按钮的斜切角: 按钮的边框,也是带斜切角的: 按钮的内外阴影,不能覆盖斜切角的部分. 按钮主体部分实现首先我们来实现按钮的主体和边框,说一下实现思路,css可以通过背景渐变实现斜切角的样式,但是这个时候边框就…

Java-Web 用html和css写一个EasyMall注册界面

要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> <meta charset="utf-8">  <…

css 写一个向右的箭头

经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 width: 7px; height: 7px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); 原理也挺简单,就是写个上边框和右边框,然后旋转45度就是向右的箭头了.不过移动端用应该没问题,pc上就要考虑transform的兼容性了.…

前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/ca82VAM 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

css写一个梯形

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .trapezoid{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right…

html表单——使用frameset写一个导航栏效果

主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--frameset 说明:1.frameset不能潜入在body标签里面,只能嵌入在html标…