11、CSS构建与应用:从基础到动画效果

CSS构建与应用:从基础到动画效果

1. CSS构建基础

在CSS构建方面,我们采用了极简的设置,仅使用Tailwind来构建CSS文件,而未使用Sass或PostCSS这两个流行的CSS工具包。

主要的Tailwind加载和CSS文件位于 app/assets/stylesheets/application.tailwind.css ,内容如下:

@tailwind base;
@tailwind components;
@tailwind utilities;

此文件的作用是告知Tailwind插入其CSS,目前未编写其他自定义CSS。

Tailwind的设置由配置文件 tailwind.config.js 管理,当前内容如下:

module.exports = {
  content: [
    "./app/views/**/*.(html|turbostream).erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.(js|ts|tsx)",
    "./config/initializers/simple_form_tailwind.rb",
  ],
}

在 package.json 文件中,有一个名为 build:css 的调用,用于

相关推荐

css3实现流星划过动画效果

html结构: <div class="d-shootingStar"> <div class="d-stars"></div> <div class="d-stars"></div> <div class="d-stars">&...

木子木木的专栏 3721

css动画效果

动画1(沿着椭圆转动) 其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...

专注于技术,分享实战经验,探索技术边界,用代码构建更美的数字世界。 1万+

构建CSS3立方体3D旋转加载动画的实用教程

在本章,我们将探究CSS3中的3D转换技术,它是现代网页设计中的一个重要组成部分。随着Web技术的进步,CSS3为前端开发者提供了更多动态和互动的元素,使得网页更加生动和吸引人。3D转换技术能够让我们通过代码在浏览器中创建三维空间效果,从而实现丰富的视觉体验。3D转换技术主要通过CSS3的transform属性来实现,它允许开发者对HTML元素进行空间变换,包括旋转(rotate)、倾斜(skew)、缩放(scale)、平移(translate)等操作。

weixin_34640289的博客 1122

centos7搭建LNMP环境-编译安装&yum安装-超详细

文章目录1. 首先了解编译安装和yum安装的区别。2. yum安装准备工作---切换阿里云yum源3. 编译安装lnmp4.yum安装lnmp5. lnmp一键安装6. 一些报错7. 笔记8. 参考文章 1. 首先了解编译安装和yum安装的区别。 windows下安装centos虚拟机,之前写过。传送门~~ 编译安装: 可以按需安装,想安在哪个目录下就安在哪个目录下。 可以设定参数 可安装自己想要的版本 yum安装: 安装的方便快捷 不需要考虑包的依赖 可以直接使用service nginx st

最美不过下雨天 9349

即插即用!5分钟为你的SNN模型添加频谱注意力(DCT-SA模块实战)

本文介绍了如何为脉冲神经网络(SNN)快速集成即插即用的DCT-SA频谱注意力模块。该模块利用离散余弦变换(DCT)在频率域自适应加权特征,能有效提升模型对纹理、边缘的感知能力,并在CIFAR10-DVS等数据集上实现分类精度提升与脉冲发放率下降。文章以SpikingJelly框架和ResNet19为例,提供了详细的代码实现、集成步骤及参数调优实战指南。

kotlin6android的博客 609

51单片机———UART串口通信

传统理解就是信息的传输与交换。单片机与单片机之间,单片机与电脑之间,以及单片机与各式各样的模块之间都可以进行通信。如果没有通信,那么单片机的功能仅仅局限于它本身,它没办法从其他设备获取有用信息,也无法将自己产生的信息告诉其他设备,这样子单片机与外围器件的合作就会收到限制,没办法完成更多的功能,就像一个没办法拓展业务的公司。:实现我们程序当中写的P0=0xFC,就是一次同时对8位进行信号的输出;习惯上,我们还称P0、P1、P2、P3为单片机的4组并行总线:实现低位先发 高位在后。

m0_74225397的博客 3297

在macOS上使用GitHub的超详细指南

GitHub:免费的远程仓库,可用来托管自己的开源项目。它利用了Git强大的克隆和分支功能,让我们参与别人的开源项目和让别人参与自己的开源项目变得简单高效。

Mars的博客 3392

人工智能训练师三级·模型生命周期真题40题|训练→评估→调优全链路通关

本文为人工智能训练师三级考试真题解析系列第2篇,聚焦模型生命周期全链路(训练→评估→调优)。内容包含40道精选真题,覆盖数据划分、模型训练、评估指标、超参数调优4个核心阶段。重点考察:1)数据集的合理划分方法(留出法、交叉验证);2)模型训练的基本原理;3)关键评估指标(准确率、召回率、F1等)的应用场景;4)超参数调优技术(网格搜索、随机搜索等)。通过真题解析帮助考生系统掌握模型生命周期的闭环迭代方法论,提升从数据准备到模型优化的全流程实践能力。适合备考人工智能训练师三级认证的考生学习参考。

白话机器学习 90

Testbench编写:激励生成、响应监控、仿真时间控制

本文介绍了Verilog/VHDL Testbench的核心技术,重点阐述了激励生成、响应监控和仿真时间控制三大关键环节。通过时钟生成、复位信号生成等具体代码示例,展示了如何有效构建测试平台。文章还总结了波形输出、自动检查等验证方法,并提出了模块化设计、自动化检查等最佳实践,帮助开发者提升FPGA仿真效率和验证质量。这些技术要点为数字电路设计的正确性验证提供了系统化的解决方案。

2301_79143213的博客 112

lvgl 9虚拟键盘控件 (lv_keyboard) 使用指南

是 LittlevGL 提供的一个虚拟键盘控件,适用于在图形界面中输入文本。与按钮矩阵类似,虚拟键盘预定义了多个键位布局,支持多种模式和自定义键位映射,能够满足各种文本输入需求。通过与文本区域 (Text Area) 的结合,键盘能够自动将输入的字符传送到指定区域。控件是 LittlevGL 提供的强大虚拟键盘解决方案,适用于任何需要文本输入的界面。通过预定义的键盘模式、自定义键位映射和文本区域自动填充功能,可以大大提升用户输入体验。无论是在嵌入式系统的用户界面中,还是在其他需要虚拟键盘的应用中,

m0_62599305的博客 2187

基于未来出行解决方案的场景实例:城市空中交通(UAM)的飞行路径规划与避障

本文介绍了使用Simulink进行城市空中交通(UAM)飞行路径规划与避障的仿真方法。主要内容包括:1)UAM系统架构与核心挑战;2)详细建模步骤,从城市3D环境构建到飞行器动力学模拟;3)全局路径规划(A*/RRT*)和局部避障(DWA/APF)算法实现;4)多机协同与冲突解决;5)关键场景仿真与性能评估;6)高级功能拓展方向。通过Simulink的数字孪生系统,可有效验证UAM在复杂城市环境中的可行性,为未来立体交通发展提供技术支撑。

xiaoheshang_123的博客 258

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

上一篇: 29、对抗训练变压器:用于语音增强的创新方法
下一篇: 27、STE3D - CAP:立体 3D 验证码的技术解析与安全保障
gitlab7runner
博客等级 码龄4年 78粉丝 1747原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值