“祝你生日快乐,祝你生日快乐……”,过生日有生日歌,生日蛋糕也是必不可少的,这篇文章主要为大家详细介绍了程序员利用纯HTML5+CSS3制作的生日蛋糕,具有一定的参考价值,感兴趣的小伙伴们可以参考一下以一个前端开发的身份
HTML5
fermos
2021-06-18
0
194
现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑
HTML5
fermos
2021-06-18
0
261
CSS3 flex布局总结2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的
CSS
fermos
2021-06-19
0
161
废话不想多说,我们直接上图和代码最实际。 我们先来看看效果图吧,看了效果图之后你们就会有动力去打造属于你们自己的自行车啦 怎么样,帅不帅呀,快来打造帅帅的自行车吧 代码如下,复制即可用,不过这是我的自行车,你们可
CSS
fermos
2021-06-19
0
149
CSS3实现各种表情 效果图:代码如下,复制即可使用:<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
text-align: center;
margin: 80px auto 0;
font-family: "Luc
CSS
fermos
2021-06-19
0
144
本篇文章通过代码实例给大家介绍一下svg+css3实现动感的波浪效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。一根矢量的波浪<svg viewBox="0 0 560 20" class="wave-animation__water-wave wave
CSS
fermos
2021-06-19
0
139
在微信小程序开发中,var that =this的声明很常见。举个例子,代码如下!示例代码11 //index.js
2 Page({
3
4 data: {
5 toastHidden: true,
6 },
7
8 loadData: function () {
9 var t
微信
fermos
2021-06-28
0
164
本文目标:1、掌握background-size背景图片大小的几种设置方法问题:1、实现以下效果,使用纯DIV+CSS,必须使用background-size附加说明:1、背景图片大小本身是500*300大小2、div容器宽度600*300大小3、要求整体居中显示现在
CSS
fermos
2021-06-28
0
127
本文目标:1、掌握background-clip背景裁切的3种实现问题:要求实现以下效果,使用纯DIV+CSS,必须使用background-clip附加说明:1、相框宽度为500px,高500px,其中border宽20px,里面文字padding为20,边框的大小为20px2、里面的图
CSS
fermos
2021-06-28
0
135
本文目标:1、掌握background-origin背景原点的使用问题:1、实现以下效果,使用纯DIV+CSS,必须使用背景原点background-orgin附加说明:1、每个相框宽500px,高500px,其中border宽20px,里面文字padding为20,边框的大小为20px2、
CSS
fermos
2021-06-28
0
126
本文目标:1、掌握text-shadow的用法问题:使用纯div+css实现以下效果附加说明:1、文字总共有4个分别是:Belive Yourself You Can2、文字大小为86px3、右边文字和左边文字的间距为20px4、图片大小 宽为:100px5、阴影的水平平
CSS
fermos
2021-06-28
0
133
本文目标:1、掌握文本带省略号的显示效果问题:1、实现以下效果,要求使用纯DIV+CSS,不适用任何框架附加说明1、总体宽度是500px,在页面中居中显示2、标题字体大小是22px,其他字体是16px3、超级开心果作者的名称靠最左,时间2
CSS
fermos
2021-06-28
0
145
本文目标:1、掌握CSS3中线性渐变(linear-gradient)的实现方法问题:要求实现以下效果,使用纯DIV+CSS,必须使用知识点 线性渐变(linear-gradient),且居中显示附加说明:1、一个彩色圆环的大小是400px*400px,里面空白圆环大小为260
CSS
fermos
2021-06-28
0
146
本文目标:1、掌握CSS3中内阴影和外阴影的用法问题:1、要求使用纯DIV+CSS实现如下效果附加说明:1、效果一中的水平阴影大小为4,垂直阴影为2,模糊度为62、效果二中的水平阴影为0,垂直阴影为0,模糊度303、整体宽度为800px,居中
CSS
fermos
2021-06-28
0
137
本文目标:1、掌握CSS3中border-radius的用法问题:实现以下界面效果,(不要求实现搜索功能),要求不使用任何框架,纯div+css3,同时必须使用border-radius知识点其他说明:1、整个宽度是800x,要求居中显示2、logo图片按宽300px,居中
CSS
fermos
2021-06-28
0
123
本篇文章给大家通过介绍一下纯CSS3实现小黄人动画效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。废话不想多说,我们直接上图和代码最实际。效果图:代码如下,复制即可用<!DOCTYPE HTML>
<HTML>
CSS
fermos
2021-06-28
0
120
本文目标:1、掌握CSS中结构性伪类选择器—nth-child的用法问题:1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—first-of-type附加说明:1、整体宽为5002、每个名言标签的间距为20,内部间距为25,字体为cursive现
CSS
fermos
2021-06-28
0
117
本文目标:1、掌握CSS3中属性选择器几种用法问题:1、要求使用div+css实现以下效果,但是要求css文件中全部使用属性选择器来设置元素样式附加说明:1、整个div宽为850,要求在页面中居中显示2、标题大小为28,加粗显示3、其他字
CSS
fermos
2021-06-28
0
137
本文目标:1、掌握background-image多背景的实现问题:1、实现以下效果,使用纯DIV+CSS,必须使用background-image附加说明:1、整体宽度是1000px,高300px,要求页面居中显示2、背景图片宽,高均为300px3、每张图片都是当做背景图片
CSS
fermos
2021-06-28
0
133
最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):视屏教程推荐:《CSS视频教程-玉女心经版》最终效果如下:全屏时:屏
CSS
fermos
2021-06-28
0
136
适合初学者学习的CSS3实现可爱的动物今天,我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术:一种使用纯HTML和CSS,另一种使用内
CSS
fermos
2021-06-28
0
146
新的元素选择器E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(
CSS
fermos
2021-06-28
0
144
实现思路:网格背景,由css3的线性渐变来实现。纸上的打孔,由圆和圆柱组成,多个打孔,可以由box-shadow的平铺来实现。实际代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg-
CSS
fermos
2021-06-28
0
137
css3新增伪类有:1、【p:first-of-type】;2、【p:last-of-type】;3、【p:only-of-type】;4、【p:only-child】;5、【p:nth-child(2)】。(推荐教程:css快速入门)CSS3新增伪类有那些?p:first-of-type 选择属于其父元素的首个元素
CSS
fermos
2021-06-28
0
131
项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。先贴代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
CSS
fermos
2021-06-28
0
120