![](https://img-blog.csdnimg.cn/20201020175406970.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 90
我把纯CSS动画以及CSS相关知识点存放在此分栏下。
我不是费圆
不积跬步无以至千里,不积小流无以成江海
展开
-
CSS 图片遮罩学习小节
概念:-webkit-mask-image是一项用于制作镂空图形和图形遮罩效果的CSS样式属性。做这个效果时考虑了 keyframes、transform等方式重新绘制遮罩层,结果都失败了。-webkit-mask-image 的起源很早,但兼容性不好,因此用途并不广泛。-webkit-mask-image 的值既可以是渐变色也可以是图片地址。·这个动画的关键属性是:-webkit-mask-size。·它在原遮罩层的基础上进行缩放时,图案会同步改变。/* 设置遮罩 *//* 设置底色 */原创 2024-01-23 16:37:23 · 1458 阅读 · 1 评论 -
Vue 自定义轮播
vue 纯手撸自定义轮播图,附带组件设计思路。划分标题、轮播区、指示点三块,在轮播区使用 display: inline-block; 使子元素横向排列,使用动态样式的写法,判断column 的属性值,以此来实现横向或纵向排列。使用计时器控制变量 nowInd 变化,当nowInd 发生改变会影响轮播图上的判断条件,进而控制轮播运动,根据config.column 的值,判断是进行左右移动 还是上下移动,用transition 来动态控制过渡效果的有无。喜欢这篇文章的话可以看看置顶,谢谢原创 2022-10-24 20:49:36 · 2161 阅读 · 2 评论 -
Vue 动态换肤
规划几套样式,通过动态class 或 scss 混入 @include 等方式进行赋值,给最外层的父元素添加全局样式。涉及到跨页面操作,可以将class转化为JSON字符串存在storage 或vuex 里,或者封装进公用组件,把每个页面不同的内容以插槽的形式插入。其它应用场景如:天地图自定义覆盖物,轮播图自定义指示点。原创 2022-10-10 20:57:11 · 1608 阅读 · 3 评论 -
css圣诞树 立体模型
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>圣诞树</title><meta name="viewport" content="width=device-width, initial-scale=1"><style> :root { --main-bg: #c2c2c2; --trunk-bg-1:..原创 2021-12-21 21:46:41 · 798 阅读 · 3 评论 -
CSS骰子翻转动画
<!doctype html><html><head><meta charset="utf-8"><title>CSS3骰子翻转动画</title><style>body { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:..原创 2020-12-16 14:16:33 · 595 阅读 · 0 评论 -
CSS层叠文字动画
很实用的一个动画,body里定义了文字,可以凭键盘任意修改,灵感来自于站长之家。公众号转型做了恋爱婚庆相关,Yeah!<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>css3层叠文字动画</title><style>body { background: black; margin: 0; height: 1..原创 2020-12-16 14:12:11 · 291 阅读 · 0 评论 -
面试题--CSS动画的妙用
写一个程序,让三个按钮按不同速率向右移动,触碰到浏览器边缘时返回,持续这种效果uni-app项目,template模板,原理相同<template> <view> <!-- 写一个程序,让三个button按不同速率向右移动,触碰到浏览器边缘 时返回,持续这种效果--> <button class="btn red"></button> <button class="btn yellow"></b原创 2022-07-10 01:11:46 · 439 阅读 · 0 评论 -
鼠标悬停按钮
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CSS3圆形修边渐变按钮</title><style> body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font.原创 2020-11-24 09:46:28 · 567 阅读 · 0 评论 -
CSS卡通小汽车
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - CSS ART - Vintage VW Bug -</title> <style> :root { --size: 60; --unit: calc((var(--size) / 800) * 1vmin); } .原创 2020-11-24 09:37:50 · 598 阅读 · 2 评论 -
用胶卷记录过去,用心感悟动画之美
CSS:层叠样式表,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 以前的网页三剑客,如今面试题都不怎么考了。从蓝湖插件到像素大厨,从BootStrap到ElementUI,越来越多的工具可以自动生成CSS,也因此越发不被人们重视。 它还是十分强大的,很多JS解决不了的难题它可以轻松解决,很多动画效果用起来比Canvas简单易学,很多很多。。。<!DOCTYPE html><html lang="en"><head> &原创 2020-10-25 22:16:12 · 389 阅读 · 0 评论 -
垂直居中的 8 种方式
有些方式只适用于行内元素,有些方式适用于所有元素,把我胸中韬略,一一展现。1 所有元素line-height居中: 子元素{line-height:父元素内容高度} 或 子元素{font:24px/父元素内容高度 楷体;}2 所有元素margin居中: 子元素{margin-top:父元素内容}...原创 2020-10-24 22:19:49 · 5200 阅读 · 1 评论 -
CSS手绘图形
就会这么点儿东西,1024全教给你们,程序员日快乐!感谢每一个努力奋斗的人,努力不一定成功,但失败了不会觉得惋惜,最难的不是开始,是日复一日的坚持。钻石<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> #box{ border-style:solid; border-原创 2020-10-23 21:43:33 · 1987 阅读 · 6 评论 -
CSS快乐星球
在CSS交流网站上看到了这个效果,在赞叹别人伟大的同时自己也想动手试一试,的确是一个十分花哨的效果,主要考察的是 transform 的运用。 让我们一起来揭秘它吧! 当我写到一半的时候,问题也就随之而来了。我的大盒子在每一次旋转之后会闪烁一次,拉低了整体效果。我在百度上找到了这样一则信息,感谢提供此信息的博友。原文链接大意是说:父元素的transform-style: preserve-3d;子元素并未继承,当子元素被添加进去时,父元素就会强制闪烁一次,这样4个子元素绕一周,父元素转一圈原创 2020-10-13 20:13:43 · 851 阅读 · 1 评论 -
CSS绘制平行四边形
网上冲浪时发现的瑰宝,特别适合刚学习过 transform 的同学拿来练习,也比较适合前端大能拿来复习CSS 。素材来源于 “ 站长之家 ”故事是这样的: 当我看到这个动画时,并没有太大的触动。当我想要关闭它时,我突然好奇它是如何绘制一个平行四边形的。 百度给了我三种答案,看图一目了然 我把文件夹的 分析图 和源码 放在这里,有喜欢的朋友可以拿去试一试。——底部有问答<!doctype html><html><head><met原创 2020-10-05 19:27:04 · 1083 阅读 · 0 评论 -
小加载动画
在网上学了一个小加载动画,喜欢的话拿一个赞跟我换吧!纯 CSS 没有什么套路,来吧!展示:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>加载动画</title><style> body { margin: 0; height: 100vh; display: flex; align原创 2020-09-24 21:35:45 · 651 阅读 · 3 评论 -
忍术!猫眼三勾玉
如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢! 前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获。效果图:小眼睛一左一右固定在屏幕上,可调整屏幕宽度以控制二者间距。<!doctype html><html><head><meta charset="utf-8"><title>纯CSS3实现眨眼动画DEMO演示</title>&l原创 2020-09-18 10:38:01 · 1746 阅读 · 20 评论 -
CSS旋转魔方
CSS旋转魔方我想做一个相册,把儿子的照片放进去,外面是我,里面是他。可是苦逼程序员爱而不得,终日与编辑器为伍,日码万字不能休。一定要先做下广告,衷心希望大家浏览博客的同时,可以点一下“ 赞助商 ” ,这个机构真的很棒,受疫情影响,原本的大机构为生源所困,我希望同样热爱前端,或者有兴趣向前端发展的朋友,可以了解一下这家机构。我不是学院的招生老师,但大家可以咨询我学院方面的问题,博主不图名利,如果入校学习,我肯定会想办法让机构给你最大的优惠。不说了,上源码:<!DOCTYPE html>原创 2020-09-02 23:34:49 · 5518 阅读 · 41 评论 -
CSS动画的毕业设计
CSS动画的毕业设计用CSS动画写一个七龙珠,据说善良的程序员可以看到龙神,并许愿成功动画的基本属性和参数老样子,先给源码<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>七龙珠召唤神龙</title><style> * { box-sizing: border-box;原创 2020-09-02 20:09:25 · 5856 阅读 · 35 评论 -
CSS小鲨鱼
280行纯CSS,喜欢拿走<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title></title><style>* { padding: 0; margin: 0; box-sizing: border-box;}html { width: 100%; height: 100%;}body { wi原创 2020-08-30 12:13:18 · 5737 阅读 · 47 评论 -
CSS背景缩写、简写详细
CSS背景缩写、简写不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来背景共有8个属性:background-color 背景颜色background-position 背景图像的位置background-size 背景图片的尺寸background-repeat 如何重复背景图像background-origin 背景图片的定位区域background-clip 背景的绘制区域 /* 底部详细说明 */原创 2020-08-23 21:18:26 · 6397 阅读 · 1 评论 -
天哪!跟真的一样(CSS)
纯CSS伪类实现小象逼真动画先把代码送给大家,使用方式在上一篇博客中有详细说明:Canvas波浪花环给大家看一下效果图:<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conten原创 2020-08-20 21:52:22 · 4841 阅读 · 30 评论 -
纯CSS换肤
30行代码实现纯CSS—3种换肤老规矩,先把代码给大家,拿去粘贴直接用,无需引用,不好用评论底下随便喷,我一条一条看。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{background-color: #eee} input{display: none;}原创 2020-08-12 20:30:41 · 4608 阅读 · 46 评论 -
display , visibility
display: none; 与 visibility: hidden; 的区别:相同: 它们都能让元素不可见区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了 hidden,通过设原创 2020-08-15 17:49:03 · 908 阅读 · 12 评论